Teksto

Dokumentado kaj ekzemploj por komunaj tekstaj utilecoj por kontroli vicigon, envolvadon, pezon kaj pli.

Sur ĉi tiu paĝo

Teksta vicigo

Facile realigu tekston al komponantoj kun tekstaj vicigoklasoj. Por komenco, fino kaj centra vicigo, respondaj klasoj estas disponeblaj, kiuj uzas la samajn vidfenejlarĝajn rompopunktojn kiel la kradsistemo.

Komencu vicigitan tekston sur ĉiuj grandecoj de vidpunkto.

Centri vicigitan tekston sur ĉiuj grandoj de vidpunkto.

Finu vicigitan tekston sur ĉiuj grandecoj de vidpunkto.

Komencu vicigitan tekston sur vidfenestroj SM (malgrandaj) aŭ pli larĝaj.

Komencu vicigitan tekston sur vidfenestroj MD (mezaj) aŭ pli larĝaj.

Komencu vicigitan tekston sur vidfenestroj grandecoj LG (grandaj) aŭ pli larĝaj.

Komencu vicigitan tekston sur vidfenestroj XL (ekstregrandaj) aŭ pli larĝaj.

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>

Notu, ke ni ne provizas utilajn klasojn por pravigita teksto. Dum, estetike, pravigita teksto povus aspekti pli alloga, ĝi faras vortinterspacon pli hazarda kaj tial pli malfacile legebla.

Teksto envolvado kaj superfluo

Envolvi tekston kun .text-wrapklaso.

Ĉi tiu teksto devus envolvi.

html

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

Malhelpi tekston envolvi kun .text-nowrapklaso.

Ĉi tiu teksto devus superflui la gepatron.

html

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

Vortrompo

Malhelpu longajn tekstoĉenojn rompi la aranĝon de viaj komponantoj per uzado .text-breakde agordi word-wrap: break-wordkaj word-break: break-word. Ni uzas word-wrapanstataŭ la pli oftan overflow-wrappor pli larĝa retumila subteno, kaj aldonas la malrekomenditan word-break: break-wordpor eviti problemojn kun fleksaj ujoj.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Notu, ke rompi vortojn ne eblas en la araba , kiu estas la plej uzata RTL-lingvo. Tial .text-breakestas forigita de nia RTL kompilita CSS.

Teksto transformo

Transformu tekston en komponantojn kun klasoj de tekstaj majuskloj.

Minuskla teksto.

Majuskla teksto.

Majuskigita teksto.

html

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

Notu kiel .text-capitalizenur ŝanĝas la unuan literon de ĉiu vorto, lasante la majuskon de iuj aliaj literoj netuŝita.

Grando de tiparo

Rapide ŝanĝu la font-sizetekston. Dum niaj titoloj klasoj (ekz., .h1– .h6) validas font-size, font-weight, kaj line-height, ĉi tiuj utilecoj validas nurfont-size . Dimensioj por ĉi tiuj utilecoj kongruas kun la titolelementoj de HTML, do kiam la nombro pliiĝas, ilia grandeco malpliiĝas.

.fs-1 teksto

.fs-2 teksto

.fs-3 teksto

.fs-4 teksto

.fs-5 teksto

.fs-6 teksto

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>

Agordu viajn disponeblajn font-sizes modifante la $font-sizesSass-mapon.

Tiparopezo kaj kursivo

Rapide ŝanĝu la font-weightaŭ font-stylede teksto per ĉi tiuj iloj. font-styleutilecoj estas mallongigitaj kiel .fst-*kaj font-weightutilecoj estas mallongigitaj kiel .fw-*.

Grada teksto.

Pli grasa peza teksto (rilate al la gepatra elemento).

Duongrasa peza teksto.

Normala peza teksto.

Malpeza teksto.

Pli malpeza teksto (rilate al la gepatra elemento).

Kursiva teksto.

Teksto kun normala tiparostilo

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>

Linia alteco

Ŝanĝu la linialton per .lh-*utilecoj.

Ĉi tio estas longa alineo skribita por montri kiel la linio-alteco de elemento estas tuŝita de niaj utilecoj. Klasoj estas aplikataj al la elemento mem aŭ foje al la gepatra elemento. Ĉi tiuj klasoj povas esti personecigitaj laŭbezone per nia utileca API.

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>

Monospaco

Ŝanĝu elekton al nia monospaca tiparstako per .font-monospace.

Ĉi tio estas en monospaco

html

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

Restarigi koloron

Restarigu la koloron de teksto aŭ ligilo per .text-reset, tiel ke ĝi heredu la koloron de sia gepatro.

Silentita teksto kun rekomencigita ligilo .

html

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

Teksta ornamado

Ornamu tekston en komponantoj per tekstornamaj klasoj.

Ĉi tiu teksto havas linion sub ĝi.

Ĉi tiu teksto havas linion tra ĝi.

Ĉi tiu ligilo havas sian tekstan ornamon forigita

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

Variabloj

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

Mapoj

Tipargrandaj iloj estas generitaj de ĉi tiu mapo, kombine kun niaj iloj 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
);

Utilaĵoj API

Tiparo- kaj tekstaj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn 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
    ),