Masalabolo

Sɛbɛnw ni misaliw sɛbɛnni nafama nafamaw kama walasa ka ɲɔgɔndan, sirili, girinya ani fɛn wɛrɛw kɔlɔsi.

Nin ɲɛ in kan

Sɛbɛnniw labɛncogo

Sɛbɛnw labɛncogo kura nɔgɔya la ka kɛɲɛ ni yɔrɔw ye minnu bɛ sɛbɛnniw labɛncogo kalanw na. Daminɛ, laban ani cɛmancɛ ɲɔgɔndan kama, jaabi kalanw bɛ sɔrɔ minnu bɛ baara kɛ ni filɛlikɛyɔrɔ bonya kariyɔrɔ kelenw ye ni grid system ye.

Sɛbɛnni minnu bɛ ɲɔgɔn kan, olu daminɛ filɛlikɛyɔrɔ hakɛw bɛɛ kan.

Cɛmancɛ sɛbɛnni minnu bɛ ɲɔgɔn kan filɛlikɛyɔrɔ hakɛw bɛɛ kan.

Sɛbɛn minnu bɛ ɲɔgɔn kan, olu laban filɛlikɛlanw hakɛw bɛɛ kan.

Sɛbɛn minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye SM (misɛnnin) ye walima minnu ka bon.

Sɛbɛn minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye MD (cɛmancɛ) ye walima minnu ka bon.

Sɛbɛn minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye LG (ba) ye walima minnu ka bon.

Sɛbɛnni minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye XL ye (extra-large) walima minnu ka bon.

html ye

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

A kɔlɔsi ko an tɛ nafama-kalansow Di sɛbɛnni jolenw kama. Hali ni, ɲɛnajɛko siratigɛ la, sɛbɛnni minnu bɛnnen don, olu bɛ se ka diya kosɛbɛ, o bɛ daɲɛw ni ɲɔgɔn cɛ janya kɛ cogo la min tɛ kɛ cogo la, o la sa, a kalanni ka gɛlɛn.

Sɛbɛnniw sirili ani u falenni

Aw bɛ sɛbɛnniw siri ni .text-wrapkalan ye.

Nin sɛbɛn in ka kan ka dafa.

html ye

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

Aw bɛ sɛbɛnniw bali ka siri ni .text-nowrapkalan ye.

Nin sɛbɛn in ka kan ka fa bangebaga kan.

html ye

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

Daɲɛw tiɲɛni

Aw bɛ sɛbɛnni janyalenw bali ka aw ka yɔrɔw labɛncogo tiɲɛ ni baara kɛli ye ni .text-breakto set word-wrap: break-wordani word-break: break-word. An bɛ baara Kɛ ni word-wrapmin ka ca ni tɔw ye, o nɔ na overflow-wrapwalasa ka navigatɔrɔn dɛmɛ ka caya, ani ka deprecatedw Fàra o kan word-break: break-wordwalasa ka an yɛrɛ tanga koɲɛw ma ni flex minɛnw ye.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html ye

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

A kɔlɔsi ko daɲɛw kari tɛ Se ka Kɛ arabukan na , n’o ye RTL kan ye min bɛ Fɔ kosɛbɛ. O la .text-breaka bɛ Bɔ an ka RTL CSS lajɛlen na.

Sɛbɛnni caman tigɛli

Sɛbɛnw bɛrɛbɛnni kɛ yɔrɔw la ni sɛbɛnnibolow ye minnu bɛ sɛbɛnni kɛ ni sɛbɛnnibolow ye.

Sɛbɛnni fitininw.

Sɛbɛnni minnu bɛ sɛbɛn ni sɛbɛnnibolo belebelebaw ye.

Sɛbɛn min bɛ wele ko CapitaliZed.

html ye

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

A kɔlɔsi cogo min na .text-capitalizea bɛ daɲɛ kelen-kelen bɛɛ sɛbɛnni fɔlɔ dɔrɔn Changé, ka sɛbɛnni wɛrɛw cogoya to yen min tɛ nɔ bila a la.

