Мәтін
Түзетуді, орауды, салмақты және т.б. басқаруға арналған жалпы мәтіндік утилиталарға арналған құжаттар мен мысалдар.
Мәтінді туралау
Мәтінді туралау сыныптары бар құрамдастарға мәтінді оңай қайта реттеңіз.
Негізделген мәтінді туралауды көрсету үшін кейбір толтырғыш мәтіні. Мен үшін де солай істейсің бе? Мен енді сенің музаң емеспін музыкамен бетпе-бет келудің уақыты келді. Әдемі екенін естідім, қазы болыңыз, менің қыздарым дауыс береді. Мен ішімде Фениксті сезінемін. Аспан біздің махаббатымызды қызғанады, жоғарыдан періштелер жылайды. Иә, сен мені утопияға апардың.
<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-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Орнату үшін 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>Моноғарыш
Таңдауды біздің монокеңістік қаріптер стекке ауыстырыңыз .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>