Bootstrap / Uncategorized

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 4 renk kodları

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.

primarytext-primary#007bff
infotext-info#17a2b8
dangertext-danger#dc3545
warningtext-warning#ffc107
successtext-success#28a745
secondarytext-secondary#6c757d
darktext-dark#343a40
mutedmuted#6c757d
light text-light#f8f9fa
white text-white#ffffff

 

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.

5 6 votes
Article Rating
Subscribe
Bildir
guest
3 Yorum
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Çilem
Çilem
6 ay önce

çok işime yaradı anlatım tarzınızda çok iyi çok teşekkür ederim.

ayşegül
ayşegül
6 ay önce

çok kullanışlı program herkese tavsiye ederim