Tekst
Dokumentation og eksempler på almindelige tekstværktøjer til at kontrollere justering, ombrydning, vægt og mere.
Tekstjustering
Juster nemt tekst til komponenter med tekstjusteringsklasser. Til start-, slut- og centerjustering er responsive klasser tilgængelige, der bruger de samme visningsportsbreddebrudpunkter som gittersystemet.
Start justeret tekst på alle visningsportstørrelser.
Centreret tekst på alle visningsportstørrelser.
Afslut justeret tekst på alle visningsportstørrelser.
Start justeret tekst på visningsporte i størrelsen SM (lille) eller bredere.
Start justeret tekst på visningsporte i størrelsen MD (medium) eller bredere.
Start justeret tekst på visningsporte i størrelsen LG (stor) eller bredere.
Start justeret tekst på visningsporte i størrelsen XL (ekstra stor) eller bredere.
<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>Tekstombrydning og overløb
Ombryd tekst med en .text-wrapklasse.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Forhindre tekst i at ombryde med en .text-nowrapklasse.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Ordbrud
Forhindr lange tekststrenge i at bryde dine komponenters layout ved at bruge .text-breaktil at indstille word-wrap: break-wordog word-break: break-word. Vi bruger word-wrapi stedet for det mere almindelige overflow-wraptil bredere browserunderstøttelse og tilføjer de forældede word-break: break-wordfor at undgå problemer med flex-containere.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakfjernet fra vores RTL kompilerede CSS.
Tekst transformation
Transform tekst i komponenter med tekstklasser med store bogstaver.
Tekst med små bogstaver.
Tekst med store bogstaver.
Kapitaliseret tekst.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Bemærk, hvordan .text-capitalizekun det første bogstav i hvert ord ændres, så der ikke påvirkes store og små bogstaver i andre bogstaver.
Skriftstørrelse
Skift hurtigt font-sizeteksten. Mens vores overskriftsklasser (f.eks. .h1– .h6) gælder font-size, font-weight, og , gælder line-heightdisse hjælpeprogrammer kunfont-size . Størrelse for disse hjælpeprogrammer matcher HTMLs overskriftselementer, så efterhånden som antallet stiger, falder deres størrelse.
.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>Tilpas dine tilgængelige font-sizes ved at ændre $font-sizesSass-kortet.
Skriftvægt og kursiv
Skift hurtigt font-weighteller font-styleaf tekst med disse hjælpeprogrammer. font-stylehjælpeprogrammer er forkortet som .fst-*og font-weighthjælpeprogrammer forkortes som .fw-*.
Fed tekst.
Fed tekst (i forhold til det overordnede element).
Normal vægt tekst.
Letvægts tekst.
Lettere tekst (i forhold til det overordnede element).
Kursiv tekst.
Tekst med normal skrifttype
<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>Linjehøjde
Skift linjehøjden med .lh-*hjælpeprogrammer.
Dette er et langt afsnit skrevet for at vise, hvordan linjehøjden af et element påvirkes af vores hjælpeprogrammer. Klasser anvendes på selve elementet eller nogle gange det overordnede element. Disse klasser kan tilpasses efter behov med vores utility API.
Dette er et langt afsnit skrevet for at vise, hvordan linjehøjden af et element påvirkes af vores hjælpeprogrammer. Klasser anvendes på selve elementet eller nogle gange det overordnede element. Disse klasser kan tilpasses efter behov med vores utility API.
Dette er et langt afsnit skrevet for at vise, hvordan linjehøjden af et element påvirkes af vores hjælpeprogrammer. Klasser anvendes på selve elementet eller nogle gange det overordnede element. Disse klasser kan tilpasses efter behov med vores utility API.
Dette er et langt afsnit skrevet for at vise, hvordan linjehøjden af et element påvirkes af vores hjælpeprogrammer. Klasser anvendes på selve elementet eller nogle gange det overordnede element. Disse klasser kan tilpasses efter behov med vores 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
Skift et valg til vores monospace skrifttypestak med .font-monospace.
Dette er i monospace
<p class="font-monospace">This is in monospace</p>Nulstil farve
Nulstil farven på en tekst eller et link med .text-reset, så det arver farven fra sin overordnede.
Lydløs tekst med et nulstillingslink .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Tekst dekoration
Dekorer tekst i komponenter med tekstdekorationsklasser.
Denne tekst har en streg nedenunder.
Denne tekst har en linje igennem sig.
Dette link har fjernet sin tekstdekoration<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
Variabler
// 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;
Kort
Hjælpeprogrammer i skriftstørrelse genereres fra dette kort i kombination med vores hjælpeprogrammer 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
);
Hjælpeprogrammer API
Skrift- og tekstværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss. Lær, hvordan du bruger utilities API.
"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
),