Sengwalwa
Ditokomane le mehlala ya didirišwa tša sengwalwa tše di tlwaelegilego go laola go logaganya, go phuthela, boima, le tše dingwe.
Go logaganya sengwalwa
Beakanya sengwalwa gape gabonolo go dikarolo ka diklase ta go logaganya sengwalwa. Bakeng sa go thoma, mafelelo, le go logaganya bogareng, diklase tša go arabela di a hwetšagala tšeo di šomišago dintlha tša go kgaotša tša bophara bja lefelo la go lebelela tše di swanago le tshepedišo ya keriti.
Thoma sengwalwa se se logaganywago go bogolo ka moka bja lefelo la go lebelela.
Sengwalwa se se logaganywago bogareng godimo ga bogolo ka moka bja lefelo la go lebelela.
Fediša sengwalwa se se logaganywago go bogolo ka moka bja lefelo la go lebelela.
Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja SM (tše nnyane) goba go feta.
Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja MD (gare) goba go feta.
Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja LG (tše kgolo) goba go feta.
Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja XL (tše kgolo kudu) goba go feta.
<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>Go phuthela sengwalwa le go tlala
Phuthelela sengwalwa ka .text-wrapklase.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Thibela sengwalwa go phuthela ka .text-nowrapklase.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Kgaotšo ya mantšu
Thibela dithapo tše telele tša sengwalwa go thuba peakanyo ya dikarolo tša gago ka go šomiša .text-breakgo beakanya word-wrap: break-wordle word-break: break-word. Re diriša word-wrapgo e na le yeo e tlwaelegilego kudu overflow-wrapbakeng sa thekgo e phatlaletšego ya sephephediši, gomme re tlaleletša ka tšeo di sa dirišwego word-break: break-wordgo efoga ditaba ka ditshelo tša go flex.
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breake tlosoa ho tloha rona RTL bokella CSS.
Phetošo ya sengwalwa
Fetoša sengwalwa ka dikarolo ka diklase tša go ngwala ka ditlhaka tše kgolo tša sengwalwa.
Sengwalwa se senyenyane.
Sengwalwa sa ditlhaka tše kgolo.
Sengwalwa se se CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Hlokomela kamoo .text-capitalizee fetošago feela tlhaka ya mathomo ya lentšu le lengwe le le lengwe, e tlogela taba ya ditlhaka le ge e le dife tše dingwe e sa kgongwe.
Bogolo bja fonte
Ka pela fetola font-sizeya sengwalwa. Le ge diklase tša rena tša dihlogo (mohlala, .h1– .h6) di šoma font-size, font-weight, le line-height, didirišwa tše di šoma felafont-size . Go beakanya bogolo bja didirišwa tše go swana le dielemente tša hlogo ya HTML, ka fao ge palo e oketšega, bogolo bja tšona bo a fokotšega.
.fs-1 sengwalwa
.fs-2 sengwalwa
.fs-3 sengwalwa
.fs-4 sengwalwa
.fs-5 sengwalwa
.fs-6 sengwalwa
<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>Tlwaetša font-sizes ya gago ye e lego gona ka go fetoša $font-sizesmmapa wa Sass.
Boima ba fonte le mongwalo o sekamego
Ka pela fetola font-weightgoba font-styleya sengwalwa ka didirišwa tše. font-styledidirišwa di khutsofaditšwe bjalo ka .fst-*gomme font-weightdidirišwa di khutsofaditšwe bjalo ka .fw-*.
Mongwalo o motenya.
Sengwalwa sa boima bjo bo tiilego (se lebane le elemente ya motswadi).
Sengwalwa sa boima bja tlwaelo.
Sengwalwa sa boima bjo bonyenyane.
Sengwalwa sa boima bjo bo bofefo (go bapetšwa le elemente ya motswadi).
Sengwalwa sa go sekamego.
Sengwalwa ka setaele sa fonte se se tlwaelegilego
<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>Bophahamo ba mola
Fetola bophahamo ba mola ka .lh-*utilities.
Ye ke temana ye telele yeo e ngwadilwego go bontšha ka fao bophagamo bja mola bja elemente bo amegago ka gona ke didirišwa tša rena. Diklase di dirišwa go elemente ka boyona goba ka dinako tše dingwe go elemente ya motswadi. Diklase tše di ka rulaganywa ge go nyakega ka API ya rena ya utility.
Ye ke temana ye telele yeo e ngwadilwego go bontšha ka fao bophagamo bja mola bja elemente bo amegago ka gona ke didirišwa tša rena. Diklase di dirišwa go elemente ka boyona goba ka dinako tše dingwe go elemente ya motswadi. Diklase tše di ka rulaganywa ge go nyakega ka API ya rena ya utility.
Ye ke temana ye telele yeo e ngwadilwego go bontšha ka fao bophagamo bja mola bja elemente bo amegago ka gona ke didirišwa tša rena. Diklase di dirišwa go elemente ka boyona goba ka dinako tše dingwe go elemente ya motswadi. Diklase tše di ka rulaganywa ge go nyakega ka API ya rena ya utility.
Ye ke temana ye telele yeo e ngwadilwego go bontšha ka fao bophagamo bja mola bja elemente bo amegago ka gona ke didirišwa tša rena. Diklase di dirišwa go elemente ka boyona goba ka dinako tše dingwe go elemente ya motswadi. Diklase tše di ka rulaganywa ge go nyakega ka API ya rena ya utility.
<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>Sebaka se tee
Fetoša kgetho go mokgobo wa rena wa fonte ya monospace ka .font-monospace.
Se ke ka monospace
<p class="font-monospace">This is in monospace</p>Seta mmala gape
Beakanya mmala wa sengwalwa goba kgokagano gape ka .text-reset, gore e hwetše mmala go tšwa go motswadi wa yona.
Sengwalwa se se kgaoditšwego ka kgokagano ya go seta gape .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Mokgabišo wa sengwalwa
Kgabiša sengwalwa ka dikarolo ka diklase tša go kgabiša sengwalwa.
Sengwalwa se se na le mola ka fase ga sona.
Sengwalwa se se na le mola wo o fetago go sona.
Kgokagano ye e na le mokgabišo wa yona wa sengwalwa wo o tlošitšwego<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
Diphetogo
// 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;
Dimmapa
Didirišwa tša bogolo bja fonte di tšweletšwa go tšwa mmapeng wo, ka kopanyo le API ya rena ya didirišwa.
$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
);
API ya Didirišwa
Didirišwa tša fonte le sengwalwa di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.
"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
),