Source

Տեքստ

Փաստաթղթեր և օրինակներ ընդհանուր տեքստային օգտակար ծրագրերի համար՝ վերահսկելու հավասարեցումը, փաթաթումը, քաշը և այլն:

Տեքստի հավասարեցում

Հեշտությամբ վերադասավորեք տեքստը բաղադրիչներին տեքստի հավասարեցման դասերով:

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 bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Ավելի երկար բովանդակության համար կարող եք .text-truncateդաս ավելացնել տեքստը էլիպսով կտրելու համար: Պահանջում է display: inline-blockկամ 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>

Տեքստի փոխակերպում

Փոխակերպել տեքստը բաղադրիչներով տեքստի մեծատառերի դասերով:

Փոքրատառ տեքստ.

Մեծատառ տեքստ.

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>

Մոնոտիեզերք

Փոխեք ընտրությունը մեր մոնոսփեյս տառատեսակների կույտի հետ .text-monospace:

Սա մոնոսփեյսում է

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