Text
Dokumentation och exempel för vanliga textverktyg för att styra justering, lindning, vikt och mer.
Textjustering
Justera enkelt text till komponenter med textjusteringsklasser. För start-, slut- och mittjustering finns responsiva klasser tillgängliga som använder samma brytpunkter för visningsportbredden som rutnätssystemet.
Börja justerad text på alla visningsportstorlekar.
Centrerad text på alla visningsportstorlekar.
Avsluta justerad text på alla visningsportstorlekar.
Börja justerad text på visningsportar i storleken SM (liten) eller bredare.
Börja justerad text på visningsportar i storleken MD (medium) eller bredare.
Börja justerad text på visningsportar med storleken LG (stor) eller bredare.
Börja justerad text på visningsportar i storleken XL (extra-large) eller bredare.
<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>
Textomslutning och översvämning
Slå in text med en .text-wrap
klass.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Förhindra text från att radbrytas med en .text-nowrap
klass.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Ordbrytning
Förhindra långa textsträngar från att bryta dina komponenters layout genom att använda .text-break
för att ställa in word-wrap: break-word
och word-break: break-word
. Vi använder word-wrap
istället för det vanligare overflow-wrap
för bredare webbläsarstöd, och lägger till de föråldrade word-break: break-word
för att undvika problem med flexbehållare.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
tas den bort från vår RTL-kompilerade CSS.
Textförvandling
Omvandla text i komponenter med textklasser för versaler.
Text med små bokstäver.
Text med versaler.
Kapitaliserad text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Notera hur .text-capitalize
endast den första bokstaven i varje ord ändras, så att alla andra bokstäver inte påverkas av versaler.
Textstorlek
Ändra snabbt font-size
texten. Medan våra rubrikklasser (t.ex. .h1
– .h6
) gäller font-size
, font-weight
, och , gäller line-height
dessa verktyg endastfont-size
. Storleken för dessa verktyg matchar HTMLs rubrikelement, så när antalet ökar minskar deras storlek.
.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>
Anpassa dina tillgängliga font-size
s genom att modifiera $font-sizes
Sass-kartan.
Teckensnittsvikt och kursiv stil
Ändra snabbt font-weight
eller font-style
för text med dessa verktyg. font-style
verktyg förkortas som .fst-*
och font-weight
verktyg förkortas som .fw-*
.
Fettext.
Djärvare text (i förhållande till det överordnade elementet).
Normal vikt text.
Lättviktig text.
Lättare text (i förhållande till det överordnade elementet).
Kursiv text.
Text med normal typsnittsstil
<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>
Radavstånd
Ändra linjehöjden med .lh-*
hjälpmedel.
Detta är ett långt stycke skrivet för att visa hur linjehöjden på ett element påverkas av våra verktyg. Klasser tillämpas på själva elementet eller ibland det överordnade elementet. Dessa klasser kan anpassas efter behov med vårt verktygs-API.
Detta är ett långt stycke skrivet för att visa hur linjehöjden på ett element påverkas av våra verktyg. Klasser tillämpas på själva elementet eller ibland det överordnade elementet. Dessa klasser kan anpassas efter behov med vårt verktygs-API.
Detta är ett långt stycke skrivet för att visa hur linjehöjden på ett element påverkas av våra verktyg. Klasser tillämpas på själva elementet eller ibland det överordnade elementet. Dessa klasser kan anpassas efter behov med vårt verktygs-API.
Detta är ett långt stycke skrivet för att visa hur linjehöjden på ett element påverkas av våra verktyg. Klasser tillämpas på själva elementet eller ibland det överordnade elementet. Dessa klasser kan anpassas efter behov med vårt verktygs-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
Ändra ett urval till vår monospace-fontstack med .font-monospace
.
Det här är i monospace
<p class="font-monospace">This is in monospace</p>
Återställ färg
Återställ en text eller länks färg med .text-reset
, så att den ärver färgen från sin överordnade.
Avstängd text med en återställningslänk .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Text dekoration
Dekorera text i komponenter med textdekorationsklasser.
Den här texten har en rad under.
Den här texten har en rad som går igenom den.
Denna länk har tagit bort sin textdekoration<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;
Kartor
Verktyg i teckenstorlek genereras från denna karta, i kombination med vårt verktygs-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
Teckensnitt och textverktyg deklareras i vårt verktygs-API i scss/_utilities.scss
. Lär dig hur du använder 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
),