Source

Metin

Hizalama, sarma, ağırlık ve daha fazlasını denetlemek için yaygın metin yardımcı programlarına ilişkin belgeler ve örnekler.

Metin hizalama

Metin hizalama sınıflarıyla metni bileşenlere kolayca yeniden hizalayın.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Önem arz eden bir durum. Nos hinc posthac'ta, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

Sola, sağa ve merkeze hizalama için, ızgara sistemiyle aynı görünüm alanı genişliği kesme noktalarını kullanan duyarlı sınıflar mevcuttur.

Tüm görüntü alanı boyutlarında sola hizalanmış metin.

Tüm görüntü alanı boyutlarında ortalanmış metin.

Tüm görüntü alanı boyutlarında sağa hizalanmış metin.

SM (küçük) veya daha geniş görünüm alanlarında sola hizalanmış metin.

MD (orta) veya daha geniş görünüm alanlarında sola hizalanmış metin.

LG (büyük) veya daha geniş görünüm pencerelerinde sola hizalanmış metin.

XL (ekstra büyük) veya daha geniş görünüm alanlarında sola hizalanmış metin.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Metin kaydırma ve taşma

Metnin bir .text-nowrapsınıfla sarılmasını önleyin.

Bu metin ebeveyni taşmalıdır.
<div class="text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</div>

.text-truncateDaha uzun içerik için, metni üç nokta ile kısaltmak için bir sınıf ekleyebilirsiniz . veya gerektirir .display: inline-blockdisplay: block

Önem arz eden bir durum.
Önem arz eden bir durum.
<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

Metin dönüştürme

Metin büyük harf sınıfları ile bileşenlerdeki metni dönüştürün.

Küçük harfli metin.

Büyük harfli metin.

CapiTaliZed metin.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

text-capitalizeHer kelimenin sadece ilk harfinin nasıl değiştirildiğini ve diğer harflerin etkilenmediğini unutmayın.

Yazı tipi ağırlığı ve italik

Metnin ağırlığını (kalınlığını) hızla değiştirin veya metni italik yapın.

Kalın yazı.

Normal ağırlık metni.

Hafif metin.

İtalik metin.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>