in English

Nkoma

Mikanda mpe bandakisa mpo na ba utilitaires ya makomi oyo bato mingi basalelaka mpo na kotambwisa boyokani, enveloppe, kilo, mpe mingi mosusu.

Na lokasa oyo

Kobongisa makomi

Facilement réaligner texte na ba composants na ba classes ya alignment ya texte. Mpo na boyokani ya ebandeli, nsuka, mpe katikati, bakelasi ya eyano ezali oyo esalelaka ba points de rupture ya bonene ya port de vue ndenge moko na système ya grille.

Bandá makomi oyo ezali na boyokani na bonene nyonso ya esika ya kotala.

Centre aligné texte na ba taille nionso ya port de vue.

Sukisa makomi oyo ezali na boyokani na bonene nyonso ya esika ya kotala.

Bandá makomi oyo ezali na boyokani na bisika ya kotala oyo ezali na bonene ya SM (ya moke) to ya monene koleka.

Bandá makomi oyo ezali na boyokani na bisika ya kotala oyo ezali na bonene ya MD (moyenne) to ya monene koleka.

Bandá makomi oyo ezali na boyokani na baporte ya kotala oyo ezali na bonene ya LG (ya monene) to ya monene koleka.

Bandá makomi oyo ezali na boyokani na bisika ya kotala oyo ezali na bonene ya XL (ya monene mingi) to ya monene koleka.

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>

Boyeba ete tozali kopesa ba classes ya utilité te mpo na texte justifié. Atako, na lolenge ya kitoko, makomi oyo mazali na ntina ekoki komonana kosepelisa mingi, ezali mpenza kosala ete bokeseni kati na maloba ezala na mbalakaka mpe na yango ezala mpasi mpo na kotánga yango.

Enveloppement ya texte na débordement

Zinga makomi na .text-wrapkelasi moko.

Mokanda oyo esengeli kozinga.

html

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

Pekisa makomi ekangama na .text-nowrapkelasi moko.

Mokanda oyo esengeli kotonda na moboti.

html

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

Bopanzani ya maloba

Pekisa ba chaînes milayi ya makomi ebuka layout ya ba composants na yo na kosalelaka .text-breakto set word-wrap: break-wordmpe word-break: break-word. Tosalelaka na word-wrapesika ya oyo emonanaka mingi overflow-wrapmpo na lisungi ya navigateur ya monene, mpe tobakisi oyo esili word-break: break-wordmpo na koboya mikakatano na ba conteneurs flex.

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

html

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

Yeba ete kobuka maloba ekoki kosalema te na Arabe , oyo ezali monɔkɔ ya RTL oyo basalelaka mingi. Yango wana .text-breakelongolami na CSS na biso oyo esangisi RTL.

Bobongoli makomi

Bobongola makomi na ba composants na ba classes ya makomi minene.

Makomi ya mike.

Makomi ya minene.

Mokanda oyo ekomami na CapitaliZed.

html

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

Talá ndenge .text-capitalizeoyo ebongoli kaka lɛtrɛ ya liboso ya liloba mokomoko, mpe etikaka likambo ya balɛtrɛ mosusu nyonso ezala na bopusi te.

Bonene ya makomi

Bobongola nokinoki na font-sizeya makomi. Atako bakelasi na biso ya motó ya likambo (ndakisa, .h1– .h6) esalelamaka font-size, font-weight, mpe line-height, ba utilitaires oyo esalemaka kakafont-size . Taille mpo na ba utilitaires oyo ekokani na ba éléments ya tête ya HTML, donc lokola nombre ezali komata, taille na yango ekiti.

.fs-1 makomi

.fs-2 makomi

.fs-3 makomi

.fs-4 makomi

.fs-5 makomi

.fs-6 makomi

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>

Personnaliser ba font-sizes na yo oyo ezali na ko modifier $font-sizescarte ya Sass.

Kilo ya makomi mpe makomi ya italike

Bobongola noki font-weightto font-styleya makomi na ba utilitaires oyo. font-styleba utilités ezali na mokuse lokola .fst-*mpe font-weightba utilités ezali na mokuse lokola .fw-*.

Makomi ya moindo makasi.

Texte ya poids ya gras (relatif na élément parent).

Texte de poids semi-gras.

Texte ya poids normal.

Texte ya kilo ya pɛpɛlɛ.

Texte ya poids léger (relatif na élément parent).

Makomi oyo ezali na italike.

Texte na style ya fonte normal

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>

Bolai ya ligne

Bobongola hauteur ya ligne na .lh-*ba utilités.

Oyo ezali paragraphe moko ya molai oyo ekomami mpo na kolakisa ndenge nini line-height ya élément moko ezali affecté na ba utilités na biso. Ba classes esalemaka na élément yango moko to tango mosusu na élément parent. Ba classes oyo ekoki kozala personnalisée ndenge esengeli na API na biso ya utilitaire.

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>

Monoespace moko

Bobongola boponi na ebele ya bafonte na biso ya monospace na .font-monospace.

Oyo ezali na monospace

html

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

Réinitialiser couleur

Bozongisi langi ya makomi to ya lien na .text-reset, mpo ete ezwa langi yango epai ya moboti na yango.

Texte oyo ekangami na mongongo na lien ya réinitialisation .

html

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

Décoration ya makomi

Décorer texte na ba composants na ba classes ya décoration ya texte.

Makomi oyo ezali na molɔngɔ na nse na yango.

Mokanda oyo ezali na molɔngɔ oyo ezali koleka na kati na yango.

Lien oyo ezali na décoration ya texte na yango oyo elongolami

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

Ba variables oyo ezali

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

Bakarte

Ba utilitaires ya taille ya fonte esalemi na carte oyo, na bosangisi na API ya ba utilitaires na biso.

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

API ya ba utilitaires

Ba utilitaires ya fonte na texte esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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