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.
Disa tekste mbajtëse vendesh për të demonstruar shtrirjen e justifikuar të tekstit. A do të bëni të njëjtën gjë për mua? Është koha për t'u përballur me muzikën nuk jam më muza juaj. Dëgjova se është bukur, bëhu gjyqtari dhe vajzat e mia do të votojnë. Mund të ndjej një feniks brenda meje. Qielli është xheloz për dashurinë tonë, engjëjt po qajnë nga lart. Po, ju më çoni në utopi.
<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>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ë.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Parandaloni mbështjelljen e tekstit me një .text-nowrapklasë.
<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.
<!-- 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 nga prishja e paraqitjes së komponentëve tuaj duke përdorur .text-breakpër të vendosur word-wrap: break-worddhe word-break: break-word. Ne përdorim word-wrapnë vend të më të zakonshmeve overflow-wrappër mbështetje më të gjerë të shfletuesit dhe shtojmë të vjetruarat word-break: break-wordpër të shmangur problemet me kontejnerët flex.
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>