Bootstrap 4 Dersleri


4. Yazı Biçimlendirme / Tipografi

Bootstrap 4 Metin Varsayılan Değerleri

Varsayılan Yazıtipi (font-family) : Helvetica Neue, Helvetica, Arial ve sans-serif

Varsayılan Yazı Boyutu (font-size): 16px

Varsayılan Satır Yüksekliği (line-height): 1.5

<p> Etiketi Varsayılanları: margin-top:0 ve margin-bottom:1rem (Varsayılan 1rem = 16px)

Not: <small> etiketi mevcut yazı boyutunu % 80 yapar.

Bootstrap 4 Başlık Varsayılan Değerleri

Bootstrap 4, daha kalın yazı tipi ve artan yazı tipi boyutu ile HTML başlıklarına (<h1> ila <h6>) stil uygular:

Örnek:

<h1> Başlık (Yazı boyutu 2.5rem = 40px)

<h2> Başlık (Yazı boyutu 2rem = 32px)

<h3> Başlık (Yazı boyutu 1.75rem = 28px)

<h4> Başlık (Yazı boyutu 1.5rem = 24px)

<h5> Başlık (Yazı boyutu 1.25rem = 20px)
<h6> Başlık (Yazı boyutu 1rem = 16px)
<h1>&lt;h1&gt; Başlık <span style="font-size: 16px; color: #666">(Yazı boyutu 2.5rem = 40px)</span></h1>
<h2>&lt;h2&gt; Başlık <span style="font-size: 16px; color: #666">(Yazı boyutu 2rem = 32px)</span></h2>
<h3>&lt;h3&gt; Başlık <span style="font-size: 16px; color: #666">(Yazı boyutu 1.75rem = 28px)</span></h3>
<h4>&lt;h4&gt; Başlık <span style="font-size: 16px; color: #666">(Yazı boyutu 1.5rem = 24px)</span></h4>
<h5>&lt;h5&gt; Başlık <span style="font-size: 16px; color: #666">(Yazı boyutu 1.25rem = 20px)</span></h5>
<h6>&lt;h6&gt; Başlık <span style="font-size: 16px; color: #666">(Yazı boyutu 1rem = 16px)</span></h6>

Bootstrap 4 Ekran Başlık Sınıfı .display-* Varsayılan Değerleri

Ekran başlıkları, normal başlıklardan daha fazla öne çıkarmak için kullanılır (daha büyük yazı tipi boyutu ve daha hafif yazı tipi stili), aralarından seçim yapabileceğiniz dört sınıf vardır: .display-1, .display-2, .display-3, .display-4

Örnek:
Display 1 Başlık .display-1 (6rem = 96px)
Display 2 Başlık .display-2 (5.5rem = 88px)
Display 3 Başlık .display-3 (4.5rem = 72px)
Display 4 Başlık .display-4 (3.5rem = 56px)
<div class="display-1">Display 1 Başlık<div>
<div class="display-2">Display 2 Başlık</div>
<div class="display-3">Display 3 Başlık</div>
<div class="display-4">Display 4 Başlık</div>

<small> Etiketi

Bootstrap 4'te HTML <small> etiketi, herhangi bir başlıkta daha açık ve ikincil bir metin oluşturmak için kullanılır.

Örnek:

<h1> Başlık (İkincil yazı)

<h2> Başlık (İkincil yazı)

<h3> Başlık (İkincil yazı)

<h4> Başlık (İkincil yazı)

<h5> Başlık (İkincil yazı)
<h6> Başlık (İkincil yazı)
<h1> Başlık <small>(İkincil yazı)</small>
<h2> Başlık <small>(İkincil yazı)</small>
<h3> Başlık <small>(İkincil yazı)</small>
<h4> Başlık <small>(İkincil yazı)</small>
<h5> Başlık <small>(İkincil yazı)</small>
<h6> Başlık <small>(İkincil yazı)</small>

<mark> Etiketi

<mark> Etiketi, yazıya açık renk bir arka plan rengi uygular.

