Bootstrap Tipografi Kullanımı

Başlıklar

Html elementlerinden olan H1, H2, H3, H4, H5 ve H6 başlık elementleri için bootstrapda default olarak ayarlı gelen font ölçüleri ile başlık elementlerini kullanabilirsiniz.

<h1>h1. Bootstrap başlık</h1>
<h2>h2. Bootstrap başlık</h2>
<h3>h3. Bootstrap başlık</h3>
<h4>h4. Bootstrap başlık</h4>
<h5>h5. Bootstrap başlık</h5>
<h6>h6. Bootstrap başlık</h6>

Ek olarak başlık sınıflarını p elementinde de kullanabilirsiniz.

<p class="h1">h1. Bootstrap başlık</p>
<p class="h2">h2. Bootstrap başlık</p>
<p class="h3">h3. Bootstrap başlık</p>
<p class="h4">h4. Bootstrap başlık</p>
<p class="h5">h5. Bootstrap başlık</p>
<p class="h6">h6. Bootstrap başlık</p>

Başlık ve Alt başlık olarak kullanmak isterseniz. Aşağıdaki örnekte olduğu gibi ana başlık içinde small elementini kullanabilirsiniz.

Ayrıca small elementi ile bootstrap ile gelen text-danger, text-muted gibi farklı yazı renkleri içeren sınıflarıda kullanabilirsiniz.

<h1>h1. Bootstrap başlık <small>Alt Başlık</small></h1>
<h2>h2. Bootstrap başlık <small>Alt Başlık</small></h2>
<h3>h3. Bootstrap başlık <small>Alt Başlık</small></h3>
<h4>h4. Bootstrap başlık <small>Alt Başlık</small></h4>
<h5>h5. Bootstrap başlık <small>Alt Başlık</small></h5>
<h6>h6. Bootstrap başlık <small>Alt Başlık</small></h6>

<h3>h3. Bootstrap başlık <small class="text-muted">Alt Başlık</small></h3>
<h3>h3. Bootstrap başlık <small class="text-danger">Alt Başlık</small></h3>
<h3>h3. Bootstrap başlık <small class="text-warning">Alt Başlık</small></h3>
<h3>h3. Bootstrap başlık <small class="text-primary">Alt Başlık</small></h3>
<h3>h3. Bootstrap başlık <small class="text-info">Alt Başlık</small></h3>

Ekran Başlıkları

Üst tarafta anlatmış olduğum h1 başlıklarından biraz daha farklı olan ve daha büyük görünme sahip olan display başlıklarını kullanabilirsiniz.

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

Paragrafları Öne Çıkarın

.lead sınıfını kullanarak standart paragraflarınızdan daha büyük bir paragraf yazısı elde edebilirsiniz.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia.</p>

Satır içi metin öğeleri

Satır içi HTML5 elementleri içinde bootstrapda hazırlanmış stiller bulunmaktadır.

mark elementi – Bir kelimeyi veya bir kaç kelimeyi vurgulamak için mark elementini kullanabilirsiniz.
del elementi – Bir satır veya paragrafta üstü çizili yazı yazmak için del elementini kullanabilirsiniz.
s elementi – Bir satır veya paragrafta üstü çizili yazı yazmak için s elementini kullanabilirsiniz.
ins elementi – Bir satır veya paragrafta altı çizili yazı yazmak için ins elementini kullanabilirsiniz.
u elementi – Bir satır veya paragrafta altı çizili yazı yazmak için u elementini kullanabilirsiniz.
small elementi – Bir satır veya paragrafta yazılan yazıdan daha küçük bir ölçüde kelime veya kelimeler eklemeniz için small etiketi kullanabilirsiniz.
strong elementi – Bir satır veya paragrafta vurgulamak istediğiniz metin veya kelimeyi strong elementi ile kalın yazı haline getirebilirsiniz.
em elementi – Yazılarınızda italik yazı yazmak isterseniz em elementini kullanabilirsiniz.

<p>Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit.</p>
<p><del>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </del></p>
<p><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </s></p>
<p><ins>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ins></p>
<p><u>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </u></p>
<p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </small></p>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong></p>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </em></p>

 

Alıntı – Blockquote Elementi

Yazılarınızda bir alıntı yaptığınızda kullanabileceğiniz Blockquote elementini tercih edebilirsiniz.
Blockquote ile ilgili farklı kullanımları aşağıdaki örneklerde görebilirsiniz.

<blockquote class="blockquote">
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

 

<blockquote class="blockquote">
   <p class="mb-0">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>

Hizalama

Yazılarınızı sağa dayalı veya sola dayalı yada ortalanmış yapmanız için aşağıdaki sınıfları kullanabilirsiniz.

– .text-left [Yazıyı sola hizala]
– .text-center [Yazıyı ortala]
– .text-right [Yazıyı sağa hizala]

 

<div class="text-left">
   <h2>.text-left</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia.</p>
</div>
<hr>
<div class="text-center">
   <h2>.text-center</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia.</p>
</div>
<hr>
<div class="text-right">
   <h2>.text-right</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem ex, maximus nec fermentum sit amet, aliquam ac dui. Aliquam vitae nisi sapien. Cras consectetur et elit at viverra. Quisque ac justo blandit, vestibulum enim quis, varius est. Proin sed nisi nisi. Morbi mollis tellus elit. Etiam eleifend convallis metus vel lacinia.</p>
</div>

Listeleme

Listeler oluşturabileceğiniz alt öğeler ekleyebileceğiniz listeleme örneklerini aşağıda görebilirsiniz.

– .list-unstyled [Listelemede default olarak gelen ayarları sıfırlar]

– .list-inline [Listeleme olarak girilen bilgileri yan yana yazar]

 

<h2>.list-unstyled</h2>
   <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
         <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
         </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
   </ul>