Мәтін
Түзетуді, орауды, салмақты және т.б. басқаруға арналған жалпы мәтіндік утилиталарға арналған құжаттар мен мысалдар.
Мәтінді туралау
Мәтінді туралау сыныптары бар құрамдастарға мәтінді оңай қайта реттеңіз.
Амбициялар нақты сценарийлерді белгілейді. 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-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-blockdisplay: 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Орнату үшін overflow-wrap: break-word(және word-break: break-wordIE және Edge үйлесімділігі үшін) пайдалану арқылы мәтіннің ұзын жолдарының құрамдастардың орналасуын бұзуына жол бермеңіз .
ммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм
<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>