Text
Dokumentácia a príklady bežných textových nástrojov na ovládanie zarovnania, zalamovania, hmotnosti a podobne.
Zarovnanie textu
Pomocou tried zarovnania textu môžete jednoducho znova zarovnať text ku komponentom. Pre zarovnanie začiatku, konca a stredu sú k dispozícii responzívne triedy, ktoré používajú rovnaké zarážky šírky výrezu ako systém mriežky.
Začnite zarovnaný text vo všetkých veľkostiach výrezu.
Text zarovnaný na stred vo všetkých veľkostiach výrezu.
Ukončiť zarovnaný text vo všetkých veľkostiach výrezu.
Začnite zarovnaný text vo výrezoch veľkosti SM (malé) alebo širšie.
Začnite zarovnaný text vo výrezoch s veľkosťou MD (stredná) alebo širšou.
Začnite zarovnaný text vo výrezoch veľkosti LG (veľké) alebo širšie.
Začnite zarovnaný text vo výrezoch veľkosti XL (extra veľké) alebo širších.
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
Zalamovanie a pretečenie textu
Zalomiť text .text-wrap
triedou.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Zabráňte zalomeniu textu s .text-nowrap
triedou.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Slovo zlom
Zabráňte tomu, aby dlhé reťazce textu narušili rozloženie vašich komponentov pomocou tlačidiel .text-break
na nastavenie word-wrap: break-word
a word-break: break-word
. Na širšiu podporu prehliadačov používame word-wrap
namiesto bežnejších a pridávame zastarané , aby sme sa vyhli problémom s flexibilnými kontajnermi.overflow-wrap
word-break: break-word
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
je odstránený z nášho CSS kompilovaného RTL.
Transformácia textu
Transformujte text do komponentov pomocou tried veľkých písmen.
Text s malými písmenami.
Text písaný veľkými písmenami.
Text písaný veľkými písmenami.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Všimnite si, ako .text-capitalize
sa zmení iba prvé písmeno každého slova, pričom veľkosť všetkých ostatných písmen zostane nezmenená.
Veľkosť písma
Rýchla zmena font-size
textu. Zatiaľ čo naše triedy nadpisov (napr. .h1
– .h6
) platia font-size
, font-weight
, a line-height
, tieto nástroje platia lenfont-size
. Veľkosť týchto pomôcok sa zhoduje s prvkami nadpisu HTML, takže so zvyšujúcim sa počtom sa ich veľkosť zmenšuje.
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
Prispôsobte si svoje dostupné font-size
s úpravou $font-sizes
mapy Sass.
Váha písma a kurzíva
Pomocou týchto nástrojov môžete rýchlo zmeniť text font-weight
alebo . utilities sú skrátené ako a utility sú skrátené ako .font-style
font-style
.fst-*
font-weight
.fw-*
Tučný text.
Text s tučnejšou váhou (vo vzťahu k rodičovskému prvku).
Text s normálnou hmotnosťou.
Ľahký text.
Ľahší text (v porovnaní s nadradeným prvkom).
Kurzíva.
Text s normálnym štýlom písma
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
Výška čiary
Zmeňte výšku čiary pomocou .lh-*
nástrojov.
Toto je dlhý odsek napísaný s cieľom ukázať, ako je výška riadku prvku ovplyvnená našimi nástrojmi. Triedy sa aplikujú na samotný prvok alebo niekedy aj na nadradený prvok. Tieto triedy je možné prispôsobiť podľa potreby pomocou nášho pomocného rozhrania API.
Toto je dlhý odsek napísaný s cieľom ukázať, ako je výška riadku prvku ovplyvnená našimi nástrojmi. Triedy sa aplikujú na samotný prvok alebo niekedy aj na nadradený prvok. Tieto triedy je možné prispôsobiť podľa potreby pomocou nášho pomocného rozhrania API.
Toto je dlhý odsek napísaný s cieľom ukázať, ako je výška riadku prvku ovplyvnená našimi nástrojmi. Triedy sa aplikujú na samotný prvok alebo niekedy aj na nadradený prvok. Tieto triedy je možné prispôsobiť podľa potreby pomocou nášho pomocného rozhrania API.
Toto je dlhý odsek napísaný s cieľom ukázať, ako je výška riadku prvku ovplyvnená našimi nástrojmi. Triedy sa aplikujú na samotný prvok alebo niekedy aj na nadradený prvok. Tieto triedy je možné prispôsobiť podľa potreby pomocou nášho pomocného rozhrania API.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
Monospace
Zmeňte výber na naše jednopriestorové písmo pomocou .font-monospace
.
Toto je v monopriestore
<p class="font-monospace">This is in monospace</p>
Obnoviť farbu
Obnovte farbu textu alebo odkazu pomocou .text-reset
, aby zdedil farbu od svojho rodiča.
Stlmený text s odkazom na obnovenie .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Textová výzdoba
Ozdobte text v komponentoch triedami zdobenia textu.
Tento text má pod sebou riadok.
Cez tento text prechádza riadok.
Tento odkaz má odstránenú textovú výzdobu<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
Sass
Premenné
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
$font-family-code: var(--#{$variable-prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
Mapy
Pomôcky s veľkosťou písma sa generujú z tejto mapy v kombinácii s naším rozhraním API nástrojov.
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
Utilities API
Pomôcky pre písma a text sú deklarované v našom rozhraní API pomocných programov v jazyku scss/_utilities.scss
. Zistite, ako používať pomocné rozhranie API.
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),