Font hakɛ

Teliya la ka font-sizesɛbɛnniw Changer. Hali n’an ka kalansenw (misali la, .h1– .h6) bɛ baara kɛ font-size, font-weight, ani line-height, o nafalanw bɛ baara kɛ dɔrɔnfont-size . O nafalanw bonya bɛ Bɛn HTML ka kùnnafoni-cimago-yɔrɔw ma, o la ni jate bɛ caya, u bonya bɛ Dɔgɔya.

.fs-1 sɛbɛnni

.fs-2 sɛbɛnni

.fs-3 sɛbɛnni

.fs-4 sɛbɛnni

.fs-5 sɛbɛnni

.fs-6 sɛbɛnni

html ye

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

Aw ye aw ka s sɔrɔlenw kɛ ka kɛɲɛ ni aw yɛrɛ sago ye ni aw ye Sass karti font-sizecaman sɛmɛntiya .$font-sizes

Font girinya ani italiki

Teliya la sɛbɛnni font-weightwalima font-stylesɛbɛnni caman Changer ni nin nafamafɛnw ye. font-stylenafamafɛnw bɛ surunya i n' a fɔ .fst-*ani font-weightnafalanw bɛ surunya i n' a fɔ .fw-*.

Sɛbɛnni minnu sɛbɛnnen don ni nɛrɛmuguma ye.

Sɛbɛnni min girinya ka bon (ka kɛɲɛ ni bangebaga yɔrɔ ye).

Semibold girinya sɛbɛn.

Texte de poids normal.

Sɛbɛnni min ka nɔgɔn.

Sɛbɛn min girinya ka nɔgɔn (ka kɛɲɛ ni bangebaga yɔrɔ ye).

Sɛbɛnni minnu bɛ sɛbɛn ni italiki ye.

Sɛbɛnni ni sɛbɛnni kɛcogo nɔrɔlen

html ye

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

Layini janya

Aw bɛ layini janya Changer ni .lh-*utilités ye.

Nin ye dakun jan ye min sɛbɛnna walasa k’a jira cogo min na fɛn dɔ ka layini-janya bɛ nɔ bila an ka nafamafɛnw na. Kalansow bɛ Kɛ fɛn yɛrɛ kan walima tuma dɔw la fɛn bangebaga kan. O kalanw bɛ se ka ladilan i n’a fɔ a mago bɛ cogo min na ni an ka nafama API ye.

html ye

<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 (yɔrɔ kelen).

Sugandili dɔ Changer ka kɛ an ka monospace font stack ye ni .font-monospace.

Nin bɛ Kɛ yɔrɔ kelen na

html ye

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

Reset kulɛri

Sɛbɛnni walima jɛgɛnsira dɔ kulɛri Lasegin ni .text-reset, walasa a ka kulɛri ciyɛn ta a bangebaga fɛ.

Sɛbɛnni minnu bɛ dabila ni reset link ye .

html ye

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

Texte decoration (sɛbɛnni) dekorasiyɔn

Aw bɛ sɛbɛnni masiri yɔrɔw la ni sɛbɛnni masiri kalanw ye.

Layini dɔ bɛ nin sɛbɛn in jukɔrɔ.

Nin sɛbɛn in bɛ ni zana dɔ ye min bɛ tɛmɛ a fɛ.

Nin jɛgɛn in y'a ka sɛbɛnni masirili Bɔ a la

html ye

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

Yɛlɛma-yɛlɛmaw

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

Kartiw

Font-size nafamafɛnw bɛ Bɔ nin karti in na, ka fara an ka nafamafɛnw API kan.

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

Nafamafɛnw API

Font ni sɛbɛnni nafamafɛnw bɛ fɔ an ka nafamafɛnw API kɔnɔ san scss/_utilities.scss. Aw ye baara kɛcogo dɔn ni utilities API ye.

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