Bootstrap İçerik Tipografi

Bootstrap’te tipografi, metinlerin ve içeriklerin düzenlenmesi, biçimlendirilmesi ve görsel olarak sunulmasıyla ilgili stil ayarlarını içerir. Bootstrap, içeriğinizi daha okunabilir ve estetik hale getirmek için çeşitli tipografi sınıfları ve bileşenleri sunar. İşte Bootstrap’te tipografi hakkında bilmeniz gerekenler:

1. Temel Metin Sınıfları

Bootstrap, metinlerinizi düzenlemek için bir dizi sınıf sunar:

• Başlık Sınıfları: Bootstrap, başlık etiketleri (h1, h2, h3, h4, h5, h6) için önceden tanımlanmış stiller sunar. Başlıklar, sayfa yapısında önemli rol oynar.

   
    <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3>  
   
   

  Canlı Dene Kopyala

• Paragraf Sınıfları: Paragraflar için .lead sınıfı kullanılabilir. Bu sınıf, metnin daha belirgin ve okunabilir olmasını sağlar.

   
    <p class="lead">Bu, önemli bir paragraftır.</p>  
   
   

  Canlı Dene Kopyala

2. Metin Biçimlendirme

Bootstrap, metinlerinizi biçimlendirmek için çeşitli yardımcı sınıflar sunar:

• Metin Renkleri: Metin rengini değiştirmek için şu sınıflar kullanılabilir:

  • .text-primary: Birincil renk
  • .text-secondary: İkincil renk
  • .text-success: Başarılı durum rengi
  • .text-danger: Tehlike durumu rengi
  • .text-warning: Uyarı rengi
  • .text-info: Bilgilendirme rengi
  • .text-light: Açık renk
  • .text-dark: Koyu renk
  • .text-body: Varsayılan metin rengi
  • .text-muted: Soluk metin
  • .text-white: Beyaz metin

  Örnek:

   
    <p class="text-primary">Bu birincil renkte bir metin.</p>  
   
   

  Canlı Dene Kopyala

• Metin Ağırlığı: Metin ağırlığını ayarlamak için aşağıdaki sınıflar kullanılabilir:

  • .fw-bold: Kalın metin
  • .fw-normal: Normal ağırlık
  • .fw-light: Hafif metin

  Örnek:

   
    <p class="fw-bold">Bu kalın bir metin.</p>  
   
   

  Canlı Dene Kopyala

• Metin Boyutları: Bootstrap, metin boyutunu değiştirmek için .fs-* sınıflarını kullanır:

  • .fs-1: Çok büyük metin
  • .fs-2: Büyük metin
  • .fs-3: Orta boy metin
  • .fs-4: Normal metin
  • .fs-5: Küçük metin
  • .fs-6: Çok küçük metin

  Örnek:

   
    <p class="fs-1">Bu çok büyük bir metin.</p>  
   
   

  Canlı Dene Kopyala

3. Yazı Stilleri

Bootstrap, yazı stillerini ayarlamak için bazı yardımcı sınıflar sunar:

• İtalik Metin: .fst-italic sınıfı kullanılarak italik metin oluşturulabilir.

  Örnek:

   
    <p class="fst-italic">Bu italik bir metin.</p>  
   
   

  Canlı Dene Kopyala

• Alt Çizgi: .text-decoration-underline sınıfı kullanılarak metin altı çizilebilir.

  Örnek:

   
    <p class="text-decoration-underline">Bu altı çizili bir metin.</p>  
   
   

  Canlı Dene Kopyala

4. Liste Biçimlendirme

Bootstrap, sıralı ve sırasız listeleri düzenlemek için sınıflar sunar:

• Sırasız Liste: .list-unstyled sınıfı kullanılarak, varsayılan madde işaretlerini kaldırabilirsiniz.

  Örnek:

   
    <ul class="list-unstyled"> <li>Öğe 1</li> <li>Öğe 2</li> <li>Öğe 3</li> </ul>  
   
   

  Canlı Dene Kopyala

• Sıralı Liste: .list-inline sınıfı, liste öğelerini yatay olarak düzenler.

  Örnek:

   
    <ul class="list-inline"> <li class="list-inline-item">Öğe 1</li> <li class="list-inline-item">Öğe 2</li> <li class="list-inline-item">Öğe 3</li> </ul>  
   
   

  Canlı Dene Kopyala

5. Responsive Tipografi

Bootstrap, ekran boyutuna göre tipografiyi ayarlamanıza da olanak tanır. Örneğin, .display-* sınıfları ile büyük başlıklar oluşturabilirsiniz:

 
  <h1 class="display-1">Büyük Başlık</h1>  
 
 

Sonuç

Bootstrap, tipografi konusunda zengin bir özellik seti sunar. Metinlerinizi biçimlendirmek, düzenlemek ve daha estetik hale getirmek için bu sınıfları kullanarak içeriğinizi etkili bir şekilde sunabilirsiniz. Bootstrap’ın tipografi araçları, kullanıcı deneyimini artırır ve web sayfalarınızın profesyonel görünmesini sağlar.