Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check

Dokumentacija i primjeri uobičajenih tekstualnih uslužnih programa za kontrolu poravnanja, prelamanja, težine i još mnogo toga.

Poravnanje teksta

Lako poravnajte tekst sa komponentama pomoću klasa poravnanja teksta. Za početno, krajnje i centralno poravnanje, dostupne su responzivne klase koje koriste iste prelomne tačke širine prikaza kao i sistem mreže.

Počnite poravnati tekst na svim veličinama okvira za prikaz.

Centrirano poravnat tekst na svim veličinama okvira za prikaz.

Kraj poravnati tekst na svim veličinama okvira za prikaz.

Započnite poravnati tekst na okvirima za prikaz veličine SM (mali) ili širi.

Počnite poravnati tekst na okvirima za prikaz veličine MD (srednje) ili šire.

Počnite poravnati tekst na okvirima za prikaz veličine LG (veliki) ili širim.

Počnite poravnati tekst na prozorima veličine XL (ekstra-veliki) ili širi.

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>
Imajte na umu da ne pružamo uslužne klase za opravdani tekst. Iako bi estetski opravdani tekst mogao izgledati privlačnije, čini razmak između riječi nasumičnim i stoga težim za čitanje.

Prelamanje teksta i prelijevanje

Prelomi tekst .text-wrapklasom.

Ovaj tekst bi trebao biti omotan.
html
<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Spriječite prelamanje teksta .text-nowrapklasom.

Ovaj tekst bi trebao prepuniti nadređeni.
html
<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Pauza riječi

Spriječite duge nizove teksta da razbiju izgled vaših komponenti pomoću .text-breakza postavljanje word-wrap: break-wordi word-break: break-word. Koristimo word-wrapumjesto uobičajenijeg overflow-wrapza širu podršku pretraživača i dodajemo zastarjeli word-break: break-wordkako bismo izbjegli probleme sa flex kontejnerima.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Imajte na umu da razbijanje riječi nije moguće u arapskom jeziku , koji je najčešće korišteni RTL jezik. Stoga .text-breakje uklonjen iz našeg RTL kompajliranog CSS-a.

Transformacija teksta

Transformirajte tekst u komponente sa klasama velikih slova.

Tekst malim slovima.

Tekst velikim slovima.

Veliki tekst.

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

Obratite pažnju na to kako .text-capitalizese mijenja samo prvo slovo svake riječi, ostavljajući velika i mala slova bez utjecaja.

Veličina slova

Brzo promijenite font-sizetekst. Dok se naše klase naslova (npr. .h1.h6) primjenjuju font-size, font-weight, i line-height, ovi uslužni programi primjenjuju se samofont-size . Veličina ovih uslužnih programa odgovara HTML elementima naslova, tako da kako se broj povećava, njihova veličina se smanjuje.

.fs-1 tekst

.fs-2 tekst

.fs-3 tekst

.fs-4 tekst

.fs-5 tekst

.fs-6 tekst

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 svoje dostupne font-sizes modificiranjem $font-sizesSass mape.

Težina fonta i kurziv

Brzo promijenite font-weightili font-styleteksta pomoću ovih uslužnih programa. font-stylekomunalne usluge su skraćene kao .fst-*, a font-weightkomunalne usluge su skraćene kao .fw-*.

Bold text.

Podebljani tekst težine (u odnosu na roditeljski element).

Polupodebljani tekst težine.

Tekst normalne težine.

Lagan tekst.

Lakši tekst (u odnosu na roditeljski element).

Kurziv tekst.

Tekst sa normalnim stilom fonta

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>

Visina linije

Promijenite visinu linije pomoću .lh-*uslužnih programa.

Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.

Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.

Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.

Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.

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

Promijenite odabir u naš skup jednorazrednih fontova pomoću .font-monospace.

Ovo je u monoprostoru

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

Resetuj boju

Poništite boju teksta ili veze pomoću .text-reset, tako da naslijedi boju od svog roditelja.

Isključen tekst sa linkom za resetovanje .

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

Dekoracija teksta

Ukrasite tekst u komponentama sa klasama dekoracije teksta.

Ovaj tekst ima liniju ispod.

Ovaj tekst ima liniju koja prolazi kroz njega.

Ovaj link ima uklonjen tekstualni ukras
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

Varijable

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

Mape

Pomoćni programi veličine fonta se generiraju iz ove mape, u kombinaciji s našim uslužnim API-jem.

$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

Pomoćni programi za font i tekst su deklarisani u našem API-ju za pomoćne programe u scss/_utilities.scss. Naučite kako koristiti uslužni API.

    "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
    ),