Source

Текст

Тигезләнүне, төрүне, авырлыкны һәм башкаларны контрольдә тоту өчен гомуми текст ярдәмендә документлар һәм мисаллар.

Текстны тигезләү

Текстны тигезләү класслары булган компонентларга җиңел итеп күчерегез.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus amet fermentum утыра. Donec sed odio operae, eu vulputate felis rhoncus. Элеккеге коммуна. Афрос ситентис пиросында. Диэ сертификат күрсәткечендә Галлиа. Cras mattis iudicium purus 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>

Сул, уң һәм үзәк тигезләү өчен җаваплы класслар бар, алар челтәр системасы белән бер үк күренеш киңлеген кулланалар.

Барлык күренеш зурлыкларында сул тигезләнгән текст.

Viewзәк барлык күренеш үлчәмнәрендә тигезләнгән текст.

Барлык күренеш зурлыкларында дөрес тигезләнгән текст.

СМ (кечкенә) яки киңрәк күренешләрдә сул тигезләнгән текст.

МД (урта) яки киңрәк күренешләрдә сул тигезләнгән текст.

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-wrapТекстны класс белән урыгыз .

Бу текст төрергә тиеш. 
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Текстны .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.

Элеккеге коммуна.
Элеккеге коммуна. 
<!-- 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>

Сүз өзелү

.text-breakТекстның озын юлларын компонентларның макетын бозудан саклагыз overflow-wrap: break-word(һәм word-break: break-wordIE & Edge яраклашуы өчен).

мммммамммамммамммамммамммамммаммммаммммаммммамммамммммммммммммммммммммммммм

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

Текстны үзгәртү

Текстны капитализация класслары белән компонентларда үзгәртү.

Түбән текст.

Upperгары текст.

CapiTaliZed тексты.

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

Игътибар итегез .text-capitalize, һәр сүзнең беренче хәрефен ничек үзгәртә, бүтән хәрефләр очраксыз кала.

Шрифт авырлыгы һәм италика

Текстның авырлыгын (кыюлыгын) тиз үзгәртегез яки текстны итализацияләгез.

Калын текст.

Калын авырлык тексты (төп элементка карата).

Нормаль авырлык тексты.

Lightиңел авырлык тексты.

Ighterиңел авырлык тексты (төп элемент белән чагыштырганда).

Италия тексты.

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

Моноспос

Моноспос шрифты белән сайлау үзгәртегез .text-monospace.

Бу моносмоста

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

Төсне яңарту

Текстны яки сылтаманың төсен яңадан торгызыгыз, .text-resetул төсне ата-анасыннан мирас итеп алыр.

Яңарту сылтамасы белән текстны сүндерү .

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

Текст бизәлеше

.text-decoration-noneКласс белән текст бизәлешен алып ташлагыз .

Сызылмаган сылтама 
<a href="#" class="text-decoration-none">Non-underlined link</a>