Tèks

Dokimantasyon ak egzanp pou itilite tèks komen pou kontwole aliyman, anbalaj, pwa, ak plis ankò.

Nan paj sa a

Tèks aliyman

Fasil reyaliye tèks nan eleman ak klas aliyman tèks. Pou kòmanse, fen, ak sant aliyman, klas ki reponn yo disponib ki sèvi ak menm pwen rupture lajè viewport ak sistèm kadriyaj la.

Kòmanse tèks ki aliyen sou tout gwosè vi yo.

Santre tèks ki aliye sou tout gwosè fenèt yo.

Fini tèks ki aliye sou tout gwosè fenèt yo.

Kòmanse tèks ki aliye sou fenèt gwosè SM (ti) oswa pi laj.

Kòmanse tèks ki aliye sou fenèt ki gwosè MD (mwayen) oswa pi laj.

Kòmanse tèks ki aliye sou fenèt ki gen gwosè LG (gwo) oswa pi laj.

Kòmanse tèks ki aliman sou fenèt ki gwosè XL (siplemantè) oswa pi laj.

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>

Remake byen ke nou pa bay klas itilite pou tèks jistifye. Pandan ke, estetikman, tèks jistifye ta ka sanble pi atiran, li fè espas mo yo pi o aza epi kidonk pi difisil pou li.

Anbalaj tèks ak debòde

Wrap tèks ak yon .text-wrapklas.

Tèks sa a ta dwe vlope.

html

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

Anpeche tèks anvlope ak yon .text-nowrapklas.

Tèks sa a ta dwe debòde paran an.

html

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

Pawòl kraze

Anpeche yon seri tèks ki long kase layout eleman ou yo lè w itilize .text-breakpou mete word-wrap: break-wordak word-break: break-word. Nou itilize word-wrapolye pou yo pi komen overflow-wrappou sipò navigatè pi laj, epi ajoute depreche word-break: break-worda pou evite pwoblèm ak resipyan fleksib.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Remake byen ke kraze mo pa posib nan arab , ki se lang RTL ki pi itilize a. Se poutèt sa .text-breakyo retire nan RTL nou an konpile CSS.

Transfòmasyon tèks

Transfòme tèks nan eleman ak klas lèt majiskil.

Tèks miniskil.

Tèks majiskil.

html

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

Remake byen ki jan .text-capitalizesèlman chanje premye lèt la nan chak mo, kite ka a nan nenpòt lòt lèt pa afekte.

Gwosè font

Byen vit chanje font-sizetèks la. Pandan ke klas tit nou yo (pa egzanp, .h1– .h6) aplike font-size, font-weight, ak line-height, sèvis piblik sa yo aplike sèlmanfont-size . Dimansyon pou sèvis piblik sa yo matche ak eleman tit HTML yo, kidonk si kantite a ap ogmante, gwosè yo diminye.

.fs-1 tèks

.fs-2 tèks

.fs-3 tèks

.fs-4 tèks

.fs-5 tèks

.fs-6 tèks

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>

Pèsonalize sa ki disponib font-sizeyo lè w modifye $font-sizeskat Sass la.

Pwa font ak italik

Byen vit chanje font-weightoswa font-stylenan tèks ak sèvis piblik sa yo. font-stylesèvis piblik yo abreje kòm .fst-*ak font-weightsèvis piblik yo abreje kòm .fw-*.

Tèks fonse.

Tèks ki pi gra (an rapò ak eleman paran an).

Tèks pwa semibold.

Tèks pwa nòmal.

Tèks pwa limyè.

Tèks ki pi lejè (an rapò ak eleman paran an).

Tèks italik.

Tèks ak style font nòmal

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>

Wotè liy

Chanje wotè liy lan ak .lh-*sèvis piblik.

Sa a se yon paragraf long ekri pou montre kouman liy-wotè yon eleman afekte pa sèvis piblik nou yo. Klas yo aplike nan eleman nan tèt li oswa pafwa eleman paran an. Klas sa yo ka Customized jan sa nesesè ak API sèvis piblik nou an.

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

Chanje yon seleksyon an pil monospace nou an avèk .font-monospace.

Sa a se nan monospace

html

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

Reyajiste koulè

Reyajiste yon tèks oswa koulè lyen ak .text-reset, pou li eritye koulè a nan men paran li.

Tèks muet ak yon lyen reset .

html

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

Tèks dekorasyon

Dekore tèks nan eleman ak klas dekorasyon tèks.

Tèks sa a gen yon liy anba li.

Tèks sa a gen yon liy k ap pase ladan l.

Lyen sa a gen dekorasyon tèks li yo retire

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

Varyab

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

Kat

Yo pwodwi sèvis piblik gwosè polis apati kat sa a, ansanm ak API sèvis piblik nou an.

$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
);

Itilite API

Polis ak tèks sèvis piblik yo deklare nan API sèvis piblik nou an nan scss/_utilities.scss. Aprann kijan pou itilize API sèvis piblik yo.

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