Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation

Documentation sy ohatra ho an'ny fampiasa lahatsoratra mahazatra hifehezana ny fampifanarahana, ny famonosana, ny lanja, ary ny maro hafa.

Fandrindrana lahatsoratra

Ampifanaraho mora amin'ny singa miaraka amin'ny kilasy fampifanarahana lahatsoratra. Ho an'ny fampifanarahana ny fanombohana, ny fiafarana ary ny afovoany, dia misy kilasy mandray andraikitra izay mampiasa teboka fiatoana mitovy amin'ny sakan'ny seranan-tsambo amin'ny rafitry ny grid.

Atombohy ny lahatsoratra mifanandrify amin'ny haben'ny seranan-tsambo rehetra.

Lahatsoratra mirindra afovoany amin'ny haben'ny seranan-tsambo rehetra.

Atsaharo ny lahatsoratra mifanandrify amin'ny haben'ny seranan-tsambo rehetra.

Atombohy ny lahatsoratra mifanandrify amin'ny seranan-tsambo mirefy SM (kely) na midadasika kokoa.

Atombohy ny lahatsoratra mifanandrify amin'ny seranan-tsambo mirefy MD (medium) na midadasika kokoa.

Atombohy ny lahatsoratra mifanandrify amin'ny LG (lehibe) na midadasika kokoa.

Atombohy ny lahatsoratra mifanandrify amin'ny seranan-tsambo mirefy XL (lehibe kokoa) na lehibe kokoa.

<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>
Mariho fa tsy manome kilasy ilaina ho an'ny lahatsoratra voamarina izahay. Na dia mety ho manintona kokoa aza ny lahatsoratra ara-estetika, dia mahatonga ny elanelan'ny teny ho kisendrasendra ka sarotra ny mamaky azy.

Famonoana lahatsoratra sy fihoaram-pefy

Fonosy lahatsoratra miaraka amin'ny .text-wrapkilasy iray.

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

Sakano ny lahatsoratra tsy hofonosina amin'ny .text-nowrapkilasy.

Ity lahatsoratra ity dia tokony hihoatra ny ray aman-dreny.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Vaky teny

Sakano ny andian-tsoratra lava tsy handrava ny firafitry ny singanao amin'ny fampiasana .text-breakny fametrahana word-wrap: break-wordsy word-break: break-word. Ampiasainay word-wrapho solon'ny mahazatra overflow-wrapkokoa ho an'ny fanohanan'ny navigateur midadasika kokoa, ary ampiana ny efa lany andro word-break: break-wordmba hisorohana ny olana amin'ny container flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Mariho fa tsy azo atao ny mamaky teny amin'ny teny Arabo , izay fiteny RTL be mpampiasa indrindra. Noho izany .text-breakdia nesorina tao amin'ny CSS natambatray RTL.

Fiovan'ny soratra

Ovay ny lahatsoratra amin'ny singa miaraka amin'ny kilasy fanaovana sora-baventy.

Lahatsoratra kely.

Lahatsoratra lehibe.

CapiTaliZed lahatsoratra.

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

Mariho ny fomba .text-capitalizehanovana ny litera voalohany amin'ny teny tsirairay, ka tsy hisy fiantraikany amin'ny toetry ny litera hafa.

Haben'ny endritsoratra

Hanova haingana ny font-sizelahatsoratra. Raha mihatra ny kilasy lohatenintsika (oh: .h1.h6) font-size, font-weight, ary , dia mihatra ihanyline-height ireo fitaovana ireo . Mifanaraka amin'ny singa lohatenin'ny HTML ny habe ho an'ireo fitaovana ireo, ka rehefa mitombo ny isa dia mihena ny habeny.font-size

.fs-1 lahatsoratra

.fs-2 lahatsoratra

.fs-3 lahatsoratra

.fs-4 lahatsoratra

.fs-5 lahatsoratra

.fs-6 lahatsoratra

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

Amboary ny font-sizes misy anao amin'ny fanovana ny $font-sizessarintany Sass.

Lanja sora-baventy sy sora-mandry

Hanova haingana ny font-weightna font-styleny lahatsoratra miaraka amin'ireo fitaovana ireo. font-styleny utility dia nohafohezina ho .fst-*ary ny font-weightutility dia nohafohezina ho .fw-*.

Lahatsoratra matevina.

Lahatsoratra mavesa-danja kokoa (mifandray amin'ny singa ray aman-dreny).

Lahatsoratra lanja mahazatra.

Lahatsoratra maivana.

Lahatsoratra maivana kokoa (mifandray amin'ny singa ray aman-dreny).

Lahatsoratra italika.

Lahatsoratra misy endri-tsoratra mahazatra

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</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>

Haavon'ny tsipika

Hanova ny haavon'ny tsipika miaraka amin'ny .lh-*fitaovana.

Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.

Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.

Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.

Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.

<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

Ovay ny safidy ho amin'ny fitambaran'ny endritsoratra monospace miaraka amin'ny .font-monospace.

Ao amin'ny monospace izany

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

Avereno ny loko

Avereno ny lokon'ny lahatsoratra na rohy amin'ny .text-reset, mba handovany ny loko avy amin'ny ray aman-dreniny.

Lahatsoratra mangina miaraka amin'ny rohy famerenana .

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

Haingo soratra

Haingo lahatsoratra amin'ny singa miaraka amin'ny kilasy haingo lahatsoratra.

Ity lahatsoratra ity dia misy tsipika eo ambaniny.

Misy tsipika mamakivaky azy io lahatsoratra io.

Ity rohy ity dia nesorina ny haingo lahatsoratra
<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

hiovaova

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-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-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;

Maps

Ny fampiasa amin'ny endritsoratra dia novokarina avy amin'ity sari-tany ity, miaraka amin'ny API fampiasantsika.

$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

Ny endri-tsoratra sy ny endri-tsoratra dia ambara ao amin'ny utility API ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility API.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-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,
        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
    ),