Tekst

Dokumentatsioon ja näited tavapäraste tekstiutiliitide jaoks, et juhtida joondamist, mähkimist, kaalu ja palju muud.

Teksti joondamine

Joondage tekst hõlpsalt komponentideks teksti joondusklasside abil.

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

Vasakule, paremale ja keskele joondamiseks on saadaval reageerivad klassid, mis kasutavad samu vaateava laiuse katkestuspunkte kui ruudustikusüsteem.

Vasakule joondatud tekst kõigis vaateava suurustes.

Keskele joondatud tekst kõigis vaateava suurustes.

Paremale joondatud tekst kõigis vaateava suurustes.

Vasakule joondatud tekst vaateavadel, mille suurus on SM (väike) või laiem.

Vasakule joondatud tekst vaateavadel, mille suurus on MD (keskmine) või laiem.

Vasakule joondatud tekst LG (suur) või laiemate vaateavade puhul.

Vasakule joondatud tekst XL (eriti suur) või laiemates vaateavades.

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

Teksti murdmine ja ületäitumine

Teksti murdmine .text-wrapklassiga.

See tekst peaks katkema.

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

.text-nowrapVältige klassiga teksti murdmist .

See tekst peaks üle vanema.

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

Pikema sisu jaoks saate lisada .text-truncateklassi, mis kärbib teksti ellipsiga. Nõuab display: inline-blockvõi 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>

Sõna murd

Vältige pikkadel tekstistringidel teie komponentide paigutust rikkumast, kasutades klahvi .text-breakset overflow-wrap: break-word(ja word-break: break-wordIE ja Edge'i ühilduvuse jaoks).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Teksti teisendus

Teisendage tekst komponentideks teksti suurtähtede kasutamise klassidega.

Väiketähtedega tekst.

Suurtähtedega tekst.

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

Pange tähele, kuidas .text-capitalizemuudab ainult iga sõna esimest tähte, jättes muude tähtede suur- ja väiketähtede muutmata.

Fondi kaal ja kaldkiri

Muutke kiiresti teksti kaalu (paksust) või muutke tekst kaldkirja.

Paks tekst.

Paksem kaal tekst (võrreldes põhielemendiga).

Normaalse kaaluga tekst.

Kerge tekst.

Kergema kaaluga tekst (suhtes põhielemendiga).

Kaldkiri.

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

Monoruum

Muutke valik meie monospace'i fondivirnaks, kasutades .text-monospace.

See on monoruumis

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

Lähtesta värv

Lähtestage teksti või lingi värv nupuga .text-reset, nii et see pärib värvi oma emalt.

Vaigistatud tekst lähtestamislingiga .

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

Teksti kaunistamine

.text-decoration-noneEemaldage klassiga tekstikaunistus .

Allajoonimata link

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