Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Örnek Arama: Html renkler , php veri tabanı bağlantısı

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.

primary text-primary #007bff
info text-info #17a2b8
danger text-danger #dc3545
warning text-warning #ffc107
success text-success #28a745
secondary text-secondary #6c757d
dark text-dark #343a40
muted muted #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 3 votes
Article Rating
Subscribe
Bildir
guest
3 Yorum
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
4 ay önce

[…] class yapıları içeriside kullanılmaktadır. Bootstrap renkleri hakkında daha detaylı bilgiyi bootstrap renkleri yazımı okuyarak elde […]

Çilem
Çilem
3 ay önce

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

ayşegül
ayşegül
3 ay önce

çok kullanışlı program herkese tavsiye ederim