in English

Текст

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

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

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

Кайбер урынлы текст, нигезләнгән текст тигезләнешен күрсәтү өчен. Сез дә минем өчен шулай эшлисезме? Музыка белән очрашырга вакыт, мин инде сезнең музей түгел. Бу матур, ишет, судья бул, кызларым тавыш бирерләр. Мин эчемдә феникс тоя алам. Күк безнең мәхәббәтебездән көнләшә, фәрештәләр өстән елыйлар. Әйе, сез мине утопиягә алып барасыз.

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

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

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

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Текстның озын юлларын компонентларның макетын бозудан саклагыз word-wrap: break-wordһәм word-break: break-word. Без киңрәк браузер ярдәме өчен киң word-wrapтаралган урынга кулланабыз, һәм флекс контейнерлар белән проблемалардан саклану өчен искергәннәрне өстибез.overflow-wrapword-break: break-word

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

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