Текст
Зэрэгцүүлэх, боох, жин гэх мэтийг хянах нийтлэг текст хэрэгслийн баримт бичиг, жишээнүүд.
Текстийн зэрэгцүүлэх
Текстийг зэрэгцүүлэх анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хялбархан тохируулаарай.
Зөвшөөрөгдсөн текстийн зэрэгцүүлэлтийг харуулах зарим орлуулагч текст. Та ч бас миний төлөө хийх үү? Би чиний сүнс байхаа больсон хөгжимтэй нүүр тулах цаг болжээ. Сайхан байна гэж сонссон шүү, охид маань саналаа өгнө. Би дотроо галт шувууг мэдэрч байна. Тэнгэр бидний хайранд атаархаж, тэнгэр элч нар дээрээс уйлж байна. Тийм ээ, чи намайг утопи руу аваачна.
<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-wrapхуучирсан хувилбаруудыг нэмдэг .word-break: break-word
ммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм
<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>Нэг орон зай
Сонголтыг манай monospace фонтын стек болгон өөрчил .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>