Isicatshulwa

Amaxwebhu kunye nemizekelo yezinto eziluncedo zombhalo oqhelekileyo ukulawula ulungelelwaniso, ukusonga, ubunzima, kunye nokunye.

Kweli phepha

Ulungelelwaniso lombhalo

Ukulungelelanisa isicatshulwa ngokulula kumacandelo aneeklasi zolungelelwaniso lokubhaliweyo. Ukuqala, ukuphela, kunye nolungelelwaniso oluphakathi, iiklasi eziphendulayo ziyafumaneka ezisebenzisa iindawo zokuqhawula ububanzi bendawo yokujonga njengenkqubo yegridi.

Qala isicatshulwa esilungelelanisiweyo kubo bonke ubungakanani bendawo yokujonga.

Isicatshulwa esilungelelaniswe embindini kubo bonke ubungakanani bendawo yokujonga.

Phelisa isicatshulwa esilungelelanisiweyo kubo bonke ubungakanani bendawo yokujonga.

Qalisa isicatshulwa esilungelelanisiweyo kwiizibuko zemboniselo ezinobungakanani be-SM (encinci) okanye banzi.

Qala okubhaliweyo okulungelelanisiweyo kwiizibuko zemboniselo ezinobungakanani MD (phakathi) okanye banzi.

Qala isicatshulwa esilungelelanisiweyo kwi-LG (enkulu) okanye ebanzi.

Qalisa isicatshulwa esilungelelanisiweyo kwiizibuko zemboniselo ezinobungakanani be-XL (enkulu kakhulu) okanye banzi.

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

Qaphela ukuba asiboneleli ngeeklasi eziluncedo kumbhalo othethelelekayo. Ngelixa, ngobuhle, isicatshulwa esithethelelekayo sinokubonakala sinomtsalane ngakumbi, isenza ukuba izithuba zamagama zibe lula kwaye kube nzima ukusifunda.

Ukusongwa kombhalo kunye nokuphuphuma

Songa isicatshulwa .text-wrapngeklasi.

Lo mbhalo kufuneka usonge.

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

Thintela isicatshulwa ekusongelweni .text-nowrapngeklasi.

Lo mbhalo kufuneka uphuphume umzali.

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

Uqhawulo-magama

Thintela imitya emide yokubhaliweyo ekwaphuleni uyilo lwamalungu akho ngokusebenzisa .text-breakukuseta word-wrap: break-wordkunye word-break: break-word. Sisebenzisa word-wrapendaweni yezona zixhaphakileyo overflow-wrapkwinkxaso yebhrawuza ebanzi, kwaye songeze eyehliweyo word-break: break-wordukunqanda imiba enezikhongozeli eziguqukayo.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Qaphela ukuba amagama aqhekekileyo akwenzeki ngesiArabhu , lolona lwimi lusetyenziswayo lwe-RTL. Ke ngoko .text-breakisusiwe kwi-RTL yethu ehlanganisiweyo ye-CSS.

Ukuguqulwa kokubhaliweyo

Guqula okubhaliweyo kumacandelo ngeeklasi zokubhala ngoonobumba abakhulu.

Umbhalo osezantsi.

Umbhalo obhalwe ngoonobumba abakhulu.

Umbhalo weCapiTaliZed.

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

Qaphela ukuba .text-capitalizeutshintsha njani kuphela unobumba wokuqala wegama ngalinye, ushiya imeko yabo nabaphi na abanye oonobumba bengachaphazelekanga.

Isayizi yefonti

Guqula ngokukhawuleza font-sizeisicatshulwa. Ngelixa iiklasi zethu zesihloko (umzekelo, .h1- .h6) zisebenza font-size, font-weight, kwaye line-height, ezi zixhobo zisebenza kuphelafont-size . Ubungakanani bezi zinto ziluncedo zihambelana nesihloko se-HTML, njengoko inani lisanda, ubungakanani bazo buyancipha.

.fs-1 umbhalo

.fs-2 umbhalo

.fs-3 umbhalo

.fs-4 umbhalo

.fs-5 umbhalo

.fs-6 umbhalo

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

Lungiselela ezikhoyo font-sizes yakho $font-sizesngokulungisa imephu Sass.

Ubunzima befonti kunye namazwi akekeleyo

Guqula ngokukhawuleza i- font-weightokanye font-styleyombhalo ngezi luncedo. font-styleizinto eziluncedo zishunqulelwe njengoko .fst-*kunye font-weightnezinto eziluncedo zishunqulelwe njenge .fw-*.

Umbhalo ongqindilili.

Ubunzima bombhalo ongqindilili (ngokunxulumene nento yomzali).

Isicatshulwa esiqhelekileyo sobunzima.

Ubunzima bombhalo okhanyayo.

Ubunzima bombhalo obulula (ngokunxulumene nento yomzali).

Umbhalo okekeleyo.

Umbhalo onesitayile sefonti eqhelekileyo

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

Ubude bomgca

Guqula ubude bomgca kunye .lh-*nezinto eziluncedo.

Lo ngumhlathi omde obhaliweyo ukubonisa indlela ubude bomgca wento echatshazelwa ngayo zinkonzo zethu. Iiklasi zisetyenziswa kwi element ngokwayo okanye ngamanye amaxesha element umzali. Ezi klasi zinokwenziwa ngokwezifiso njengoko zifuneka nge-API yethu eluncedo.

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

Isithuba esinye

Guqula okukhethiweyo kwisitaki sethu sefonti ye-monospace nge .font-monospace.

Oku kukwi-monospace

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

Lungisa umbala kwakhona

Lungisa kwakhona umbhalo okanye umbala wekhonkco nge .text-reset, ukuze izuze umbala kumzali wayo.

Umbhalo uthulisiwe ngekhonkco lokusetha kwakhona .

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

Umhombiso wombhalo

Ukuhombisa isicatshulwa kumacandelo ngeeklasi zokuhombisa isicatshulwa.

Lo mbhalo unomgca ngaphantsi kwawo.

Lo mbhalo unomgca odlula kuwo.

Eli khonkco linomhombiso walo wokubhaliweyo ususiwe

<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

Izinto eziguquguqukayo

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

Iimephu

Izinto eziluncedo zobungakanani befonti ziveliswa kule mephu, ngokudityaniswa nezinto zethu ze-API.

$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

Ifonti kunye nezinto ezibhaliweyo zibhengezwe kwizinto eziluncedo zethu kwi-API kwi scss/_utilities.scss. Funda indlela yokusebenzisa izinto eziluncedo 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
    ),