Tekstas

Įprastų teksto paslaugų, skirtų lygiavimui, vyniojimui, svoriui ir kt. valdyti, dokumentacija ir pavyzdžiai.

Teksto lygiavimas

Lengvai suderinkite tekstą su komponentais naudodami teksto lygiavimo klases.

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>

Lygiavimui kairėje, dešinėje ir centre galimos reaguojančios klasės, kuriose naudojami tie patys peržiūros srities pločio taškai, kaip ir tinklelio sistemoje.

Tekstas sulygiuotas kairėje visų dydžių peržiūros srityje.

Visų dydžių peržiūros srities tekstas sulygiuotas centre.

Dešinėje sulygiuotas tekstas visų dydžių peržiūros srityje.

Kairėje sulygiuotas tekstas peržiūros srityse, kurių dydis yra SM (mažas) arba didesnis.

Kairėje sulygiuotas tekstas MD (vidutinio) arba platesnėse peržiūros srityse.

Kairėje sulygiuotas tekstas LG (didelės) arba platesnėse peržiūros srityse.

Kairėje sulygiuotas tekstas XL (ypač didelės) arba platesnėse peržiūros srityse.

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

Teksto vyniojimas ir perpildymas

Apvyniokite tekstą .text-wrapklase.

Šis tekstas turėtų būti apvyniotas.

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

Neleiskite tekstui įvynioti naudojant .text-nowrapklasę.

Šis tekstas turėtų perpildyti tėvą.

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

Jei norite ilgesnio turinio, galite pridėti .text-truncateklasę, kad tekstas būtų sutrumpintas elipsės ženklu. Reikia display: inline-blockarba 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>

Žodžių pertrauka

Neleiskite ilgoms teksto eilutėms pažeisti jūsų komponentų išdėstymą, naudodami .text-breakto set overflow-wrap: break-word(ir word-break: break-wordsuderinamumui su IE ir Edge).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Teksto transformacija

Transformuokite tekstą į komponentus naudodami didžiųjų raidžių rašymo klases.

Tekstas mažosiomis raidėmis.

Tekstas didžiosiomis raidėmis.

Didžiosiomis raidėmis rašomas tekstas.

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

Atkreipkite dėmesį, kaip .text-capitalizepakeičiama tik pirmoji kiekvieno žodžio raidė, o kitų raidžių didžiosios ir mažosios raidės nepaveikiamos.

Šrifto svoris ir kursyvas

Greitai pakeiskite teksto svorį (paryškinimą) arba kursyvą.

Paryškintas tekstas.

Paryškintas tekstas (palyginti su pirminiu elementu).

Normalaus svorio tekstas.

Lengvas tekstas.

Lengvesnis tekstas (palyginti su pirminiu elementu).

Kursyvas tekstas.

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

Monospace

Pakeiskite pasirinkimą į mūsų monospace šriftų krūvą naudodami .text-monospace.

Tai yra monoerdvėje

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

Iš naujo nustatyti spalvą

Iš naujo nustatykite teksto arba nuorodos spalvą naudodami .text-reset, kad ji paveldėtų spalvą iš pirminės.

Nutildytas tekstas su nuoroda iš naujo .

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

Teksto dekoravimas

Pašalinkite teksto dekoraciją su .text-decoration-noneklase.

Nepabraukta nuoroda

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