Bootstrap Renkler

Bir CSS framework’ü olan bootstrap renk konusunda oldukça kaliteli bir iş çıkarmıştır. Bootsrap temel renkleri web tasarımcılara kod yazarken büyük kolaylıklar sağlarken ux/ui çerçevesinde hazırlandığı için kullanıcı deneyimini de fazlasıyla gözetmektedir.

Bootstrap renkleri belirli olay ve durumlar göz önüne alınarak hazırlanmıştır.

Bootstrap Yazı Renkleri

Aşağıdaki tabloda bootstrap renk class isimlerini yazılarda kullanıcılar class ları ve html de bu kodların karşılıklarını görebilirsiniz.

Bootstrap Arkaplan Renkleri

Örneğin: Danger türkçe karşılığı ile Tehlike renk sınıfı hata mesajları gibi alanlarda kullanılmaktadır. Bu da tasarımcının elini güçlendirmektedir.

Bootstrap 4 Renkler ve Anlamları

primary: Birincil

secondary: Az Önemli (Örnek: Alt Metinler – Önemsiz Açıklamalar)

success : Başarı ( Örnek: Üye Kaydı Tamamlandı)

danger : Tehlike Hata ( Örnek: Eksik Bilgiler – İşlem Tamamlanamadı.)

info: Bilgi (Örnek: kdv dahil fiyat – ücretsiz kargo)

warning: Uyarı (  Örnek: Bu yazıyı silmek sayfanızda belli problemlere yol açabilir)

Bootstrap Renkler ve Renk Class’ları Örnekleri

Hocam kodları yazmışsın da nasıl kullanacağımızı bilmiyoruz diyenelerden sonra renk kodlarını belirli örnekler içerisinde açıklamaya çalıştım. Zaman geçtikçe daha farklı örnekler eklemeyi de planlıyorum.

Yazı Örneği

Yazıları herhangi bir renk ile biçimlendirmek için kullanacağım yazı etiketi içerisindeki class’da text-renkismi formatını kullanıyoruz.

<p class="text-primary"> Koyu mavi yazıları bu class sayesinde yazabiliyorum. </p>

Arkaplan Örneği

Elementleri herhangi bir renk ile arkaplan uygulamak için kullanacağım etiket içerisindeki class’da bg-renkismi formatını kullanıyoruz.

<div class="bg-danger"> 

     <p class="text-white"> Kırmızı Bir Uyarı kutusu İçerisinde Beyaz Bir Yazı </p>

</div>

Buton Örneği

Butonları herhangi bir renk uygulamak için kullanacağım etiket içerisindeki class’da btn-renkismi formatını kullanıyoruz.

<button class="btn btn-danger "> Hemen Al </button>

Butonlarda class içersine btn ekleyerek buton olduğunu bildiriyor daha sonra btn-danger vs gibi renkleri bildiriyoruz.