Source

Мәтін

Түзетуді, орауды, салмақты және т.б. басқаруға арналған жалпы мәтіндік утилиталарға арналған құжаттар мен мысалдар.

Мәтінді туралау

Мәтінді туралау сыныптары бар құрамдастарға мәтінді оңай қайта реттеңіз.

Амбициялар нақты сценарийлерді белгілейді. Cras matis 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 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-blockdisplay: block

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
<!-- 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>

Моноғарыш

Таңдауды біздің монокеңістік қаріптер стекке ауыстырыңыз .text-monospace.

Бұл монокеңістікте

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