Text
Dokumentace a příklady běžných textových nástrojů pro ovládání zarovnání, zalamování, váhy a další.
Zarovnání textu
Snadno znovu zarovnejte text ke komponentám pomocí tříd zarovnání textu. Pro zarovnání začátku, konce a středu jsou k dispozici citlivé třídy, které používají stejné zarážky šířky výřezu jako systém mřížky.
Spustit zarovnaný text na všech velikostech výřezu.
Text zarovnaný na střed ve všech velikostech výřezu.
Ukončit zarovnaný text u všech velikostí výřezu.
Začněte zarovnaný text ve výřezech velikosti SM (malé) nebo širších.
Začněte zarovnaný text ve výřezech velikosti MD (střední) nebo širších.
Začněte zarovnaný text ve výřezech velikosti LG (velké) nebo širších.
Začněte zarovnaný text ve výřezech velikosti XL (extra velké) nebo š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>
Zalamování a přetečení textu
Obtékání textu .text-wrap
třídou.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Zabraňte zalamování textu pomocí .text-nowrap
třídy.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Přerušení slov
Zabraňte tomu, aby dlouhé řetězce textu narušily rozvržení vašich komponent pomocí .text-break
nastavení word-wrap: break-word
a word-break: break-word
. Používáme word-wrap
místo běžnějších overflow-wrap
pro širší podporu prohlížečů a přidáváme zastaralé word-break: break-word
, abychom se vyhnuli problémům s flex kontejnery.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
je odstraněn z našeho CSS kompilovaného RTL.
Transformace textu
Transformujte text do komponent pomocí tříd psaní velkých písmen.
Text s malými písmeny.
Text velkými písmeny.
Text velkými písmeny.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Všimněte si, jak .text-capitalize
se změní pouze první písmeno každého slova, přičemž velikost všech ostatních písmen zůstane nezměněna.
Velikost písma
Rychlá změna font-size
textu. Zatímco naše třídy nadpisů (např. .h1
– .h6
) platí font-size
, font-weight
, a line-height
, tyto nástroje platí pouzefont-size
. Velikost těchto nástrojů se shoduje s prvky nadpisu HTML, takže jak se číslo zvyšuje, jejich velikost se zmenšuje.
text .fs-1
text .fs-2
text .fs-3
text .fs-4
text .fs-5
text .fs-6
<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>
Přizpůsobte si své dostupné font-size
s úpravou $font-sizes
mapy Sass.
Tloušťka písma a kurzíva
Pomocí těchto nástrojů rychle změňte text font-weight
nebo . utility jsou zkráceny jako a utility jsou zkráceny jako .font-style
font-style
.fst-*
font-weight
.fw-*
Tučné písmo.
Tučná váha textu (vzhledem k nadřazenému prvku).
Text normální váhy.
Lehký text.
Lehčí text (vzhledem k nadřazenému prvku).
Text kurzívou.
Text s normálním stylem 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 řádku
Změňte výšku řádku pomocí .lh-*
nástrojů.
Toto je dlouhý odstavec, který ukazuje, jak je výška řádku prvku ovlivněna našimi nástroji. Třídy se aplikují na samotný prvek nebo někdy na nadřazený prvek. Tyto třídy lze přizpůsobit podle potřeby pomocí našeho API nástroje.
Toto je dlouhý odstavec, který ukazuje, jak je výška řádku prvku ovlivněna našimi nástroji. Třídy se aplikují na samotný prvek nebo někdy na nadřazený prvek. Tyto třídy lze přizpůsobit podle potřeby pomocí našeho API nástroje.
Toto je dlouhý odstavec, který ukazuje, jak je výška řádku prvku ovlivněna našimi nástroji. Třídy se aplikují na samotný prvek nebo někdy na nadřazený prvek. Tyto třídy lze přizpůsobit podle potřeby pomocí našeho API nástroje.
Toto je dlouhý odstavec, který ukazuje, jak je výška řádku prvku ovlivněna našimi nástroji. Třídy se aplikují na samotný prvek nebo někdy na nadřazený prvek. Tyto třídy lze přizpůsobit podle potřeby pomocí našeho API nástroje.
<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>
Jednoprostorový
Změňte výběr na náš zásobník jednoprostorových písem pomocí .font-monospace
.
Toto je v monospace
<p class="font-monospace">This is in monospace</p>
Obnovit barvu
Obnovte barvu textu nebo odkazu pomocí .text-reset
, aby zdědil barvu od svého rodiče.
Ztlumený text s odkazem pro resetování .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Textová dekorace
Ozdobte text v komponentách pomocí tříd zdobení textu.
Tento text má pod sebou řádek.
Tímto textem prochází řádek.
U tohoto odkazu byla odstraněna textová dekorace<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
Proměnné
// 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
Nástroje velikosti písma jsou generovány z této mapy v kombinaci s naším rozhraním API pro nástroje.
$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
);
Utility API
Nástroje pro písma a text jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss
. Naučte se používat rozhraní API utilit.
"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
),