Örnek:

ASELSAN Dünyanın en iyi markası olabilir.

<p><mark>ASELSAN</mark> Dünyanın en iyi markası olabilir.</p>

<del> ve <s> Etiketleri

Örnek:

Bu ürünün fiyatı 100 TL değil sadece 99,90 TL

Bu ürünün fiyatı 100 TL değil sadece 99,99 TL

<p>Bu ürünün fiyatı <del>100 TL</del> değil sadece 99,90 TL</p>
<p>Bu ürünün fiyatı <s>100 TL</s> değil sadece 99,99 TL</p>

<ins> ve <u> Etiketleri

Örnek:

Ayrıntılar için tıklayın

Ayrıntılar için tıklayın

<p>Ayrıntılar için <ins>tıklayın</ins></p>
<p>Ayrıntılar için <u>tıklayın</u></p>

<em> ve <i> Etiketleri

Örnek:

İyi bir insan olmak zor değildir, zor olan iyi kalmaktır

İyi bir insan olmak zor değildir, zor olan iyi kalmaktır

<p>İyi bir insan olmak zor değildir, zor olan <em>iyi kalmak</em>tır</p>
<p>İyi bir insan olmak zor değildir, zor olan <i>iyi kalmak</i>tır</p>

<blockquote> Etiketi ve .blockquote, .blockquote-footer Sınıfları

Alıntılar tanımlamak için kullanılır. Bootstrap 4 <blockquote> etiketini daha etkili hale getirmiştir.

Örnek:
Hayatımız tercihlerimizden ibarettir.<blockquote> Etiketi
Hayatımız tercihlerimizden ibarettir. .blockquote Sınıfı
Şükrü Kaya .blockquote-footer Sınıfı

Not: .blockquote ve .blockquote-footer sınıfları, <blockquote> etiketi dışındaki etiketlerine de uygulanabilir.

<blockquote>Hayatımız tercihlerimizden ibarettir.</blockquote>
<blockquote class="blockquote">Hayatımız tercihlerimizden ibarettir. <code>.blockquote</code></blockquote>
<blockquote class="blockquote-footer">Şükrü Kaya <code>.blockquote-footer</code></blockquote>

<abbr> Etiketi

Örnek:

Kısaltma açıklaması eklemek için kullanılır.

İnternet sayfaları HTML işaret dili ile kodlanır.

<p>İnternet sayfaları <abbr title="HyperText Markup Language">HTML</abbr> işaret dili ile kodlanır.</p>

<code> Etiketi

Bilgisayar kodlarını tanımlamak için kullanılır.

Örnek:

HTML etiketlerinden <span>, <div>, <mark> ve <kbd>'nin Bootstrap 4 ile kullanımları ilginç gelebilir.

<p>HTML etiketlerinden <code>&lt;span&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;mark&gt;</code> ve <code>&lt;kbd&gt;</code>'nin Bootstrap 4 ile kullanımları ilginç gelebilir.</p>

<kbd> Etiketi

Yazı içinde bir klavye kısayolunu ön plana çıkarmak için kullanılır.

Örnek:

Dosyayı kaydetmek için Ctrl+S tuş bileşenini kullanabilirsiniz.

<p>Dosyayı kaydetmek için <kbd>Ctrl+S</kbd> tuş bileşenini kullanabilirsiniz.</p>

<pre> Etiketi

Bir kod bloğunun yazıldığı gibi (satır, boşluk, vb) görüntülenmesini sağlar.

Örnek:
for($i = 1; $i <= 10; $++){
    print "Uludağ Üniversitesi";
}
<pre>
for($i = 1; $i <= 10; $++){
 print "Uludağ Üniversitesi";
}
</pre>

.lead Sınıfı, ön plana çıkarır

Örnek:

Aşağıdaki 2 satır paragraftır.

Gelecek yazılımdadır. <p> Etiketi ile yazılmıştır.

