Text

Dokumentácia a príklady bežných textových nástrojov na ovládanie zarovnania, zalamovania, hmotnosti a podobne.

Na tejto stránke

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.

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>

Upozorňujeme, že neposkytujeme pomocné triedy pre zarovnaný text. Aj keď z estetického hľadiska môže odôvodnený text vyzerať príťažlivejšie, medzery medzi slovami sú náhodnejšie, a preto sa ťažšie čítajú.

Zalamovanie a pretečenie textu

Zalamovanie textu .text-wraptriedou.

Tento text by sa mal zalomiť.

html

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

Zabráňte zalomeniu textu s .text-nowraptriedou.

Tento text by mal presahovať nadradeného.

html

<div class="text-nowrap bg-light border" 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-breakna nastavenie word-wrap: break-worda word-break: break-word. Na širšiu podporu prehliadačov používame word-wrapnamiesto bežnejších a pridávame zastarané , aby sme sa vyhli problémom s flexibilnými kontajnermi.overflow-wrapword-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Všimnite si, že delenie slov nie je možné v arabčine , ktorá je najpoužívanejším jazykom RTL. Preto .text-breakje 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.

html

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

text .fs-3

.fs-4 text

.fs-5 text

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>

Prispôsobte si svoje dostupné font-sizes úpravou $font-sizesmapy Sass.

Váha písma a kurzíva

Pomocou týchto nástrojov môžete rýchlo zmeniť text font-weightalebo . utilities sú skrátené ako a utility sú skrátené ako .font-stylefont-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 polotučnou hmotnosťou.

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

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

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>

Monospace

Zmeňte výber na naše jednopriestorové písmo pomocou .font-monospace.

Toto je v monopriestore

html

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

html

<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

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

Premenné

// 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 veľkosti písma sa generujú z tejto mapy v kombinácii s naším rozhraním API pre 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
);

Utilities API

Pomôcky pre písma a text sú deklarované v našom rozhraní API pomocných nástrojov v jazyku scss/_utilities.scss. Zistite, ako používať pomocné rozhranie API.

    "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
    ),