Text
Dokumentasyon ug mga pananglitan alang sa komon nga mga gamit sa teksto aron makontrol ang paglinya, pagputos, gibug-aton, ug uban pa.
Pag-align sa teksto
Dali nga i-realign ang teksto sa mga sangkap nga adunay mga klase sa pag-align sa teksto.
Ang ubang mga placeholder nga teksto aron ipakita ang makatarunganon nga pag-align sa teksto. Buhaton ba nimo ang sama kanako? Panahon na aron atubangon ang musika nga dili na ako ang imong muse. Nakadungog nga kini matahum, mahimong maghuhukom ug ang akong mga babaye magboto. Naa koy gibati nga phoenix sa sulod nako. Ang langit nasina sa atong gugma, ang mga anghel naghilak gikan sa itaas. Oo, gidala ko nimo sa utopia.
<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>
Para sa wala, tuo, ug center alignment, ang mga responsive nga klase anaa nga naggamit sa samang viewport width breakpoints sama sa grid system.
Wala naka-align nga teksto sa tanang gidak-on sa viewport.
Gi-align sa tunga nga teksto sa tanang gidak-on sa viewport.
Na-align sa tuo nga teksto sa tanang gidak-on sa viewport.
Nakalinya sa wala nga teksto sa mga viewport nga gidak-on SM (gamay) o mas lapad.
Nakalinya sa wala nga teksto sa mga viewport nga may gidak-on nga MD (medium) o mas lapad.
Wala naka-align nga teksto sa mga viewport nga gidak-on sa LG (dako) o mas lapad.
Nakalinya sa wala nga teksto sa mga viewport nga gidak-on XL (sobra-dako) o mas lapad.
<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>
Pagputos ug pag-awas sa teksto
I-wrap ang teksto sa usa ka .text-wrap
klase.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Pugngi ang teksto gikan sa pagputos sa usa ka .text-nowrap
klase.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Alang sa mas taas nga sulud, mahimo nimong idugang ang usa ka .text-truncate
klase aron maputol ang teksto gamit ang usa ka ellipsis. Nagkinahanglan display: inline-block
o 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>
Pagputol sa pulong
Pugngi ang tag-as nga mga kuwerdas sa teksto nga maguba ang layout sa imong mga sangkap pinaagi sa paggamit .text-break
sa pag-set word-wrap: break-word
ug word-break: break-word
. Gigamit namo word-wrap
imbes ang mas komon overflow-wrap
alang sa mas lapad nga suporta sa browser, ug gidugang ang wala na gigamit word-break: break-word
aron malikayan ang mga isyu sa mga flex container.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Pagbag-o sa teksto
Pagbag-o sa teksto sa mga sangkap nga adunay mga klase sa pag-capital sa teksto.
Gigamay nga teksto.
Uppercase nga teksto.
CapiTaliZed nga teksto.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Matikdi kung giunsa .text-capitalize
pag-usab ang una nga letra sa matag pulong, nga dili maapektuhan ang kaso sa bisan unsang ubang mga letra.
Ang gibug-aton sa font ug italiko
Dali nga usba ang gibug-aton (kabaskog) sa teksto o i-italicize ang teksto.
Bold nga text.
Mas maisogon nga gibug-aton nga teksto (may kalabotan sa elemento sa ginikanan).
Normal nga gibug-aton nga teksto.
Gaan ang gibug-aton nga teksto.
Mas gaan nga gibug-aton nga teksto (may kalabotan sa elemento sa ginikanan).
Italic nga teksto.
<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
Usba ang usa ka pagpili sa among monospace font stack gamit ang .text-monospace
.
Kini anaa sa monospace
<p class="text-monospace">This is in monospace</p>
I-reset ang kolor
I-reset ang usa ka teksto o kolor sa link gamit ang .text-reset
, aron kini makapanunod sa kolor gikan sa ginikanan niini.
Gipahilom nga teksto nga adunay link sa pag-reset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Dekorasyon sa teksto
Kuhaa ang dekorasyon nga teksto nga adunay .text-decoration-none
klase.
<a href="#" class="text-decoration-none">Non-underlined link</a>