Bootstrap Typography

Bootstrap 4 varsayılan olarak 16px font-size (1rem), 24px line-height (1.5) , "Helvetica Neue", Helvetica, Arial, sans-serif font-family değerlerini kullanıyor. Ayrıca <p> etiketleri için margin-top:0; ve margin-bottom:1rem (16px) değerlerini kullanmaktadır. 

Yani ek bir ayarlama yapmadan bootstrap.min.css dosyasını eklediğiniz her sayfada bu değerler etkin olacaktır.

** rem değeri html' den gelen 16px 'lik değeri kullanır.

** Rem ve em nedir ve hangi amaç için kullanılır bilmiyorsanız, tıklayınız.

Bootstrap 4 Başlık Etiketleri (Headings)

Boostrap heading etiketlerine tarayıcı varsayılanına göre daha güzel bir görünüm katmaktadır.

  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>

Örnek 1 için tıklayınız.

h1 => 2.5rem   (40px)

h2 => 2rem      (32px)

h3 => 1.75rem (28px)

h4 => 1.5rem   (24px)

h5 => 1.25rem (20px)

h6 => 1rem      (16px)

Bazen başlıkların yanında daha soluk bir yazı içeriği yani bir alt başlık oluşturmak isteyebiliriz.

<h3>
  Komple Uygulamalı Web Geliştirme
  <small class="text-muted">Html Css ve Javascript</small>
</h3>

Örnek 2 için tıklayınız.

** .text-muted class' ı daha soluk bir renk kodu uygular.

** !important buradaki css kodunun mutlaka etkin olması yani başka bir color 'ın bu css değerini ezmemesini garanti eder.

 .text-muted {
    color: #6c757d!important;
}

** <small> etiketi için 80% 'lik bir font-size uygulanır. Yani o anda <small> etiketi hangi etiket içindeyse o etikete uygulanan font-size değerinin %80' ini kullanmış olur. Yani <small> etiketinin <h1> etiketi içinde olmasıyla <h4> etiketinin içinde olması arasında bir farklılık vardır.

** Ayrıca <small> etiketi yerine .small class 'ınıda kullanabilirsiniz.

.small, small {
    font-size: 80%;
    font-weight: 400;
}

Bootstrap 4 Display Headings 

Bootstrap 4 ile gelen display class' ları headings etiketlerinden farklı olarak daha ince bir font kalınlığı ile daha büyük font büyüklüğü kullanmamıza imkan tanır.

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Örnek 3 için tıklayınız.

** Tüm bootstrap display sınıflarının <h1> etiketine class şeklinde uygulandığına dikkat ediniz. Bu sınıfları sadece <h> etiketleri için kullanmak zorunda da değiliz.

Bootstrap 4 Text Elements

<mark> 

Bootstrap 4 <mark> etiketi içine alınan yazıya sarı bir arka zemin rengi ekleyerek yazıya dikkat edilmesi gerektiğini belirtiyor.

<p>Use the mark element to <mark>highlight</mark> text.</p>

Örnek 4 için tıklayınız.

<Blockquotes>

Blockquotes etiketini bir paragraf içinde bir kısma dikkat çekmek için kullanırız. Örneğin makaleyi yazan kişi bir özet bilgi paylaşmak istediğinde <blockquotes> etiketi içine alabiliriz.

<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Örnek 5 için tıklayınız.

** <blockquote class="blockquote"> etiketine .blockquote sınıfından başka uygulayabileceğimiz .text-center, .text-right, .text-left sınıfları ile içeriği sırasıyla ortaya, sağa ve sola hizalayabiliriz.

Lists

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>  
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>    
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li> 
</ul>

Örnek 6 için tıklayınız.

** <ul> etiketine uygulayacağımız .list-unstyled sınıfı ile padding-left:0, list-style:none, margin-top:0 ve margin-bottom:1rem (16px) özelliklerini uygulayarak <ul> etiketi için kullandığımız rutin işleri bootstrap bizim adımıza yapmış olur.

Inline List Elements

Listelere uygulayacağımız bootstrap .list-inline ve .list-inline-item sınıfları ile liste elemanlarımıza uygulanan varsayılan liste eleman tipini list-style-type:none yapar ayrıca liste elemanlarını yan yana almış oluruz.

Örnek 7 için tıklayınız.

** Her bir liste elemanının display: inline-block; olarak değiştirildiğine dikkat ediniz.

Bootstrap Text Transform Elements

.text-lowercase : bootstrap .text-lowercase sınıfı ile tüm karakterleri küçük harfe çevirebiliriz.

.text-uppercase : bootstrap .text-uppercase sınıfı ile tüm karakterleri büyük harfe çevirebiliriz.

.text-capitalize : bootstrap .text-capitalize sınıfı ile tüm kelimelerin ilk harfini büyük harfe çevirebiliriz.

 <p class="text-uppercase"> Komple Uygulamalı Web Geliştirme </p>
 <p class="text-lowercase"> Komple Uygulamalı Web Geliştirme </p>
 <p class="text-capitalize">komple uygulamalı web geliştirme </p>

Örnek 8 için tıklayınız.

**  bootstrap .text-truncate sınıfı ile yazının sığmadığı yerlerde yazının sonuna "..." eklenmesini sağlayabilirsiniz.

 <p style="width:150px;" class="text-truncate"> Komple Uygulamalı Web Geliştirme Eğitimi </p>    
 <p style="width:200px;" class="text-truncate"> Komple Uygulamalı Web Geliştirme Eğitimi </p>  
 <p style="width:500px;" class="text-truncate"> Komple Uygulamalı Web Geliştirme Eğitimi </p> 

Örnek 9 için tıklayınız.