Tekst

Dokumintaasje en foarbylden foar mienskiplike teksthulpprogramma's om ôfstimming, ynpakke, gewicht en mear te kontrolearjen.

Op dizze side

Tekst alignment

Meitsje tekst maklik opnij oan komponinten mei tekstôfstimmingsklassen. Foar start, ein, en sintrum ôfstimming, responsive klassen binne beskikber dy't brûke deselde viewport breedte brekpunten as it raster systeem.

Begjin ôfstimme tekst op alle viewportgrutte.

Sintrum rjochte tekst op alle viewportgrutte.

Ein ôfstimd tekst op alle viewport maten.

Begjin ôfstimd tekst op viewports grutte SM (lyts) of breder.

Begjin ôfstimd tekst op viewports grutte MD (medium) of breder.

Begjin ôfstimd tekst op viewports grutte LG (grut) of breder.

Begjin ôfstimd tekst op viewports grutte XL (ekstra grut) of breder.

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

Tink derom dat wy gjin nutklassen foar rjochtfeardige tekst leverje. Hoewol, estetysk, rjochtfeardige tekst miskien oantrekliker útsjocht, makket it wurd-spacing mear willekeurich en dêrom dreger om te lêzen.

Tekstomwikkeling en oerstreaming

Wrap tekst mei in .text-wrapklasse.

Dizze tekst moat ynpakke.

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

Foarkom dat tekst mei in .text-nowrapklasse omslacht.

Dizze tekst moat de âlder oerrinne.

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

Wurd break

Foarkom dat lange tekststringen de yndieling fan jo komponinten brekke troch te brûken .text-breakom yn te stellen word-wrap: break-worden word-break: break-word. Wy brûke word-wrapynstee fan 'e meast foarkommende overflow-wrapfoar bredere browserstipe, en foegje de ferâldere word-break: break-wordta om problemen mei flexkonteners te foarkommen.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Tink derom dat it brekken fan wurden net mooglik is yn it Arabysk , dat is de meast brûkte RTL-taal. Dêrom .text-breakwurdt fuorthelle út ús RTL kompilearre CSS.

Tekst transformaasje

Transformearje tekst yn komponinten mei tekstkapitalisaasjeklassen.

Tekst mei lytse letters.

Tekst mei haadletters.

CapiTalized tekst.

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

Tink derom hoe't .text-capitalizeallinich de earste letter fan elk wurd feroaret, wêrtroch it gefal fan alle oare letters net beynfloede wurdt.

Letter grutte

Feroarje fluch de font-sizetekst. Wylst ús koptekstklassen (bgl. .h1- .h6) jilde font-size, font-weight, en , jilde line-heightdizze nutsfoarsjenningen allinichfont-size . De grutte foar dizze hulpprogramma's komt oerien mei de kopteksteleminten fan HTML, dus as it oantal ferheget, nimt de grutte ôf.

.fs-1 tekst

.fs-2 tekst

.fs-3 tekst

.fs-4 tekst

.fs-5 tekst

.fs-6 tekst

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

Pas jo beskikbere font-sizes oan troch de $font-sizesSass-kaart te feroarjen.

Lettertypegewicht en kursyf

Feroarje fluch de font-weightof font-stylefan tekst mei dizze hulpprogramma's. font-styleUtilities wurde ôfkoarte as .fst-*en font-weightUtilities wurde ôfkoarte as .fw-*.

Fet tekst.

Bolder gewicht tekst (relatyf oan it âlder elemint).

Normaal gewicht tekst.

Lichtgewicht tekst.

Lichter gewicht tekst (relatyf oan it âlder elemint).

Kursive tekst.

Tekst mei normale lettertypestyl

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

Line hichte

Feroarje de line hichte mei .lh-*nutsbedriuwen.

Dit is in lange paragraaf skreaun om te sjen hoe't de line-hichte fan in elemint wurdt beynfloede troch ús nutsbedriuwen. Klassen wurde tapast op it elemint sels of soms it âldere elemint. Dizze klassen kinne wurde oanpast as nedich mei ús utility 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

Feroarje in seleksje nei ús monospace lettertypestapel mei .font-monospace.

Dit is yn monospace

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

Kleur weromsette

Stel de kleur fan in tekst of keppeling werom mei .text-reset, sadat it de kleur fan syn âlder erft.

Muted tekst mei in reset keppeling .

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

Tekstdekoraasje

Dekorearje tekst yn komponinten mei tekstdekoraasjeklassen.

Dizze tekst hat in rigel derûnder.

Dizze tekst hat in rigel trochhinne.

Dizze keppeling hat syn tekstdekoraasje fuortsmiten

<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

Fariabelen

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

Maps

Utilities foar lettertypegrutte wurde generearre fan dizze kaart, yn kombinaasje mei ús utilities API.

$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

Lettertype- en tekstutilities wurde ferklearre yn ús utilities API yn scss/_utilities.scss. Learje hoe't jo de utilities API brûke.

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