Teksts

Dokumentācija un piemēri parastajām teksta utilītprogrammām, lai kontrolētu līdzināšanu, ietīšanu, svaru un daudz ko citu.

Šajā lapā

Teksta izlīdzināšana

Viegli pielāgojiet tekstu komponentiem, izmantojot teksta līdzināšanas klases. Sākuma, beigu un centra līdzināšanai ir pieejamas atsaucīgas klases, kurās tiek izmantoti tie paši skata loga platuma pārtraukuma punkti kā režģa sistēmai.

Sāciet līdzināto tekstu visos skata loga izmēros.

Centrā līdzinātais teksts visos skata loga izmēros.

Beidziet līdzināto tekstu visos skata loga izmēros.

Sāciet līdzināto tekstu skata logos, kuru izmērs ir SM (mazs) vai plašāks.

Sāciet līdzināto tekstu skata logos, kuru izmērs ir MD (vidējs) vai plašāks.

Sāciet līdzināto tekstu skata logos, kuru izmērs ir LG (liels) vai plašāks.

Sāciet līdzināto tekstu skata logos, kuru izmērs ir XL (īpaši liels) vai plašāks.

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>

Ņemiet vērā, ka attaisnotajam tekstam mēs nenodrošinām lietderības klases. Lai gan estētiski pamatots teksts varētu izskatīties pievilcīgāks, tas padara vārdu atstarpi nejaušāku un tāpēc grūtāk lasāmu.

Teksta aplaušana un pārpilde

Aplauzt tekstu ar .text-wrapklasi.

Šim tekstam vajadzētu aplaupīt.

html

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

Novērst teksta aplauzšanu ar .text-nowrapklasi.

Šim tekstam vajadzētu pārpildīt vecāku.

html

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

Vārdu pārtraukums

Novērsiet, ka garas teksta virknes sabojā jūsu komponentu izkārtojumu, izmantojot .text-breakiestatījumus word-wrap: break-wordun word-break: break-word. Plašākam pārlūkprogrammas atbalstam mēs izmantojam word-wrapbiežāk sastopamo overflow-wrap, un pievienojam novecojušo word-break: break-word, lai izvairītos no problēmām ar elastīgiem konteineriem.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Ņemiet vērā, ka vārdu laušana nav iespējama arābu valodā , kas ir visbiežāk izmantotā RTL valoda. Tāpēc .text-breaktiek noņemts no mūsu RTL apkopotā CSS.

Teksta pārveidošana

Pārveidojiet tekstu komponentos ar teksta lielo burtu lietojuma klasēm.

Teksts ar mazajiem burtiem.

Teksts ar lielajiem burtiem.

Lielajiem burtiem rakstīts teksts.

html

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

Ņemiet vērā, kā .text-capitalizetiek mainīts tikai katra vārda pirmais burts, neietekmējot pārējo burtu reģistru.

Fonta izmērs

Ātri mainiet font-sizetekstu. Lai gan mūsu virsrakstu klases (piem., .h1– .h6) attiecas uz font-size, font-weightun line-height, šīs utilītas attiecas tikai uz font-size. Šo utilītu lielums atbilst HTML virsraksta elementiem, tāpēc, palielinoties skaitam, to lielums samazinās.

.fs-1 teksts

.fs-2 teksts

.fs-3 teksts

.fs-4 teksts

.fs-5 teksts

.fs-6 teksts

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>

Pielāgojiet pieejamos font-sizes, modificējot $font-sizesSass karti.

Fonta svars un slīpraksts

Ātri mainiet tekstu font-weightvai font-style, izmantojot šīs utilītas. font-styleutilities tiek saīsināti kā .fst-*un font-weightutilities tiek saīsināti kā .fw-*.

Treknrakstā teksts.

Treknāks teksta svars (attiecībā pret vecākelementu).

Daļēji trekns svara teksts.

Parasta svara teksts.

Viegls teksts.

Vieglāks teksts (attiecībā pret vecākelementu).

Teksts slīprakstā.

Teksts ar parastu fonta stilu

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>

Līnijas augstums

Mainiet līnijas augstumu ar .lh-*utilītprogrammām.

Šī ir gara rindkopa, kas uzrakstīta, lai parādītu, kā elementa līnijas augstumu ietekmē mūsu utilītas. Klases tiek piemērotas pašam elementam vai dažreiz vecākajam elementam. Šīs klases var pielāgot pēc vajadzības, izmantojot mūsu utilīta 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>

Monotelpa

Mainiet atlasi uz mūsu monospace fontu kopu ar .font-monospace.

Tas ir monotelpā

html

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

Atiestatīt krāsu

Atiestatiet teksta vai saites krāsu, izmantojot .text-reset, lai tā mantotu krāsu no sava vecāka.

Izslēgts teksts ar atiestatīšanas saiti .

html

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

Teksta dekorēšana

Izrotāt tekstu komponentos ar teksta dekorēšanas klasēm.

Zem šī teksta ir rindiņa.

Šim tekstam ir rindiņa.

Šai saitei ir noņemts teksta noformējums

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

Mainīgie lielumi

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

Kartes

Fonta lieluma utilītas tiek ģenerētas no šīs kartes kopā ar mūsu utilītu 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

Fontu un teksta utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss. Uzziniet, kā izmantot utilītu 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
    ),