Tekst

Dokumentatsioon ja näited tavapäraste tekstiutiliitide jaoks, et juhtida joondamist, mähkimist, kaalu ja palju muud.

Sellel lehel

Teksti joondamine

Joondage tekst hõlpsalt komponentideks teksti joondusklasside abil. Alguse, lõpu ja keskele joondamiseks on saadaval reageerivad klassid, mis kasutavad samu vaateava laiuse katkestuspunkte kui ruudustikusüsteem.

Joondatud teksti alustamine kõigis vaateava suurustes.

Keskele joondatud tekst kõigis vaateava suurustes.

Lõpeta joondatud tekst kõigis vaateava suurustes.

Joondatud teksti alustamine vaateavadest, mille suurus on SM (väike) või laiem.

Joondatud teksti alustamine vaateavadest, mille suurus on MD (keskmine) või laiem.

Alustage joondatud teksti LG (suure) või laiema suurusega vaateavadel.

Alusta joondatud teksti XL (eriti suur) või laiematest vaateavadest.

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>

Pange tähele, et me ei paku joondatud teksti jaoks kasulikke klasse. Kuigi esteetiliselt võib põhjendatud tekst tunduda ahvatlevam, muudab see sõnavahed juhuslikumaks ja seetõttu raskemini loetavaks.

Teksti murdmine ja ületäitumine

Teksti murdmine .text-wrapklassiga.

See tekst peaks katkema.

html

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

.text-nowrapVältige klassiga teksti murdmist .

See tekst peaks üle vanema.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Sõna murd

Vältige pikkadel tekstistringidel komponentide paigutust rikkumast, kasutades .text-breakseadistusi word-wrap: break-wordja word-break: break-word. Laiema brauseri toe jaoks kasutame word-wraptavalisema asemel ja lisame aegunud , et vältida probleeme paindlike konteineritega.overflow-wrapword-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Pange tähele, et araabia keeles , mis on enimkasutatav RTL-i keel, pole sõnade murdmine võimalik . Seetõttu .text-breakeemaldatakse see meie RTL-i koostatud CSS-ist.

Teksti teisendus

Teisendage tekst komponentideks teksti suurtähtede kasutamise klassidega.

Väiketähtedega tekst.

Suurtähtedega tekst.

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Pange tähele, kuidas .text-capitalizemuudab ainult iga sõna esimest tähte, jättes muude tähtede suur- ja väiketähtede muutmata.

Fondi suurus

Muutke teksti kiiresti font-size. Kuigi meie pealkirjaklassid (nt .h1– .h6) kehtivad font-size, font-weightja , kehtivad line-heightneed utiliidid ainultfont-size . Nende utiliitide suuruse määramine ühtib HTML-i pealkirja elementidega, nii et arvu suurenedes nende suurus väheneb.

.fs-1 tekst

.fs-2 tekst

.fs-3 tekst

.fs-4 tekst

.fs-5 tekst

.fs-6 tekst

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>

Kohandage oma saadaolevaid font-sizes-i, muutes $font-sizesSassi kaarti.

Fondi kaal ja kaldkiri

Nende utiliitidega saate kiiresti muuta teksti font-weightvõi font-style. font-styleutiliidid on lühendatud kujul .fst-*ja font-weightutiliidid on lühendatud kui .fw-*.

Paks tekst.

Paksem kaal tekst (võrreldes põhielemendiga).

Poolpaks tekst.

Normaalse kaaluga tekst.

Kerge tekst.

Kergema kaaluga tekst (suhtes põhielemendiga).

Kaldkiri.

Tavalise kirjastiiliga tekst

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>

Reakõrgus

Muutke liini kõrgust .lh-*utiliitidega.

See on pikk lõik, mis on kirjutatud näitamaks, kuidas meie utiliidid mõjutavad elemendi joone kõrgust. Klassid rakendatakse elemendile endale või mõnikord ka emaelemendile. Neid klasse saab vastavalt vajadusele kohandada meie utiliidi API-ga.

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>

Monoruum

Muutke valik meie monospace'i fondivirnaks, kasutades .font-monospace.

See on monoruumis

html

<p class="font-monospace">This is in monospace</p>

Lähtesta värv

Lähtestage teksti või lingi värv nupuga .text-reset, nii et see pärib värvi oma emalt.

Vaigistatud tekst lähtestamislingiga .

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Teksti kaunistamine

Komponentide teksti kaunistamine tekstide kaunistamise klassidega.

Selle teksti all on rida.

Seda teksti läbib rida.

Sellel lingil on tekstikaunistus eemaldatud

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

Muutujad

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

Kaardid

Kirjasuuruses utiliidid genereeritakse sellelt kaardilt koos meie utiliitide API-ga.

$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
);

Utiliidide API

Fondi- ja tekstiutiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

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