Isicatshulwa
Amaxwebhu kunye nemizekelo yezinto eziluncedo zombhalo oqhelekileyo ukulawula ulungelelwaniso, ukusonga, ubunzima, kunye nokunye.
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 kwiimboniselo ezinobungakanani be-SM (encinci) okanye banzi.
Qala okubhaliweyo okulungelelanisiweyo kwiimboniselo ezinobungakanani be-MD (phakathi) okanye banzi.
Qala isicatshulwa esilungelelanisiweyo kwiimboniselo ezinobungakanani be-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>
Ukusongwa kombhalo kunye nokuphuphuma
Songa isicatshulwa .text-wrap
ngeklasi.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Thintela isicatshulwa ekusongelweni .text-nowrap
ngeklasi.
<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-break
ukuseta word-wrap: break-word
kunye word-break: break-word
. Sisebenzisa word-wrap
endaweni yezona zixhaphakileyo overflow-wrap
kwinkxaso yebhrawuza ebanzi, kwaye songeze eyehliweyo word-break: break-word
ukunqanda imiba enezikhongozeli eziguqukayo.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
isusiwe 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-capitalize
utshintsha njani kuphela unobumba wokuqala wegama ngalinye, ushiya imeko yabo nabaphi na abanye oonobumba bengachaphazelekanga.
Isayizi yefonti
Guqula ngokukhawuleza font-size
isicatshulwa. 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-size
s yakho $font-sizes
ngokulungisa imephu Sass.
Ubunzima befonti kunye namazwi akekeleyo
Guqula ngokukhawuleza i- font-weight
okanye font-style
yombhalo ngezi luncedo. font-style
izinto eziluncedo zishunqulelwe njengoko .fst-*
kunye font-weight
nezinto eziluncedo zishunqulelwe njenge .fw-*
.
Umbhalo ongqindilili.
Ubunzima bombhalo ongqindilili (ngokunxulumene nento yomzali).
Isicatshulwa esiqhelekileyo sobunzima.
Isicatshulwa sobunzima obulula.
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.
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.
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.
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 lokuseta 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 ohamba 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
),