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.

Tam tikras rezervuotos vietos tekstas, kad būtų parodytas pagrįstas teksto lygiavimas. Ar padarysi tą patį man? Atėjo laikas susidurti su muzika, aš nebe tavo mūza. Girdėjau, kad tai gražu, būk teisėjas ir mano merginos balsuos. Jaučiu savyje feniksą. Dangus pavydi mūsų meilės, angelai verkia iš viršaus. Taip, tu nuvesi mane į utopiją.

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

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-breaknustatymą word-wrap: break-wordir word-break: break-word. Naudojame word-wrapvietoj įprastesnio, overflow-wrapkad palaikytume naršyklę, ir pridedame nebenaudojamą word-break: break-word, kad išvengtume problemų su lanksčiais konteineriais.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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