Tekstas

Įprastų teksto paslaugų, skirtų lygiavimui, vyniojimui, svoriui ir kt. valdyti, dokumentacija ir pavyzdžiai.

Šiame puslapyje

Teksto lygiavimas

Lengvai suderinkite tekstą su komponentais naudodami teksto lygiavimo klases. Norint išlygiuoti pradžią, pabaigą ir vidurį, galimos reaguojančios klasės, kuriose naudojami tie patys peržiūros srities pločio taškai, kaip ir tinklelio sistemoje.

Pradėti sulygiuotą tekstą visų dydžių peržiūros srityje.

Visų dydžių peržiūros srities tekstas sulygiuotas centre.

Užbaikite sulygiuotą tekstą visų dydžių peržiūros srityje.

Pradėkite lygiuotą tekstą peržiūros langeliuose, kurių dydis yra SM (mažas) arba didesnis.

Išlygiuotą tekstą pradėkite MD (vidutinio) arba platesnėse peržiūros srityse.

Pradėkite lygiuotą tekstą LG (didelės) arba platesnėse peržiūros srityse.

Išlygiuotą tekstą pradėkite XL (ypač didelės) arba platesnėse peržiūros srityse.

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>

Atminkite, kad nesuteikiame naudingumo klasių išlygintam tekstui. Nors estetiškai pagrįstas tekstas gali atrodyti patrauklesnis, dėl to žodžių tarpai tampa atsitiktinesni ir todėl sunkiau skaitomi.

Teksto vyniojimas ir perpildymas

Apvyniokite tekstą .text-wrapklase.

Šis tekstas turėtų būti apvyniotas.

html

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

Neleiskite tekstui įvynioti naudojant .text-nowrapklasę.

Šis tekstas turėtų perpildyti tėvą.

html

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

Žodžių pertrauka

Neleiskite ilgoms teksto eilutėms pažeisti jūsų komponentų išdėstymą, naudodami .text-breaknustatymą word-wrap: break-wordir word-break: break-word. Naudojame word-wrapvietoj įprastesnio, overflow-wrapkad palaikytume naršyklę, ir pridedame nebenaudojamą word-break: break-word, kad išvengtume problemų su lanksčiais konteineriais.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Atminkite, kad arabų kalba , kuri yra dažniausiai naudojama RTL kalba, negalima laužyti žodžių . Todėl .text-breakyra pašalintas iš mūsų RTL sudaryto CSS.

Teksto transformacija

Transformuokite tekstą į komponentus naudodami didžiųjų raidžių rašymo klases.

Tekstas mažosiomis raidėmis.

Tekstas didžiosiomis raidėmis.

Didžiosiomis raidėmis rašomas tekstas.

html

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

Atkreipkite dėmesį, kaip .text-capitalizepakeičiama tik pirmoji kiekvieno žodžio raidė, o kitų raidžių didžiosios ir mažosios raidės nepaveikiamos.

Šrifto dydis

Greitai pakeiskite font-sizetekstą. Nors mūsų antraštės klasės (pvz., .h1– .h6) taikomos font-size, font-weight, ir line-height, šios paslaugos taikomos tikfont-size . Šių paslaugų dydis atitinka HTML antraštės elementus, todėl skaičiui didėjant, jų dydis mažėja.

.fs-1 tekstas

.fs-2 tekstas

.fs-3 tekstas

.fs-4 tekstas

.fs-5 tekstas

.fs-6 tekstas

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>

Tinkinkite turimus font-sizes modifikuodami $font-sizesSass žemėlapį.

Šrifto svoris ir kursyvas

Greitai pakeiskite font-weightarba font-styletekstą naudodami šias priemones. font-stylekomunalinės paslaugos trumpinamos kaip, .fst-*o font-weightkomunalinės paslaugos – kaip .fw-*.

Paryškintas tekstas.

Paryškintas tekstas (palyginti su pirminiu elementu).

Pusiau paryškintas svorio tekstas.

Normalaus svorio tekstas.

Lengvas tekstas.

Lengvesnis tekstas (palyginti su pirminiu elementu).

Kursyvas tekstas.

Tekstas įprastu šrifto stiliumi

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>

Linijos aukštis

Pakeiskite linijos aukštį naudodami .lh-*komunalines paslaugas.

Tai ilga pastraipa, skirta parodyti, kaip elemento linijos aukštį veikia mūsų komunalinės paslaugos. Klasės taikomos pačiam elementui arba kartais pirminiam elementui. Šias klases galima pritaikyti pagal poreikį naudojant mūsų paslaugų 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>

Monospace

Pakeiskite pasirinkimą į mūsų monospace šriftų krūvą naudodami .font-monospace.

Tai yra monoerdvėje

html

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

Iš naujo nustatyti spalvą

Iš naujo nustatykite teksto arba nuorodos spalvą naudodami .text-reset, kad ji paveldėtų spalvą iš pirminės.

Nutildytas tekstas su nuoroda iš naujo .

html

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

Teksto dekoravimas

Papuoškite tekstą komponentuose naudodami teksto dekoravimo klases.

Po šiuo tekstu yra eilutė.

Šiame tekste yra eilutė.

Šios nuorodos teksto apdaila pašalinta

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

Kintamieji

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

Žemėlapiai

Šrifto dydžio priemonės generuojamos iš šio žemėlapio kartu su mūsų paslaugų 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
);

Utilities API

Šrifto ir teksto priemonės yra nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų 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
    ),