Yazılım geliştirme özel ilgi ve uğraş ister. <p> Etiketi class="lead" sınıfı kullanılarak yazılmıştır.

<p>Gelecek yazılımdadır.</p>

<p class="lead">Yazılım geliştirme özel ilgi ve uğraş ister.</p>

<ul> Etiketi ile .list-inline sınıfı ve <li> etiketi ile .list-inline-item sınıfı kullanılarak hazır menü yapımı


Örnek:
<ul class="list-inline">
  <li class="list-inline-item"><a href="#">Anasayfa</a></li>
  <li class="list-inline-item"><a href="#">Hakkımızda</a></li>
  <li class="list-inline-item"><a href="#">Referanslar</a></li>
  <li class="list-inline-item"><a href="#">İletişim</a></li>
</ul>

Yazı Hizalama

.text-left, .text-*-left Sola hizalama (varsayılan hizalama sınıfları),
.text-center, .text-*-center Ortalanmış hizalama,
.text-right, .text-*-right Sağa hizalama,
.text-justify, .text-*-justify İki yana yaslanmış hizalama

* - sm, md, lg veya xl ekran ölçülerinden herhangi biri olabilir.

Örnek:

Hayatımız tercihlerimizden ibarettir. .text-left sınıfı kullanılmıştır.

Hayatımız tercihlerimizden ibarettir. .text-md-center sınıfı kullanılmıştır.

Hayatımız tercihlerimizden ibarettir. .text-xl-right sınıfı kullanılmıştır.

Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. .text-justify

<div class="border border-primary mt-3">
  <p class="text-left">Hayatımız tercihlerimizden ibarettir.</p>
  <p class="text-md-center">Hayatımız tercihlerimizden ibarettir.</p>
  <p class="text-xl-right">Hayatımız tercihlerimizden ibarettir.</p>
  <p class="text-justify">Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir. Hayatımız tercihlerimizden ibarettir.</p>
</div>

BÜYÜK/küçük Harf Dönüştürme

.text-uppercase, .text-capitalize, .text-lowercase Sınıfları

Örnek:

Hayatımız tercihlerimizden ibarettir. Yalın <p> Etiketi

Hayatımız tercihlerimizden ibarettir. .text-uppercase sınıfı kullanılmıştır

Hayatımız tercihlerimizden ibarettir. .text-capitalizer sınıfı kullanılmıştır

Hayatımız tercihlerimizden ibarettir. .text-lowercase sınıfı kullanılmıştır

<p class="text-uppercase">Hayatımız tercihlerimizden ibarettir.</p>
<p class="text-capitalize">Hayatımız tercihlerimizden ibarettir.</p>
<p class="text-lowercase">Hayatımız tercihlerimizden ibarettir.</p>

Yazı kalınlık stilleri

.font-weight-bold, .font-weight-bolder, .font-italic, .font-weight-light, .font-weight-lighter, .font-weight-normal, .small Sınıfları

Örnek:

Güzel insanlar biriktirin hayatınızda! .font-weight-bold

Bencil olmayan, kırmayan, özür dilemesini bilen. .font-weight-bolder

Hoşgörülü insanlar alın hayatınıza! .font-italic

Sizi olduğunuz gibi kabul eden. .font-weight-light

İyi dostlar biriktirin! .font-weight-lighter

Aramızda kalsın demeye gerek olmayan. .font-weight-normal

Ömre ömür katan insanları tutun yanınızda! .small

<p class="font-weight-bold">Güzel insanlar biriktirin hayatınızda!</p>
<p class="font-weight-bolder">Bencil olmayan, kırmayan, özür dilemesini bilen.</p>
<p class="font-italic">Hoşgörülü insanlar alın hayatınıza!</p>
<p class="font-weight-light">Sizi olduğunuz gibi kabul eden.</p>
<p class="font-weight-lighter">İyi dostlar biriktirin!</p>
<p class="font-weight-normal">Aramızda kalsın demeye gerek olmayan.</p>
<p class="small">Ömre ömür katan insanları tutun yanınızda!</p>