Text

Dokumentace a příklady běžných textových nástrojů pro ovládání zarovnání, zalamování, váhy a další.

Na této straně

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.

html

<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>

Všimněte si, že neposkytujeme pomocné třídy pro zarovnaný text. Zatímco z estetického hlediska může zarovnaný text vypadat atraktivněji, činí mezery mezi slovy náhodnějšími, a proto je obtížnější je číst.

Zalamování a přetečení textu

Obtékání textu .text-wraptřídou.

Tento text by se měl zalomit.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Zabraňte zalamování textu pomocí .text-nowraptřídy.

Tento text by měl přetékat nadřazeného.

html

<div class="text-nowrap bg-light border" 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-breaknastavení word-wrap: break-worda word-break: break-word. Používáme word-wrapmísto běžnějších overflow-wrappro širší podporu prohlížečů a přidáváme zastaralé word-break: break-word, abychom se vyhnuli problémům s flex kontejnery.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Všimněte si, že dělení slov není možné v arabštině , která je nejpoužívanějším jazykem RTL. Proto .text-breakje 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.

html

<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-capitalizese 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-sizetextu. 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

html

<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-sizes úpravou $font-sizesmapy Sass.

Tloušťka písma a kurzíva

Pomocí těchto nástrojů rychle změňte text font-weightnebo . utility jsou zkráceny jako a utility jsou zkráceny jako .font-stylefont-style.fst-*font-weight.fw-*

Tučné písmo.

Tučná váha textu (vzhledem k nadřazenému prvku).

Polotučný text hmotnosti.

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

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</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.

html

<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

html

<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í .

html

<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

html

<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", "Noto Sans", "Liberation Sans", Arial, 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(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$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-semibold:        600;
$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(--#{$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,
        semibold: $font-weight-semibold,
        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
    ),