Текст
Зэрэгцүүлэх, боох, жин гэх мэтийг хянах нийтлэг текст хэрэгслийн баримт бичиг, жишээнүүд.
Текстийн зэрэгцүүлэх
Текстийг зэрэгцүүлэх анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хялбархан тохируулаарай.
Хүсэл тэмүүлэл нь маш сайн бичдэг. Cras matis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Энэ нь нийтийн өмнө байх ёстой. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras matis iudicium purus sit 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>Зүүн, баруун, төвд зэрэгцүүлэхийн тулд сүлжээний системтэй ижил харах талбайн өргөний таслах цэгийг ашигладаг хариу үйлдэл үзүүлэх ангиуд байдаг.
Бүх харах цонхны хэмжээн дээр зүүн зэрэгцүүлсэн текст.
Бүх харах цонхны хэмжээн дээр төвд зэрэгцүүлсэн текст.
Бүх харах цонхны хэмжээн дээр баруун зэрэгцүүлсэн текст.
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
ммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм
<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>