Teks
Dokumentasie en voorbeelde vir algemene tekshulpmiddels om belyning, omvou, gewig en meer te beheer.
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.
<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>
Teks omvou en oorloop
Vou teks toe met 'n .text-wrap
klas.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Verhoed dat teks met 'n .text-nowrap
klas toevou.
<div class="text-nowrap bd-highlight" 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-break
om te stel word-wrap: break-word
en word-break: break-word
. Ons gebruik word-wrap
in plaas van die meer algemeen overflow-wrap
vir breër blaaierondersteuning, en voeg die afgekeurde word-break: break-word
by om probleme met buigsame houers te vermy.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
is verwyder uit ons RTL saamgestelde CSS.
Teks transformasie
Transformeer teks in komponente met tekshoofletterklasse.
Kleinletters.
Teks met hoofletters.
Gekapitaliseerde teks.
<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-capitalize
net die eerste letter van elke woord verander, wat die hoofletters van enige ander letters onaangeraak laat.
Skrifgrootte
font-size
Verander die teks vinnig . Terwyl ons opskrifklasse (bv. .h1
– .h6
) van toepassing font-size
is , 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
<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-size
s aan deur die $font-sizes
Sass-kaart te wysig.
Lettertipe gewig en kursief
Verander vinnig die font-weight
of font-style
van teks met hierdie nutsprogramme. font-style
nutsdienste word afgekort as .fst-*
en font-weight
nutsdienste word afgekort as .fw-*
.
Vet teks.
Helder gewig teks (relatief tot die ouer element).
Normale gewig teks.
Ligte gewig teks.
Ligter gewig teks (relatief tot die ouer element).
Kursief teks.
Teks met normale fontstyl
<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>
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.
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.
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.
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.
<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
<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 .
<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<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", 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;
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(--#{$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
),