Текст
Тигезләнүне, төрүне, авырлыкны һәм башкаларны контрольдә тоту өчен гомуми текст ярдәмендә документлар һәм мисаллар.
Текстны тигезләү
Текстны тигезләү класслары булган компонентларга җиңел итеп күчерегез.
Кайбер урынлы текст, нигезләнгән текст тигезләнешен күрсәтү өчен. Сез дә минем өчен шулай эшлисезме? Музыка белән очрашырга вакыт, мин инде сезнең музей түгел. Бу матур, ишет, судья бул, кызларым тавыш бирерләр. Мин эчемдә феникс тоя алам. Күк безнең мәхәббәтебездән көнләшә, фәрештәләр өстән елыйлар. Әйе, сез мине утопиягә алып барасыз.
<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-wrap
word-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>