Tekst
Dokumentacja i przykłady typowych narzędzi tekstowych do sterowania wyrównaniem, zawijaniem, wagą i nie tylko.
Wyrównanie tekstu
Łatwo wyrównuj tekst do komponentów za pomocą klas wyrównania tekstu.
Trochę tekstu zastępczego, aby zademonstrować wyrównanie tekstu. Czy zrobisz to samo dla mnie? Czas zmierzyć się z muzyką Nie jestem już twoją muzą. Słyszałem, że to piękne, zostań sędzią, a moje dziewczyny wezmą głos. Czuję w sobie feniksa. Niebo jest zazdrosne o naszą miłość, anioły płaczą z góry. Tak, zabierasz mnie do utopii.
<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>W przypadku wyrównania do lewej, prawej i do środka dostępne są klasy reagujące, które używają tych samych punktów przerwania szerokości rzutni, co system siatki.
Tekst wyrównany do lewej we wszystkich rozmiarach rzutni.
Wyśrodkowany tekst we wszystkich rozmiarach rzutni.
Tekst wyrównany do prawej we wszystkich rozmiarach rzutni.
Tekst wyrównany do lewej na rzutniach o rozmiarze SM (małym) lub szerszym.
Tekst wyrównany do lewej w rzutniach o rozmiarze MD (średnim) lub szerszym.
Tekst wyrównany do lewej w rzutniach o rozmiarze LG (dużym) lub szerszym.
Tekst wyrównany do lewej w rzutniach o rozmiarze XL (bardzo duży) lub szerszym.
<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>Zawijanie i przepełnianie tekstu
Zawijaj tekst .text-wrapklasą.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Zapobiegaj zawijaniu się tekstu z .text-nowrapklasą.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>W przypadku dłuższej zawartości możesz dodać .text-truncateklasę, aby obciąć tekst za pomocą wielokropka. Wymaga display: inline-blocklub 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>Łamanie słów
Zapobiegaj łamaniu układu komponentów przez długie ciągi tekstu, używając .text-breakto set word-wrap: break-wordi word-break: break-word. Używamy word-wrapzamiast bardziej powszechnego overflow-wrapdla szerszej obsługi przeglądarek i dodajemy przestarzałe word-break: break-word, aby uniknąć problemów z kontenerami elastycznymi.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Przekształcenie tekstu
Przekształć tekst w komponenty za pomocą klas pisania wielkimi literami.
Tekst pisany małymi literami.
Tekst pisany wielkimi literami.
Tekst pisany wielkimi literami.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Zwróć uwagę, jak .text-capitalizezmienia się tylko pierwsza litera każdego słowa, pozostawiając wielkość liter bez zmian.
Grubość czcionki i kursywa
Szybko zmień grubość (pogrubienie) tekstu lub użyj kursywy.
Pogrubiony tekst.
Tekst wagi pogrubionej (w stosunku do elementu nadrzędnego).
Tekst o normalnej wadze.
Lekki tekst.
Tekst o mniejszej wadze (w stosunku do elementu nadrzędnego).
Tekst kursywą.
<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>Monoprzestrzeń
Zmień zaznaczenie na nasz stos czcionek o stałej szerokości za pomocą .text-monospace.
To jest w monoprzestrzeni
<p class="text-monospace">This is in monospace</p>Zresetuj kolor
Zresetuj kolor tekstu lub łącza za pomocą .text-reset, aby odziedziczył kolor po swoim rodzicu.
Wyciszony tekst z linkiem do resetowania .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekoracja tekstu
Usuń dekorację tekstową z .text-decoration-noneklasą.
<a href="#" class="text-decoration-none">Non-underlined link</a>