Text
Dokumentatioun an Beispiller fir gemeinsam Text Utilities fir Ausrichtung, Wrap, Gewiicht a méi ze kontrolléieren.
Text Ausrichtung
Einfach Text op Komponente mat Textausrichtungsklassen ëmsetzen. Fir Start, Enn, an Zentrum Ausriichtung, reaktiounsfäeger Klassen sinn disponibel déi selwecht Viewport Breet breakpoints wéi de Gitter System benotzen.
Start ausgeriicht Text op all viewport Gréissten.
Centre ausgeriicht Text op all viewport Gréissten.
Enn ausgeriicht Text op all viewport Gréissten.
Start ausgeriicht Text op viewports Gréisst SM (kleng) oder méi breet.
Start ausgeriichten Text op Viewports mat MD (mëttel) oder méi breed.
Start ausgeriichten Text op Viewports mat LG (grouss) oder méi breed.
Start ausgeriichten Text op Viewports Gréisst XL (extra-grouss) oder méi breet.
<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>
Textverpackung an Iwwerfloss
Wrap Text mat enger .text-wrap
Klass.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Verhënnert datt den Text mat enger .text-nowrap
Klass ëmklappt.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Wuert Paus
Verhënnert datt laang Strings vum Text Äre Layout vun Äre Komponenten briechen andeems Dir benotzt .text-break
fir ze setzen word-wrap: break-word
an word-break: break-word
. Mir benotzen word-wrap
amplaz vun der méi heefeg overflow-wrap
fir méi breet Browser-Ënnerstëtzung, a füügt déi ofgeschnidden word-break: break-word
fir Probleemer mat Flexbehälter ze vermeiden.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
gëtt aus eiser RTL zesummegestallte CSS geläscht.
Text transforméiert
Transforméiert Text a Komponenten mat Text Kapitaliséierungsklassen.
klengen Text.
Groussen Text.
Kapitaliséiert Text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Notéiert wéi .text-capitalize
nëmmen den éischte Buschtaf vun all Wuert ännert, de Fall vun all anere Buschtawen net beaflosst.
Schrëftgréisst
Schnell änneren den font-size
Text. Wärend eis Rubrikklassen (zB .h1
- .h6
) gëllen font-size
, font-weight
, an line-height
, dës Utilities gëllen nëmmenfont-size
. Gréisst fir dës Utilities entsprécht HTML Rubrik Elementer, sou datt d'Zuel eropgeet, hir Gréisst reduzéiert.
.fs-1 Text
.fs-2 Text
.fs-3 Text
.fs-4 Text
.fs-5 Text
.fs-6 Text
<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>
Passt Är verfügbare font-size
s un andeems Dir d' $font-sizes
Sass Kaart ännert.
Schrëftgewiicht an Kursiv
Schnell änneren den font-weight
oder font-style
vum Text mat dësen Utilities. font-style
Utilities ginn ofgekierzt als .fst-*
an font-weight
Utilities sinn ofkierzlech als .fw-*
.
Fett Text.
Bolder Gewiicht Text (relativ zum Elterendeel).
Normal Gewiicht Text.
Liicht Gewiicht Text.
Liichtgewiicht Text (relativ zum Elterendeel).
Kursiv Text.
Text mat normale Schrëftstil
<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>
Linn Héicht
Änneren der Linn Héicht mat .lh-*
Utilities.
Dëst ass e laange Paragraph geschriwwen fir ze weisen wéi d'Linnhéicht vun engem Element vun eisen Utilities beaflosst gëtt. Klassen ginn op d'Element selwer applizéiert oder heiansdo d'Elterenelement. Dës Klassen kënne personaliséiert ginn wéi néideg mat eisem Utility API.
Dëst ass e laange Paragraph geschriwwen fir ze weisen wéi d'Linnhéicht vun engem Element vun eisen Utilities beaflosst gëtt. Klassen ginn op d'Element selwer applizéiert oder heiansdo d'Elterenelement. Dës Klassen kënne personaliséiert ginn wéi néideg mat eisem Utility API.
Dëst ass e laange Paragraph geschriwwen fir ze weisen wéi d'Linnhéicht vun engem Element vun eisen Utilities beaflosst gëtt. Klassen ginn op d'Element selwer applizéiert oder heiansdo d'Elterenelement. Dës Klassen kënne personaliséiert ginn wéi néideg mat eisem Utility API.
Dëst ass e laange Paragraph geschriwwen fir ze weisen wéi d'Linnhéicht vun engem Element vun eisen Utilities beaflosst gëtt. Klassen ginn op d'Element selwer applizéiert oder heiansdo d'Elterenelement. Dës Klassen kënne personaliséiert ginn wéi néideg mat eisem 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
Ännert eng Auswiel un eise Monospace Schrëftstack mat .font-monospace
.
Dëst ass am Monospace
<p class="font-monospace">This is in monospace</p>
Faarf zrécksetzen
Zerécksetzen d'Faarf vun engem Text oder Link mat .text-reset
, sou datt et d'Faarf vu sengem Elterendeel ierft.
Muted Text mat engem Reset Link .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Text Dekoratioun
Dekoréiert Text a Komponenten mat Textdekoratiounsklassen.
Dësen Text huet eng Linn drënner.
Dësen Text huet eng Linn duerch.
Dëse Link huet seng Textdekoratioun ewechgeholl<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
Variablen
// 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
Schrëftgréisst Utilities ginn aus dëser Kaart generéiert, a Kombinatioun mat eisen 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
Schrëft an Text Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss
. Léiert wéi Dir d'Utilities API benotzt.
"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
),