Teks

Dokumentasie en voorbeelde vir algemene tekshulpmiddels om belyning, omvou, gewig en meer te beheer.

Teksbelyning

Herbelyn teks maklik na komponente met teksbelyningsklasse.

Sommige plekhouerteks om geregverdigde teksbelyning te demonstreer. Sal jy dieselfde vir my doen? Dit is tyd om die musiek in die oë te kyk Ek is nie meer jou muse nie. Het gehoor dis pragtig, wees die regter en my meisies gaan stem. Ek kan 'n feniks in my binneste voel. Die hemel is jaloers op ons liefde, engele huil van bo af. Ja, jy neem my na utopia.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

Vir links-, regs- en middelbelyning is responsiewe klasse beskikbaar wat dieselfde kykpoortwydte-breekpunte as die roosterstelsel gebruik.

Linksbelynde teks op alle kykportgroottes.

Sentreer-belynde teks op alle viewport-groottes.

Regsbelynde teks op alle viewport-groottes.

Linksbelynde teks op kykpoorte met die grootte SM (klein) of wyer.

Links-belynde teks op kykpoorte met 'n grootte MD (medium) of wyer.

Linksbelynde teks op kykpoorte van LG (groot) of breër.

Linksbelynde teks op uitsigpoorte van grootte XL (ekstra groot) of wyer.

<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>

Teks omvou en oorloop

Vou teks toe met 'n .text-wrapklas.

Hierdie teks moet omvou.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Verhoed dat teks met 'n .text-nowrapklas toevou.

Hierdie teks moet die ouer oorloop.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Vir langer inhoud, kan jy 'n .text-truncateklas byvoeg om die teks met 'n ellips af te kap. Vereis display: inline-blockof display: block.

Praeterea iter est quasdam res quas ex communi.

<!-- 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>

Woordbreek

Verhoed dat lang stringe teks jou komponente se uitleg breek deur te gebruik .text-breakom te stel word-wrap: break-worden word-break: break-word. Ons gebruik word-wrapin plaas van die meer algemeen overflow-wrapvir breër blaaierondersteuning, en voeg die afgekeurde word-break: break-wordby om probleme met buigsame houers te vermy.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Teks transformasie

Transformeer teks in komponente met tekshoofletterklasse.

Teks met klein letters.

Teks met hoofletters.

Gekapitaliseerde teks.

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

Let op hoe .text-capitalizenet die eerste letter van elke woord verander, wat die hoofletters van enige ander letters onaangeraak laat.

Lettertipe gewig en kursief

Verander vinnig die gewig (vetheid) van teks of kursief teks.

Vet teks.

Helder gewig teks (relatief tot die ouer element).

Normale gewig teks.

Ligte gewig teks.

Ligter gewig teks (relatief tot die ouer element).

Kursief teks.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

Monoruimte

Verander 'n keuse na ons monospace font stapel met .text-monospace.

Dit is in monospace

<p class="text-monospace">This is in monospace</p>

Stel kleur terug

Stel 'n teks of skakel se kleur terug met .text-reset, sodat dit die kleur van sy ouer erf.

Gedempte teks met 'n terugstelskakel .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Teksversiering

Verwyder 'n teksversiering met 'n .text-decoration-noneklas.

Nie-onderstreepte skakel

<a href="#" class="text-decoration-none">Non-underlined link</a>