Bootstrap, web sitelerinde tasarımı daha çekici ve anlamlı hale getirmek için geniş bir renk paleti sunar. Bu renkler, özellikle arka plan, metin, düğmeler ve sınır gibi elemanları hızlı bir şekilde renklendirmek için kullanılır. Varsayılan olarak Bootstrap, duyarlı ve erişilebilir renk sınıfları sağlar.
Temel Renk Sınıfları
Bootstrap’ta renkler genelde şu sınıflarla temsil edilir:
- Metin Renkleri:
.text-{renk} - Arka Plan Renkleri:
.bg-{renk} - Sınır Renkleri:
.border-{renk}
Bootstrap Varsayılan Renkler
Aşağıdaki renkler, Bootstrap’ta varsayılan olarak gelir:
| Renk | Metin Sınıfı | Arka Plan Sınıfı | Sınır Sınıfı |
|---|---|---|---|
| Primary | .text-primary | .bg-primary | .border-primary |
| Secondary | .text-secondary | .bg-secondary | .border-secondary |
| Success | .text-success | .bg-success | .border-success |
| Danger | .text-danger | .bg-danger | .border-danger |
| Warning | .text-warning | .bg-warning | .border-warning |
| Info | .text-info | .bg-info | .border-info |
| Light | .text-light | .bg-light | .border-light |
| Dark | .text-dark | .bg-dark | .border-dark |
Renklerin Kullanımı
Metin Renkleri
Metinlerin renklerini değiştirmek için .text-{renk} sınıfları kullanılır.
Örnek:
<p class="text-primary">Bu bir primary (ana renk) metindir.</p>
<p class="text-success">Bu bir success (başarı) metindir.</p>
<p class="text-danger">Bu bir danger (hata) metindir.</p>
Arka Plan Renkleri
Elemanların arka planlarını renklendirmek için .bg-{renk} sınıfları kullanılır.
Örnek:
<div class="bg-warning text-dark p-3">Bu bir warning (uyarı) arka planıdır.</div>
<div class="bg-info text-white p-3">Bu bir info (bilgi) arka planıdır.</div>
<div class="bg-light text-dark p-3">Bu bir light (açık) arka planıdır.</div>
Sınır Renkleri
Konteyner veya kutuların sınırlarını renklendirmek için .border-{renk} sınıfları kullanılır.
Örnek:
<div class="border-primary border p-3">Bu bir primary (ana renk) sınırdır.</div>
<div class="border-danger border p-3">Bu bir danger (hata) sınırdır.</div>
<div class="border-success border p-3">Bu bir success (başarı) sınırdır.</div>
Şeffaflık (Opacity) Kontrolü
Bootstrap renklerini daha şeffaf hale getirmek için .bg-opacity-{değer} sınıfları kullanılabilir. (0 ile 100 arasında değerler alır.)
Örnek:
<div class="bg-primary bg-opacity-50 text-white p-3">Bu bir yarı şeffaf primary arka planıdır.</div>
<div class="bg-danger bg-opacity-75 text-white p-3">Bu bir şeffaf danger arka planıdır.</div>
Gradyan Arka Planlar
Bootstrap’ta renklerin gradyan (gradient) efektleriyle kullanılabilmesi için .bg-gradient sınıfı eklenir.
Örnek:
<div class="bg-primary bg-gradient text-white p-3">Bu bir gradyan primary arka planıdır.</div>
<div class="bg-success bg-gradient text-white p-3">Bu bir gradyan success arka planıdır.</div>
Bootstrap Renkler Özeti
| Özellik | Sınıf | Örnek Kullanım |
|---|---|---|
| Metin Renkleri | .text-{renk} | <p class="text-info">Bilgi Metni</p> |
| Arka Plan Renkleri | .bg-{renk} | <div class="bg-dark text-white">Koyu Arka Plan</div> |
| Sınır Renkleri | .border-{renk} | <div class="border-warning">Uyarı Sınır</div> |
| Şeffaflık | .bg-opacity-{değer} | <div class="bg-primary bg-opacity-50">Şeffaf</div> |
| Gradyan Arka Plan | .bg-gradient | <div class="bg-success bg-gradient">Gradyan</div> |
Bootstrap Renklerin Avantajları
- Kolay Kullanım: Hazır sınıflarla hızlıca renk değişiklikleri yapılabilir.
- Tutarlı Tasarım: Tüm proje boyunca aynı renk paletini kullanmayı sağlar.
- Duyarlılık: Renkler her cihazda uyumlu şekilde görüntülenir.
- Erişilebilirlik: Kontrast oranları optimize edilmiştir.