Текст
Документтер жана мисалдар тегиздөө, таңуу, салмак жана башкаларды көзөмөлдөө үчүн жалпы тексттик утилиталар үчүн.
Текстти тегиздөө
Текстти тегиздөө класстары менен компоненттерге текстти оңой кайра тегиздөө.
Тексттин негиздүү тегиздөөсүн көрсөтүү үчүн кээ бир толтуруучу текст. Мен үчүн да ошондой кыласыңбы? Мен мындан ары сенин музасы эмесмин музыка менен беттешүүгө убакыт келди. Сонун экенин уктум, сот болуңуз, кыздарым добуш берет. Ичимде Феникс бар экенин сезем. Асман биздин сүйүүбүздү кызганат, периштелер бийиктен ыйлап жатат. Ооба, сен мени утопияга алып барасың.
<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>Солго, оңго жана борборго тегиздөө үчүн, тор системасы сыяктуу эле көрүү терезесинин кеңдигинин үзүлүү чекиттерин колдонгон жооп берүүчү класстар бар.
Бардык көрүү терезесинин өлчөмдөрүндө солго тегизделген текст.
Бардык көрүү терезесинин өлчөмдөрүндө ортого тегизделген текст.
Оңго тегизделген текстти көрүү терезесинин бардык өлчөмдөрүндө.
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-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
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Текстти трансформациялоо
Текстти баш тамгалар класстары менен компоненттерге которуу.
Кичирейтилген текст.
Чоң тамгалар менен жазылган текст.
Капитализацияланган текст.
<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-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>