in English

Atwerɛ

Nwoma ne nhwɛsoɔ a ɛfa nsɛm a wɔtaa de di dwuma ho mfasoɔ a wɔde hwɛ nhyiamu, nsɛm a wɔde kyekyere, emu duru, ne nea ɛkeka ho so.

Wɔ kratafa yi so

Nsɛm a wɔakyerɛw no pɛpɛɛpɛ

Ɛnyɛ den sɛ wobɛsan asiesie nsɛm no akɔ afã horow a ɛwɔ nsɛm a wɔde hyɛ adesua ahorow mu. Sɛ wopɛ mfiase, awiei, ne mfinimfini nhyehyɛe a, mmuae adesua ahorow wɔ hɔ a ɛde viewport trɛw breakpoints koro no ara di dwuma sɛ grid nhyehyɛe no.

Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewport akɛse nyinaa so.

Nsɛm a wɔahyehyɛ no mfinimfini wɔ viewport akɛse nyinaa so.

Nsɛm a wɔahyehyɛ no ba awiei wɔ viewport akɛse nyinaa so.

Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ SM (ketewa) anaa nea ɛtrɛw so.

Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ MD (medium) anaa nea ɛtrɛw so.

Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ LG (kɛse) anaa nea ɛtrɛw so.

Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ XL (extra-large) anaa nea ɛtrɛw so.

html na ɛwɔ hɔ

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

Hyɛ no nsow sɛ yɛmfa utility classes mma nsɛm a ɛfata. Bere a, wɔ afɛfɛde mu no, ebia nsɛm a wɔabu no bem no bɛyɛ sɛ nea ɛyɛ anigye kɛse no, ɛma nsɛmfua ntam kwan a ɛda ntam no yɛ nea ɛba kwa, na enti ɛyɛ den sɛ wɔbɛkenkan.

Nsɛm a wɔde kyekyere ne nea ɛboro so

Fa .text-wrapadesuakuw bi kyekyere nsɛm ho.

Ɛsɛ sɛ saa nkyerɛwee yi kyekyere.

html na ɛwɔ hɔ

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

Siw nsɛm a wɔde bɛkyekyere .text-nowrapadesua no ano.

Ɛsɛ sɛ saa nkyerɛwee yi bu ɔwofo no so.

html na ɛwɔ hɔ

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

Asɛmfua a wɔde paapae mu

Siw nsɛm nhama atenten a ɛbɛsɛe wo components no nhyehyɛe denam .text-breakto set word-wrap: break-wordne a wode bedi dwuma no so word-break: break-word. Yɛde di dwuma word-wrapsen nea abu overflow-wrapso kɛse no ma browser mmoa a ɛtrɛw, na yɛde nea wɔagyae no ka ho na word-break: break-wordyɛakwati nsɛm a ɛfa flex containers ho.

Mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm ɛsen mmammmmmmmmmmmmmmmmmmmmmmmmmmmm ɛsen mma ammfammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm ɛsen mma

html na ɛwɔ hɔ

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

Hyɛ no nsow sɛ nsɛmfua a wobebubu no ntumi nyɛ yiye wɔ Arabic , a ɛyɛ RTL kasa a wɔde di dwuma kɛse no mu. Enti .text-breakwɔayi afi yɛn RTL a wɔaboaboa ano CSS no mu.

Nsɛm a wɔakyerɛw no dannan

Sesa nsɛm wɔ components mu a text capitalization adesua ahorow wom.

Nsɛm a wɔde nkyerɛwde nketewa ahyɛ mu.

Nsɛm a wɔakyerɛw no nkyerɛwde akɛse.

Nsɛm a wɔakyerɛw wɔ CapiTaliZed mu.

html na ɛwɔ hɔ

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

Hyɛ sɛnea .text-capitalizeɛsesa asɛmfua biara nkyerɛwde a edi kan nkutoo no nsow, na ɛma nkyerɛwde foforo biara asɛm no nnya nkɛntɛnso biara.

Font no kɛse

Sesa font-sizensɛm a wɔakyerɛw no ntɛmntɛm. Bere a yɛn asɛmti adesua ahorow (sɛ nhwɛso no, .h1– .h6) no fa font-size, font-weight, ne line-height, saa mfaso horow yi di dwuma nkutoofont-size . Sizing ma saa utilities yi ne HTML no heading elements no hyia, enti sɛ dodow no kɔ soro a, wɔn kɛse so tew.

.fs-1 nkyerɛwee

.fs-2 nkyerɛwee

.fs-3 nsɛm a wɔakyerɛw

.fs-4 nsɛm a wɔakyerɛw

.fs-5 nsɛm a wɔakyerɛw

.fs-6 nsɛm a wɔakyerɛw

html na ɛwɔ hɔ

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

Yɛ wo font-sizes a ɛwɔ hɔ no ho nhyehyɛe denam $font-sizesSass map no a wobɛsakra no so.

Font mu duru ne italics

Fa saa utilities yi sesa font-weightanaa font-styleof text no ntɛmntɛm. font-stylewɔatwa utilities no tiawa sɛ .fst-*na font-weightwɔatwa utilities no tiawa sɛ .fw-*.

Nsɛm a wɔakyerɛw no tuntum.

Bolder weight text (a ɛfa ɔwofo element no ho).

Semibold mu duru nkyerɛwee.

Nkyerɛwee a emu duru yɛ daa.

Nsɛm a emu yɛ hare.

Nsɛm a emu duru yɛ hare (a ɛfa ɔwofo element no ho).

Nkyerɛwee a wɔde nkyerɛwde a ɛyɛ mmerɛw di dwuma.

Nsɛm a wɔde font style a ɛfata di dwuma

html na ɛwɔ hɔ

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

Ntrɛwmu no sorokɔ

Sesa line no sorokɔ ne .lh-*utilities.

Eyi yɛ nkyekyem tenten a wɔakyerɛw de akyerɛ sɛnea yɛn utilities no nya element bi line-height so nkɛntɛnso. Wɔde adesua ahorow di dwuma wɔ element no ankasa so anaasɛ ɛtɔ mmere bi a ɔwofo element no so. Wobetumi de yɛn utility API no ayɛ saa adesua ahorow yi sɛnea ɛho hia.

html na ɛwɔ hɔ

<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 a ɛwɔ hɔ

Sesa nea woapaw no kɔ yɛn monospace font stack no so denam .font-monospace.

Eyi wɔ monospace mu

html na ɛwɔ hɔ

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

Fa kɔla no si hɔ bio

Fa , san hyehyɛ nsɛm anaa link bi kɔla .text-reset, sɛnea ɛbɛyɛ a ebenya kɔla no afi ne wofo hɔ.

Nsɛm a wɔayɛ no mum a wɔde reset link ahyɛ mu .

html na ɛwɔ hɔ

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

Nsɛm a wɔde siesie fie

Fa nsɛm a wɔde siesie adesua ahorow siesie nsɛm wɔ afã horow mu.

Saa nkyerɛwee yi wɔ nkyerɛwde bi wɔ n’ase.

Saa nkyerɛwee yi wɔ nkyerɛwde bi a ɛfa mu.

Saa link yi wɔ ne text decoration a wɔayi afi hɔ

html na ɛwɔ hɔ

<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

Nneɛma a Ɛsakra

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

Asase mfonini ahorow

Wɔyɛ font-size utilities fi saa map yi mu, de ka yɛn utilities API ho.

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

Nneɛma a wɔde di dwuma API

Wɔabɔ font ne text utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.

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