Tekst
Dokumentatsioon ja näited tavapäraste tekstiutiliitide jaoks, et juhtida joondamist, mähkimist, kaalu ja palju muud.
Teksti joondamine
Joondage tekst hõlpsalt komponentideks teksti joondusklasside abil. Alguse, lõpu ja keskele joondamiseks on saadaval reageerivad klassid, mis kasutavad samu vaateava laiuse katkestuspunkte kui ruudustikusüsteem.
Joondatud teksti alustamine kõigis vaateava suurustes.
Keskele joondatud tekst kõigis vaateava suurustes.
Lõpeta joondatud tekst kõigis vaateava suurustes.
Joondatud teksti alustamine vaateavadest, mille suurus on SM (väike) või laiem.
Joondatud teksti alustamine vaateavadest, mille suurus on MD (keskmine) või laiem.
Alustage joondatud teksti LG (suure) või laiema suurusega vaateavadel.
Alusta joondatud teksti XL (eriti suur) või laiematest vaateavadest.
<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>
Teksti murdmine ja ületäitumine
Teksti murdmine .text-wrap
klassiga.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
.text-nowrap
Vältige klassiga teksti murdmist .
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Sõna murd
Vältige pikkadel tekstistringidel komponentide paigutust rikkumast, kasutades .text-break
seadistusi word-wrap: break-word
ja word-break: break-word
. Laiema brauseri toe jaoks kasutame word-wrap
tavalisema asemel ja lisame aegunud , et vältida probleeme paindlike konteineritega.overflow-wrap
word-break: break-word
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
eemaldatakse see meie RTL-i koostatud CSS-ist.
Teksti teisendus
Teisendage tekst komponentideks teksti suurtähtede kasutamise klassidega.
Väiketähtedega tekst.
Suurtähtedega tekst.
Suurtähtedega tekst.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Pange tähele, kuidas .text-capitalize
muudab ainult iga sõna esimest tähte, jättes muude tähtede suur- ja väiketähtede muutmata.
Fondi suurus
Muutke teksti kiiresti font-size
. Kuigi meie pealkirjaklassid (nt .h1
– .h6
) kehtivad font-size
, font-weight
ja , kehtivad line-height
need utiliidid ainultfont-size
. Nende utiliitide suuruse määramine ühtib HTML-i pealkirja elementidega, nii et arvu suurenedes nende suurus väheneb.
.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>
Kohandage oma saadaolevaid font-size
s-i, muutes $font-sizes
Sassi kaarti.
Fondi kaal ja kaldkiri
Nende utiliitidega saate kiiresti muuta teksti font-weight
või font-style
. font-style
utiliidid on lühendatud kujul .fst-*
ja font-weight
utiliidid on lühendatud kui .fw-*
.
Paks tekst.
Paksem kaal tekst (võrreldes põhielemendiga).
Normaalse kaaluga tekst.
Kerge tekst.
Kergema kaaluga tekst (suhtes põhielemendiga).
Kaldkiri.
Tavalise kirjastiiliga tekst
<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>
Reakõrgus
Muutke liini kõrgust .lh-*
utiliitidega.
See on pikk lõik, mis on kirjutatud näitamaks, kuidas meie utiliidid mõjutavad elemendi joone kõrgust. Klassid rakendatakse elemendile endale või mõnikord ka emaelemendile. Neid klasse saab vastavalt vajadusele kohandada meie utiliidi API-ga.
See on pikk lõik, mis on kirjutatud näitamaks, kuidas meie utiliidid mõjutavad elemendi joone kõrgust. Klassid rakendatakse elemendile endale või mõnikord ka emaelemendile. Neid klasse saab vastavalt vajadusele kohandada meie utiliidi API-ga.
See on pikk lõik, mis on kirjutatud näitamaks, kuidas meie utiliidid mõjutavad elemendi joone kõrgust. Klassid rakendatakse elemendile endale või mõnikord ka emaelemendile. Neid klasse saab vastavalt vajadusele kohandada meie utiliidi API-ga.
See on pikk lõik, mis on kirjutatud näitamaks, kuidas meie utiliidid mõjutavad elemendi joone kõrgust. Klassid rakendatakse elemendile endale või mõnikord ka emaelemendile. Neid klasse saab vastavalt vajadusele kohandada meie utiliidi API-ga.
<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>
Monoruum
Muutke valik meie monospace'i fondivirnaks, kasutades .font-monospace
.
See on monoruumis
<p class="font-monospace">This is in monospace</p>
Lähtesta värv
Lähtestage teksti või lingi värv nupuga .text-reset
, nii et see pärib värvi oma emalt.
Vaigistatud tekst lähtestamislingiga .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Teksti kaunistamine
Komponentide teksti kaunistamine tekstide kaunistamise klassidega.
<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
Muutujad
// 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;
Kaardid
Kirjasuuruses utiliidid genereeritakse sellelt kaardilt koos meie utiliitide API-ga.
$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
);
Utiliidide API
Fondi- ja tekstiutiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss
. Siit saate teada, kuidas utiliitide API-t kasutada.
"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
),