Tekst

Documentatie en voorbeelden voor veelgebruikte teksthulpprogramma's om uitlijning, terugloop, gewicht en meer te regelen.

Op deze pagina

Tekstuitlijning

Lijn tekst eenvoudig opnieuw uit op componenten met tekstuitlijningsklassen. Voor begin-, eind- en middenuitlijning zijn responsieve klassen beschikbaar die dezelfde breekpunten voor de viewportbreedte gebruiken als het rastersysteem.

Start uitgelijnde tekst op alle viewportformaten.

Gecentreerde tekst op alle viewportformaten.

Beëindig uitgelijnde tekst op alle viewportformaten.

Start uitgelijnde tekst op viewports met de grootte SM (klein) of breder.

Begin uitgelijnde tekst op viewports met de grootte van MD (medium) of breder.

Begin met uitgelijnde tekst op viewports van LG (groot) of breder.

Start uitgelijnde tekst op viewports van formaat XL (extra groot) 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>

Houd er rekening mee dat we geen hulpprogramma-klassen bieden voor uitgevulde tekst. Hoewel, esthetisch verantwoorde tekst er misschien aantrekkelijker uitziet, wordt de woordafstand willekeuriger en daardoor moeilijker te lezen.

Tekstterugloop en overloop

Wikkel tekst in met een .text-wrapklasse.

Deze tekst moet teruglopen.

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

Voorkom dat tekst omloopt met een .text-nowrapklasse.

Deze tekst moet de ouder overlopen.

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

Woordbreuk

Voorkom dat lange tekstreeksen de lay-out van uw componenten verbreken door te gebruiken .text-breakom in te stellen word-wrap: break-worden word-break: break-word. We gebruiken word-wrapin plaats van de meer gebruikelijke overflow-wrapvoor bredere browserondersteuning en voegen de verouderde word-break: break-wordtoe om problemen met flexcontainers te voorkomen.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Merk op dat het breken van woorden niet mogelijk is in het Arabisch , de meest gebruikte RTL-taal. Daarom .text-breakis verwijderd uit onze RTL gecompileerde CSS.

Teksttransformatie

Transformeer tekst in componenten met hoofdletterklassen.

Tekst in kleine letters.

Tekst in hoofdletters.

Hoofdletters tekst.

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

Merk op hoe .text-capitalizealleen de eerste letter van elk woord verandert, waarbij het geval van andere letters ongewijzigd blijft.

Lettertypegrootte

Verander snel font-sizevan tekst. Terwijl onze kopklassen (bijv. .h1– .h6) van toepassing zijn font-size, font-weight, en line-height, zijn deze hulpprogramma's alleen van toepassing font-size. De grootte van deze hulpprogramma's komt overeen met de kopelementen van HTML, dus naarmate het aantal toeneemt, neemt hun grootte af.

.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 uw beschikbare font-sizebestanden aan door de $font-sizesSass-kaart aan te passen.

Lettergewicht en cursief

Verander snel de font-weightof font-stylevan tekst met deze hulpprogramma's. font-stylehulpprogramma's worden afgekort als .fst-*en font-weighthulpprogramma's worden afgekort als .fw-*.

Vetgedrukte tekst.

Vetgedrukte tekst (ten opzichte van het bovenliggende element).

Tekst met normaal gewicht.

Lichtgewicht tekst.

Lichtere tekst (ten opzichte van het bovenliggende element).

Cursieve tekst.

Tekst met normale letterstijl

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

Lijnhoogte

Wijzig de lijnhoogte met .lh-*hulpprogramma's.

Dit is een lange paragraaf die is geschreven om te laten zien hoe de regelhoogte van een element wordt beïnvloed door onze hulpprogramma's. Klassen worden toegepast op het element zelf of soms op het bovenliggende element. Deze klassen kunnen naar behoefte worden aangepast met onze hulpprogramma-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

Wijzig een selectie in onze monospace-lettertypestapel met .font-monospace.

Dit is in monospace

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

Kleur resetten

Stel de kleur van een tekst of link opnieuw in met .text-reset, zodat deze de kleur van de bovenliggende kleur overneemt.

Gedempte tekst met een reset-link .

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

Tekst decoratie

Versier tekst in componenten met tekstdecoratieklassen.

Deze tekst heeft een regel eronder.

Door deze tekst loopt een streep.

De tekstversiering van deze link is verwijderd

<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

Variabelen

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

Kaarten

Hulpprogramma's op lettergrootte worden gegenereerd op basis van deze kaart, in combinatie met onze hulpprogramma's-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
);

Hulpprogramma's-API

Font- en teksthulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.

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