Source

Teksti

Dokumentacioni dhe shembuj për mjetet e zakonshme të tekstit për të kontrolluar shtrirjen, mbështjelljen, peshën dhe më shumë.

Rreshtimi i tekstit

Rivendosni lehtësisht tekstin me komponentët me klasa të shtrirjes së tekstit.

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. Në 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>

Për shtrirjen majtas, djathtas dhe qendrës, ofrohen klasa të përgjegjshme që përdorin të njëjtat pika të gjerësisë së pamjes si sistemi i rrjetit.

Teksti i rreshtuar majtas në të gjitha madhësitë e portave të pamjes.

Teksti i përafruar në qendër në të gjitha madhësitë e portave të pamjes.

Teksti i rreshtuar djathtas në të gjitha madhësitë e portave të pamjes.

Teksti i rreshtuar majtas në portat e pamjes me madhësi SM (të vogla) ose më të gjera.

Teksti i rreshtuar majtas në portat e pamjes me madhësi MD (mesatare) ose më të gjerë.

Teksti i rreshtuar majtas në portat e shikimit me madhësi LG (i madh) ose më i gjerë.

Teksti i rreshtuar majtas në portat e pamjes me madhësi XL (ekstra i madh) ose më i gjerë.

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

Mbështjellja dhe tejmbushja e tekstit

Mbështillni tekstin me një .text-wrapklasë.

Ky tekst duhet të përfundojë.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Parandaloni mbështjelljen e tekstit me një .text-nowrapklasë.

Ky tekst duhet të vërshojë prindin.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Për përmbajtje më të gjatë, mund të shtoni një .text-truncateklasë për të shkurtuar tekstin me një elipsë. Kërkon display: inline-blockose display: block.

Praeterea iter est quasdam res quas ex communi.
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>

Thyerja e fjalëve

Parandaloni vargjet e gjata të tekstit që të prishin paraqitjen e komponentëve tuaj duke përdorur .text-breakpër të vendosur overflow-wrap: break-word(dhe word-break: break-wordpër pajtueshmërinë me IE & Edge).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Transformimi i tekstit

Transformoni tekstin në komponentë me klasa të shkronjave të mëdha të tekstit.

Tekst me shkronja të vogla.

Teksti me shkronja të mëdha.

Teksti me shkronja kapitale.

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

Vini re se si .text-capitalizendryshon vetëm shkronjën e parë të secilës fjalë, duke lënë të paprekur rastin e shkronjave të tjera.

Pesha e shkronjave dhe shkronjat e pjerrëta

Ndryshoni shpejt peshën (guxim) të tekstit ose bëni pjerrësi të tekstit.

Tekst i trashë.

Teksti me peshë më të theksuar (në lidhje me elementin mëmë).

Teksti me peshë normale.

Tekst me peshë të lehtë.

Tekst me peshë më të lehtë (në raport me elementin prind).

Teksti kursive.

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

Monohapësirë

Ndryshoni një përzgjedhje në grumbullin tonë të shkronjave monospace me .text-monospace.

Kjo është në monospace

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

Rivendos ngjyrën

Rivendosni ngjyrën e një teksti ose lidhjeje me .text-reset, në mënyrë që të trashëgojë ngjyrën nga prindi i tij.

Teksti i heshtur me një lidhje të rivendosur .

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

Dekorimi i tekstit

Hiqni një dekorim teksti me një .text-decoration-noneklasë.

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