Source

Текст

Зэрэгцүүлэх, боох, жин гэх мэтийг хянах нийтлэг текст хэрэгслийн баримт бичиг, жишээнүүд.

Текстийн зэрэгцүүлэх

Текстийг зэрэгцүүлэх анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хялбархан тохируулаарай.

Хүсэл тэмүүлэл нь маш сайн бичдэг. 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-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>

Текст хувиргах

Текстийг том үсгээр бичих анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хувиргах.

Жижиг үсгээр бичсэн текст.

Том үсгээр бичсэн текст.

Том үсэгтэй текст.

<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-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

Нэг орон зай

Сонголтыг манай monospace фонтын стек болгон өөрчил .text-monospace.

Энэ нь нэг орон зайд байна

<p class="text-monospace">This is in monospace</p>