Teks

Dokumentasie en voorbeelde vir algemene tekshulpmiddels om belyning, omvou, gewig en meer te beheer.

Op hierdie bladsy

Teksbelyning

Herbelyn teks maklik na komponente met teksbelyningsklasse. Vir begin-, einde- en middelbelyning is responsiewe klasse beskikbaar wat dieselfde uitsigpoortwydte-breekpunte as die roosterstelsel gebruik.

Begin belynde teks op alle viewport-groottes.

Sentreer-belynde teks op alle viewport-groottes.

Beëindig belynde teks op alle viewport-groottes.

Begin belynde teks op viewports grootte SM (klein) of breër.

Begin belynde teks op viewports grootte MD (medium) of breër.

Begin belynde teks op kykpoorte van LG (groot) of breër.

Begin belynde teks op viewports met die grootte XL (ekstra groot) of wyer.

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>

Let daarop dat ons nie nutsklasse vir geregverdigde teks verskaf nie. Alhoewel, esteties, geregverdigde teks meer aantreklik kan lyk, maak dit woordspasiëring meer lukraak en dus moeiliker om te lees.

Teks omvou en oorloop

Vou teks toe met 'n .text-wrapklas.

Hierdie teks moet omvou.

html

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

Verhoed dat teks met 'n .text-nowrapklas toevou.

Hierdie teks moet die ouer oorloop.

html

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

Woordbreek

Verhoed dat lang stringe teks jou komponente se uitleg breek deur te gebruik .text-breakom te stel word-wrap: break-worden word-break: break-word. Ons gebruik word-wrapin plaas van die meer algemeen overflow-wrapvir breër blaaierondersteuning, en voeg die afgekeurde word-break: break-wordby om probleme met buigsame houers te vermy.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Let daarop dat woorde breek nie moontlik is in Arabies nie , wat die mees gebruikte RTL-taal is. Daarom .text-breakis verwyder uit ons RTL saamgestelde CSS.

Teks transformasie

Transformeer teks in komponente met tekshoofletterklasse.

Teks met klein letters.

Teks met hoofletters.

Gekapitaliseerde teks.

html

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

Let op hoe .text-capitalizenet die eerste letter van elke woord verander, wat die hoofletters van enige ander letters onaangeraak laat.

Skrifgrootte

font-sizeVerander die teks vinnig . Terwyl ons opskrifklasse (bv. .h1– .h6) van toepassing font-sizeis , font-weight, en line-height, is hierdie nutsprogramme slegs van toepassing font-size. Grootte vir hierdie nutsprogramme pas by HTML se opskrifelemente, so namate die getal toeneem, verminder hul grootte.

.fs-1 teks

.fs-2 teks

.fs-3 teks

.fs-4 teks

.fs-5 teks

.fs-6 teks

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>

Pas jou beskikbare font-sizes aan deur die $font-sizesSass-kaart te wysig.

Lettertipe gewig en kursief

Verander vinnig die font-weightof font-stylevan teks met hierdie nutsprogramme. font-stylenutsdienste word afgekort as .fst-*en font-weightnutsdienste word afgekort as .fw-*.

Vet teks.

Helder gewig teks (relatief tot die ouer element).

Halfvet gewig teks.

Normale gewig teks.

Ligte gewig teks.

Ligter gewig teks (relatief tot die ouer element).

Kursief teks.

Teks met normale fontstyl

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>

Lyn hoogte

Verander die lynhoogte met .lh-*hulpprogramme.

Hierdie is 'n lang paragraaf wat geskryf is om te wys hoe die lynhoogte van 'n element deur ons nutsprogramme beïnvloed word. Klasse word toegepas op die element self of soms die ouerelement. Hierdie klasse kan aangepas word soos nodig met ons nuts-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>

Monoruimte

Verander 'n keuse na ons monospace font stapel met .font-monospace.

Dit is in monospace

html

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

Stel kleur terug

Stel 'n teks of skakel se kleur terug met .text-reset, sodat dit die kleur van sy ouer erf.

Gedempte teks met 'n terugstelskakel .

html

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

Teksversiering

Versier teks in komponente met teksversieringsklasse.

Hierdie teks het 'n reël onder.

Hierdie teks het 'n reël wat daardeur gaan.

Die teksversiering van hierdie skakel is verwyder

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

Veranderlikes

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

Kaarte

Lettertipe-grootte nutsprogramme word vanaf hierdie kaart gegenereer, in kombinasie met ons nutsprogramme 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

Lettertipe- en tekshulpprogramme word in ons hulpprogramme-API in verklaar scss/_utilities.scss. Leer hoe om die utilities API te gebruik.

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