Qoraal

Dukumeenti iyo tusaalooyin loogu talagalay isticmaalka qoraalka caadiga ah si loo xakameeyo toosinta, duubista, miisaanka, iyo in ka badan.

Boggaan

toosinta qoraalka

Si fudud qoraalka ugu toosi qaybaha leh fasalada toosinta qoraalka. Bilawga, dhammaadka, iyo isku toosinta dhexe, fasallo jawaab celin ah ayaa diyaar ah kuwaas oo adeegsada bar-goynta ballaca aragtida ee nidaamka qulqulka.

Bilow qoraalka toosan ee dhammaan cabbirrada daawashada

Qoraalka dhexda toosan ee dhammaan cabbirrada daawashada

Jooji qoraalka toosan ee dhammaan cabbirrada daawashada

Ka bilow qoraalka toosan ee daawashada SM (yar) ama ka ballaaran.

Ka bilow qoraalka toosan ee daawashada cabbirka MD (dhexdhexaad) ama ka ballaaran.

Ka bilow qoraalka toosan ee daawashada cabbirka LG (weyn) ama ka ballaaran.

Ka bilow qoraalka toosan ee meelaha daawashada ee cabbirkoodu yahay XL (ka weyn) ama ka ballaaran.

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>

Ogsoonow in aanan u bixin fasallada utility qoraalka la xaq-u-yeelay. Halka, bilic ahaan, qoraalka la caddeeyey laga yaabo inuu u ekaado mid soo jiidasho leh, waxay ka dhigaysaa kala dheeraynta kelmad si aan kala sooc lahayn oo sidaas awgeed ay adagtahay in la akhriyo.

Duubista qoraalka iyo qulqulka

Ku duub qoraalka .text-wrapfasal.

Qoraalkani waa inuu duubaa.

html

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

Ka ilaali qoraalka in lagu duubo .text-nowrapfasal.

Qoraalkani waa inuu buux dhaafiyaa waalidka.

html

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

Kala goynta hadalka

Ka ilaali xadhkaha dheer ee qoraalka inay jebiyaan qaabka qaybahaaga adigoo isticmaalaya .text-breakdejinta word-wrap: break-wordiyo word-break: break-word. Waxaan u isticmaalnaa word-wrapbedelkii kuwa caanka ah overflow-wrapee taageerada biraawsarka ballaaran, waxaana ku darnaa kuwa go'ay word-break: break-wordsi looga fogaado arrimaha weelasha dabacsan.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Ogow in ereyada jebintu aanay suurtogal ahayn Carabiga , oo ah luqadda ugu badan ee RTL la isticmaalo. Sidaa darteed .text-breakwaa laga saaray RTL-kayaga CSS la soo ururiyey.

Beddelka qoraalka

U beddelo qoraalka qaybo ka mid ah fasalo weynaynta qoraalka.

Qoraal hoose

Qoraal sare

Qoraalka CapiTaliZed

html

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

Ogsoonow sida .text-capitalizekaliya u beddelo xarafka ugu horreeya ee kelmad kasta, adigoo ka tagaya kiiska xarfaha kale mid aan la taaban karin.

Cabbirka farta

Degdeg u beddel font-sizeqoraalka Halka fasalada ciwaanka (tusaale, .h1- .h6) ay khuseeyaan font-size, font-weight, iyo line-height, adeegyadani waxay khuseeyaan kaliyafont-size . Cabbiraadda adeegyadan waxay la mid tahay curiyeyaasha ciwaanka HTML, si ay tiradu u korodho, cabbirkoodu wuu yaraanayaa.

.fs-1 qoraal

.fs-2 qoraal

.fs-3 qoraal

.fs-4 qoraal

.fs-5 qoraal

.fs-6 qoraal

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>

Habbee font-sizes-kaaga la heli karo adiga oo wax ka beddelaya $font-sizeskhariidadda Sass.

Miisaanka farta iyo farta farta

Si degdeg ah ugu beddel qoraalka font-weightama font-styleqoraalka aaladahan. font-styleUtilities waxa loo soo gaabiyaa sida .fst-*iyo font-weightutilities waxa loo soo gaabiyaa sida .fw-*.

Qoraal geesinimo leh.

Qoraal miisaan adag (marka loo eego xubinta waalidka).

Qoraal miisaan yar.

Qoraalka miisaanka caadiga ah.

Qoraalka miisaanka fudud.

Qoraalka miisaanka fudud (marka loo eego xubinta waalidka).

Qoraal farta ah

Qoraal leh qaabka farta caadiga ah

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>

Dhererka khadka

Ku beddel dhererka khadka adigoo .lh-*isticmaalaya yutiilitida

Tani waa tuduc dheer oo loo qoray si ay u muujiso sida dhererka laynka curiyaha ay u saameeyaan tamartayada. Fasallada waxaa lagu dabaqaa curiyaha laftiisa ama mararka qaarkood xubinta waalidka. Fasaladaan waxaa lagu habeyn karaa hadba sida loogu baahdo API utility our.

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>

Monospace

U beddel xulashada xarfaha monospace-keena oo wata .font-monospace.

Tani waxay ku taal monospace

html

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

Dib u habeyn midabka

Dib u deji qoraalka ama midabka isku xirka .text-reset, si uu midabka uga dhaxlo waalidkii.

Qoraal la damiyay oo wata xiriiriyaha dib u dajinta

html

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

Qurxinta qoraalka

Ku qurxi qoraalka qaybo ka mid ah fasallada qurxinta qoraalka.

Qoraalkani wuxuu leeyahay xarriiq hoostiisa.

Qoraalkani waxa uu leeyahay xariiq dhex mara.

Xidhiidhiyahani waxa laga saaray qurxinta qoraalka

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

Kala duwanaansho

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

Maab

Isticmaalka cabbirka xarfaha ayaa laga soo saaray khariidadan, marka lagu daro adeegyadayada 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

Farta iyo utility qoraalka waxa lagu caddeeyey utilities API gudaha scss/_utilities.scss. Baro sida loo isticmaalo API utilities.

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