Tekst
Dokumintaasje en foarbylden foar mienskiplike teksthulpprogramma's om ôfstimming, ynpakke, gewicht en mear te kontrolearjen.
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>Tekstomwikkeling en oerstreaming
Wrap tekst mei in .text-wrapklasse.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Foarkom dat tekst mei in .text-nowrapklasse omslacht.
<div class="text-nowrap bg-light border" 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>.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).
Semibold gewicht tekst.
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-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>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 âlderelemint. Dizze klassen kinne wurde oanpast as nedich mei ús utility API.
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 âlderelemint. Dizze klassen kinne wurde oanpast as nedich mei ús utility API.
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 âlderelemint. Dizze klassen kinne wurde oanpast as nedich mei ús utility API.
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 âlderelemint. 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", "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;
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(--#{$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
),