Besedilo

Dokumentacija in primeri za običajne pripomočke za besedilo za nadzor poravnave, ovijanja, teže in več.

Na tej strani

Poravnava besedila

Preprosto ponovno poravnajte besedilo s komponentami z razredi za poravnavo besedila. Za začetno, končno in sredinsko poravnavo so na voljo odzivni razredi, ki uporabljajo iste prelomne točke širine vidnega polja kot sistem mreže.

Začni poravnano besedilo na vseh velikostih vidnega polja.

Sredinsko poravnano besedilo na vseh velikostih vidnega polja.

Konec poravnanega besedila na vseh velikostih vidnega polja.

Začnite poravnano besedilo na pogledih velikosti SM (majhno) ali širše.

Začnite poravnano besedilo na pogledih velikosti MD (srednje) ali širše.

Začnite poravnano besedilo na zaslonih velikosti LG (veliko) ali širše.

Začnite poravnano besedilo na pogledih velikosti XL (zelo veliko) ali širših.

html

<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>

Upoštevajte, da ne zagotavljamo uporabnih razredov za poravnano besedilo. Čeprav je estetsko poravnano besedilo morda videti privlačnejše, so razmiki med besedami bolj naključni in zato težje berljivi.

Prelivanje in prelivanje besedila

Prelomi besedilo z .text-wraprazredom.

To besedilo bi moralo prelomiti.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Preprečite prelivanje besedila z .text-nowraprazredom.

To besedilo bi moralo presegati nadrejeno.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Prelom besed

Preprečite, da bi dolgi nizi besedila porušili postavitev vaših komponent, tako da uporabite .text-breakza nastavitev word-wrap: break-wordin word-break: break-word. word-wrapNamesto bolj običajnega uporabljamo za overflow-wrapširšo podporo brskalnika in dodajamo zastarelo word-break: break-word, da se izognemo težavam s vsebniki flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Upoštevajte, da razbijanje besed ni mogoče v arabščini , ki je najpogosteje uporabljen jezik RTL. Zato .text-breakje odstranjen iz našega RTL prevedenega CSS.

Preoblikovanje besedila

Pretvorite besedilo v komponentah z razredi za uporabo velikih črk v besedilu.

Besedilo z malimi črkami.

Besedilo z velikimi črkami.

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Upoštevajte, kako .text-capitalizese spremeni samo prva črka vsake besede, pri čemer velike in male črke drugih črk ostanejo nespremenjene.

Velikost pisave

Hitro spremenite font-sizebesedilo. Medtem ko naši razredi naslovov (npr. .h1– .h6) veljajo font-size, font-weight, in line-height, ti pripomočki veljajo lefont-size . Velikost teh pripomočkov se ujema z elementi naslova HTML, tako da se z večanjem števila zmanjšuje njihova velikost.

.fs-1 besedilo

.fs-2 besedilo

.fs-3 besedilo

.fs-4 besedilo

.fs-5 besedilo

.fs-6 besedilo

html

<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>

Prilagodite razpoložljive font-sizes tako, da spremenite $font-sizeszemljevid Sass.

Teža pisave in poševni tisk

Hitro spremenite font-weightali font-stylebesedila s temi pripomočki. font-stylepripomočki so skrajšani kot .fst-*in font-weightpripomočki so skrajšani kot .fw-*.

Krepko besedilo.

Krepkejša teža besedila (glede na nadrejeni element).

Polkrepko besedilo teže.

Normalna teža besedila.

Majhno besedilo.

Lažje besedilo (glede na nadrejeni element).

Ležeče besedilo.

Besedilo z običajnim slogom pisave

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</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>

Višina vrstice

Spremenite višino vrstice s .lh-*pripomočki.

To je dolg odstavek, napisan za prikaz, kako naši pripomočki vplivajo na višino vrstice elementa. Razredi se uporabljajo za sam element ali včasih za nadrejeni element. Te razrede je mogoče po potrebi prilagoditi z našim API-jem pripomočka.

html

<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

Spremenite izbor v naš sklad enoprostornih pisav z .font-monospace.

To je v monoprostorju

html

<p class="font-monospace">This is in monospace</p>

Ponastavi barvo

Ponastavite barvo besedila ali povezave z .text-reset, tako da podeduje barvo od starša.

Utišano besedilo s povezavo za ponastavitev .

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Dekoracija besedila

Okrasite besedilo v komponentah z razredi za dekoracijo besedila.

Pod tem besedilom je črta.

Skozi to besedilo gre vrstica.

Tej povezavi je odstranjen besedilni okras

html

<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

Spremenljivke

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, 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(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$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-semibold:        600;
$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;

Zemljevidi

Pripomočki za velikost pisave so ustvarjeni iz tega zemljevida v kombinaciji z našim API-jem za pripomočke.

$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
);

API za pripomočke

Pripomočki za pisave in besedila so navedeni v našem API-ju za pripomočke v scss/_utilities.scss. Naučite se uporabljati API pripomočkov.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$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,
        semibold: $font-weight-semibold,
        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
    ),