Տեքստ
Փաստաթղթեր և օրինակներ ընդհանուր տեքստային օգտակար ծրագրերի համար՝ վերահսկելու հավասարեցումը, փաթաթումը, քաշը և այլն:
Հեշտությամբ վերադասավորեք տեքստը բաղադրիչներին տեքստի հավասարեցման դասերով:
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. Հետևյալ ժամանակաշրջանում, 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>
Ձախ, աջ և կենտրոնական հավասարեցման համար հասանելի են արձագանքող դասեր, որոնք օգտագործում են նույն տեսադաշտի լայնության բեկման կետերը, ինչ ցանցային համակարգը:
Ձախից հավասարեցված տեքստ բոլոր տեսադաշտերի չափերի վրա:
Կենտրոնում հավասարեցված տեքստ բոլոր տեսադաշտերի չափերի վրա:
Աջ հավասարեցված տեքստ բոլոր տեսադաշտերի չափերի վրա:
Ձախ հավասարեցված տեքստը SM (փոքր) կամ ավելի լայնությամբ դիտակետերի վրա:
Ձախ հավասարեցված տեքստ MD (միջին) կամ ավելի լայն տեսադաշտերի վրա:
Ձախ հավասարեցված տեքստ LG (մեծ) կամ ավելի լայն տեսադաշտերի վրա:
Ձախ հավասարեցված տեքստ XL չափի (չափազանց մեծ) կամ ավելի լայն տեսադաշտերի վրա:
<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>
Կանխել տեքստի փաթեթավորումը .text-nowrap
դասի հետ:
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>
Ավելի երկար բովանդակության համար կարող եք .text-truncate
դաս ավելացնել տեքստը էլիպսով կտրելու համար: Պահանջում է display: inline-block
կամ 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>
Փոխակերպեք տեքստը բաղադրիչներով տեքստի մեծատառերի դասերով:
Փոքրատառ տեքստ.
Մեծատառ տեքստ.
CapiTaliZed տեքստ:
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Ուշադրություն դարձրեք, թե ինչպես text-capitalize
է փոխվում յուրաքանչյուր բառի միայն առաջին տառը՝ թողնելով անփոփոխ մնացած տառերի տառերը:
Արագ փոխեք տեքստի քաշը (համարձակությունը) կամ շեղեք տեքստը:
Հաստ տեքստ.
Նորմալ քաշի տեքստ.
Թեթև քաշի տեքստ:
Շեղ տեքստ.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>