Bootstrap, web sayfalarında metinlerin düzenlenmesi, okunabilirliğin artırılması ve şık bir görünüm elde edilmesi için gelişmiş tipografi sınıfları sunar. Tipografi sınıfları, yazı tiplerini, boyutlarını, hizalamalarını ve metin stillerini kolayca düzenlemeyi sağlar.
Temel Tipografi Özellikleri
- Başlıklar (Headings): Metinlere hiyerarşik düzen kazandırmak için kullanılır.
- Paragraflar (Paragraphs): Akıcı metinler için geliştirilmiş stiller sunar.
- Yazı Tipi Stilleri: Kalın, italik veya küçük metinler için sınıflar içerir.
- Hizalama (Alignment): Metni sola, sağa, ortaya veya iki yana yaslayabilirsiniz.
- Duyarlılık (Responsive Typography): Ekran boyutuna göre yazı boyutlarını ayarlayabilirsiniz.
Başlıklar (Headings)
Bootstrap’ta h1 ile h6 arasında değişen başlıklar varsayılan olarak kullanılır. Ayrıca .display-{n} sınıflarıyla daha büyük başlıklar oluşturabilirsiniz.
Örnek:
<h1>H1 Başlık</h1>
<h2>H2 Başlık</h2>
<h3>H3 Başlık</h3>
<h4>H4 Başlık</h4>
<h5>H5 Başlık</h5>
<h6>H6 Başlık</h6>
<p class="display-1">Display 1 Başlık</p>
<p class="display-4">Display 4 Başlık</p>
Açıklama:
- Display Başlıklar: Daha büyük başlıklar oluşturur.
- Varsayılan Başlıklar: HTML başlık etiketleriyle uyumludur.
Paragraflar (Paragraphs)
Bootstrap, paragraflar için varsayılan bir yapı sunar ve metin boyutlarını değiştirmek için .lead sınıfı kullanılabilir.
Örnek:
<p>Bu bir normal paragraflık metindir.</p>
<p class="lead">Bu bir dikkat çekici paragraflık metindir.</p>
Açıklama:
.lead: Metni daha büyük ve belirgin hale getirir.
Yazı Tipi Stilleri
Metinlerin görünümünü değiştirmek için çeşitli sınıflar kullanabilirsiniz:
| Sınıf | Açıklama | Örnek Kullanım |
|---|---|---|
.fw-bold | Yazıyı kalın yapar. | <p class="fw-bold">Kalın Yazı</p> |
.fw-light | Yazıyı ince yapar. | <p class="fw-light">İnce Yazı</p> |
.fst-italic | Yazıyı italik yapar. | <p class="fst-italic">İtalik Yazı</p> |
.fst-normal | İtalik olmayan normal yazı yapar. | <p class="fst-normal">Normal Yazı</p> |
.text-decoration-underline | Altı çizili yapar. | <p class="text-decoration-underline">Altı Çizili</p> |
.text-decoration-none | Alt çizgiyi kaldırır. | <p class="text-decoration-none">Altı Çizgisiz</p> |
Hizalama (Text Alignment)
Metinleri hizalamak için aşağıdaki sınıflar kullanılabilir:
| Sınıf | Açıklama | Örnek Kullanım |
|---|---|---|
.text-start | Metni sola hizalar. | <p class="text-start">Sola Hizalı</p> |
.text-center | Metni ortalar. | <p class="text-center">Ortalanmış</p> |
.text-end | Metni sağa hizalar. | <p class="text-end">Sağa Hizalı</p> |
.text-justify | Metni iki yana yaslar. | <p class="text-justify">İki Yana Yaslı</p> |
Renk ve Arka Plan Renkleri
Bootstrap, metinlerin rengini ve arka planını değiştirmek için hazır sınıflar sunar.
| Metin Renkleri | Açıklama | Örnek Kullanım |
|---|---|---|
.text-primary | Ana renk (genelde mavi). | <p class="text-primary">Mavi Metin</p> |
.text-secondary | İkincil renk (genelde gri). | <p class="text-secondary">Gri Metin</p> |
.text-success | Başarı rengi (genelde yeşil). | <p class="text-success">Yeşil Metin</p> |
.text-danger | Hata rengi (genelde kırmızı). | <p class="text-danger">Kırmızı Metin</p> |
.text-warning | Uyarı rengi (genelde sarı). | <p class="text-warning">Sarı Metin</p> |
Responsive (Duyarlı) Tipografi
Ekran boyutuna göre yazı boyutlarını değiştirebilirsiniz:
Örnek:
<p class="fs-1">Büyük Metin</p>
<p class="fs-3">Orta Boy Metin</p>
<p class="fs-5">Küçük Metin</p>
Açıklama:
fs-{n}: Yazı boyutunu tanımlar (1 en büyük, 6 en küçük).
Bootstrap Tipografi Özet Tablosu
| Özellik | Sınıf | Açıklama |
|---|---|---|
| Kalın Yazı | .fw-bold | Yazıyı kalın yapar. |
| İtalik Yazı | .fst-italic | Yazıyı italik yapar. |
| Alt Çizili Yazı | .text-decoration-underline | Yazının altını çizer. |
| Metin Renkleri | .text-primary | Metni ana renk yapar (genelde mavi). |
| Responsive Yazı Boyutları | .fs-{n} | Yazı boyutlarını belirler (1-6 arasında). |
Bootstrap Tipografi Avantajları
- Kolay Kullanım: Hazır sınıflar sayesinde hızlıca tipografi düzenlemeleri yapılabilir.
- Duyarlı Yapı: Tüm cihazlarda okunabilir bir metin düzeni sağlar.
- Estetik Görünüm: Varsayılan olarak şık ve düzenli bir tipografi sunar.