Qoraal
Dukumeenti iyo tusaalooyin loogu talagalay isticmaalka qoraalka caadiga ah si loo xakameeyo toosinta, duubista, miisaanka, iyo in ka badan.
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.
<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>
Duubista qoraalka iyo qulqulka
Ku duub qoraalka .text-wrap
fasal.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Ka ilaali qoraalka in lagu duubo .text-nowrap
fasal.
<div class="text-nowrap bd-highlight" 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-break
dejinta word-wrap: break-word
iyo word-break: break-word
. Waxaan u isticmaalnaa word-wrap
bedelkii kuwa caanka ah overflow-wrap
ee taageerada biraawsarka ballaaran, waxaana ku darnaa kuwa go'ay word-break: break-word
si looga fogaado arrimaha weelasha dabacsan.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
waa 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
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Ogsoonow sida .text-capitalize
kaliya 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-size
qoraalka 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
<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-size
s-kaaga la heli karo adiga oo wax ka beddelaya $font-sizes
khariidadda Sass.
Miisaanka farta iyo farta farta
Si degdeg ah ugu beddel qoraalka font-weight
ama font-style
qoraalka aaladahan. font-style
Utilities waxa loo soo gaabiyaa sida .fst-*
iyo font-weight
utilities waxa loo soo gaabiyaa sida .fw-*
.
Qoraal geesinimo leh.
Qoraal miisaan adag (marka loo eego xubinta waalidka).
Qoraalka miisaanka caadiga ah.
Qoraalka miisaanka fudud.
Qoraalka miisaanka fudud (marka loo eego xubinta waalidka).
Qoraal farta ah
Qoraal leh qaabka farta caadiga ah
<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>
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.
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.
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.
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.
<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
<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
<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<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", 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;
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(--#{$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
),