Tekst

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

Na ovoj stranici

Poravnanje teksta

Jednostavno poravnajte tekst s komponentama pomoću klasa za poravnanje teksta. Za početno, krajnje i središnje poravnanje dostupne su responzivne klase koje koriste iste prijelomne točke širine okvira za prikaz kao i sustav rešetki.

Početak poravnatog teksta na svim veličinama okvira za prikaz.

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

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

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

Započnite poravnati tekst na prozorima veličine MD (srednje) ili šire.

Započnite poravnati tekst na prozorima veličine LG (veliki) ili širi.

Započnite poravnati tekst na prozorima veličine XL (iznimno 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 nudimo klase korisnosti za opravdani tekst. Iako, estetski, opravdani tekst može izgledati privlačnije, on čini razmake između riječi nasumičnijima i stoga ih je teže čitati.

Prelamanje i prelijevanje teksta

Prelamanje teksta .text-wrapklasom.

Ovaj tekst bi trebao biti preloman.

html

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

Spriječite prelamanje teksta s .text-nowrapklasom.

Ovaj tekst trebao bi prelaziti nadređeni.

html

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

Prijelom riječi

Spriječite duge nizove teksta da naruše raspored vaših komponenti pomoću .text-breakpostavki word-wrap: break-wordi word-break: break-word. Koristimo word-wrapumjesto uobičajenog overflow-wrapza širu podršku preglednika i dodajemo zastarjeli word-break: break-wordkako bismo izbjegli probleme s fleksibilnim spremnicima.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Imajte na umu da razbijanje riječi nije moguće na arapskom , koji je najčešće korišteni RTL jezik. Stoga .text-breakse uklanja iz našeg RTL kompiliranog CSS-a.

Transformacija teksta

Transformirajte tekst u komponentama s klasama velikih slova u tekstu.

Tekst ispisan malim slovima.

Tekst napisan velikim slovima.

Tekst pisan velikim slovima.

html

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

Imajte na umu kako .text-capitalizese mijenja samo prvo slovo svake riječi, ostavljajući velika i mala slova nepromijenjena.

Veličina fonta

Brzo promijenite font-sizetekst. Dok se naše klase naslova (npr. .h1– .h6) primjenjuju font-size, font-weight, i line-height, ovi se alati primjenjuju samofont-size . Veličina ovih uslužnih programa odgovara elementima naslova HTML-a, pa kako se broj povećava, njihova se veličina 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 mijenjanjem $font-sizeskarte Sass.

Težina fonta i kurziv

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

Podebljan tekst.

Podebljani tekst (u odnosu na nadređeni element).

Polupodebljani tekst težine.

Tekst normalne težine.

Lagan tekst.

Lakši tekst (u odnosu na nadređeni element).

Kurziv teksta.

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

.lh-*Pomoću uslužnih programa promijenite visinu linije .

Ovo je dugačak odlomak napisan da pokaže kako na visinu retka elementa utječu naši pomoćni programi. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase mogu se prilagoditi prema potrebi s našim uslužnim API-jem.

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š hrp monospace fontova pomoću .font-monospace.

Ovo je u monoprostoru

html

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

Resetiraj boju

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

Prigušeni tekst s vezom za poništavanje .

html

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

Dekoracija teksta

Ukrasite tekst u komponentama s klasama ukrašavanja teksta.

Ovaj tekst ima crtu ispod sebe.

Kroz ovaj tekst prolazi redak.

Ovoj vezi uklonjen je 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;

Karte

Pomoćni programi za veličinu fonta generiraju se iz ove karte, u kombinaciji s našim API-jem za pomoćne programe.

$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 pomoćne programe

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

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