Atwerɛ
Nwoma ne nhwɛsoɔ a ɛfa nsɛm a wɔtaa de di dwuma ho mfasoɔ a wɔde hwɛ nhyiamu, nsɛm a wɔde kyekyere, emu duru, ne nea ɛkeka ho so.
Nsɛm a wɔakyerɛw no pɛpɛɛpɛ
Ɛnyɛ den sɛ wobɛsan asiesie nsɛm no akɔ afã horow a nsɛm a wɔde hyɛ mu adesua ahorow wom no mu. Sɛ wopɛ mfiase, awiei, ne mfinimfini nhyehyɛe a, mmuae adesua ahorow wɔ hɔ a ɛde viewport trɛw breakpoints koro no ara di dwuma sɛ grid nhyehyɛe no.
Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewport akɛse nyinaa so.
Nsɛm a wɔahyehyɛ no mfinimfini wɔ viewport akɛse nyinaa so.
Nsɛm a wɔahyehyɛ no ba awiei wɔ viewport akɛse nyinaa so.
Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ SM (ketewa) anaa nea ɛtrɛw so.
Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ MD (medium) anaa nea ɛtrɛw so.
Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ LG (kɛse) anaa nea ɛtrɛw so.
Fi ase nsɛm a wɔahyehyɛ no pɛpɛɛpɛ wɔ viewports a ne kɛse yɛ XL (extra-large) anaa nea ɛtrɛw so.
<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>Nsɛm a wɔde kyekyere ne nea ɛboro so
Fa .text-wrapadesuakuw bi kyekyere nsɛm ho.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Siw nsɛm a wɔde bɛkyekyere .text-nowrapadesua no ano.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Asɛmfua a wɔde paapae mu
Siw nsɛm nhama atenten a ɛbɛsɛe wo components no nhyehyɛe denam .text-breakto set word-wrap: break-wordne a wode bedi dwuma no so word-break: break-word. Yɛde di dwuma word-wrapsen nea abu overflow-wrapso kɛse no ma browser mmoa a ɛtrɛw, na yɛde nea wɔagyae no ka ho na word-break: break-wordyɛakwati nsɛm a ɛfa flex containers ho.
Mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm ɛsen mmammmmmmmmmmmmmmmmmmmmmmmmmmm ɛsen mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm ɛsen mm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm ɛsen mmnmmmmmmmmmmmmmmmmmmmmm.mmmmmmmmmmmmmmmmmmmmmmmmke of
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakwɔayi afi yɛn RTL a wɔaboaboa ano CSS no mu.
Nsɛm a wɔakyerɛw no dannan
Sesa nsɛm wɔ components mu a text capitalization adesua ahorow wom.
Nsɛm a wɔde nkyerɛwde nketewa ahyɛ mu.
Nsɛm a wɔakyerɛw no nkyerɛwde akɛse.
Nsɛm a wɔakyerɛw wɔ CapiTaliZed mu.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Hyɛ sɛnea .text-capitalizeɛsesa asɛmfua biara nkyerɛwde a edi kan nkutoo no nsow, na ɛma nkyerɛwde foforo biara asɛm no nnya nkɛntɛnso biara.
Font no kɛse
Sesa font-sizensɛm a wɔakyerɛw no ntɛmntɛm. Bere a yɛn asɛmti adesua ahorow (sɛ nhwɛso no, .h1– .h6) no fa font-size, font-weight, ne line-height, saa mfaso horow yi di dwuma nkutoofont-size . Sizing ma saa utilities yi ne HTML no heading elements no hyia, enti sɛ dodow no kɔ soro a, wɔn kɛse so tew.
.fs-1 nkyerɛwee
.fs-2 nkyerɛwee
.fs-3 nsɛm a wɔakyerɛw
.fs-4 nsɛm a wɔakyerɛw
.fs-5 nsɛm a wɔakyerɛw
.fs-6 nsɛm a wɔakyerɛw
<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>Yɛ wo font-sizes a ɛwɔ hɔ no ho nhyehyɛe denam $font-sizesSass map no a wobɛsakra no so.
Font mu duru ne italics
Fa saa utilities yi sesa font-weightanaa font-styleof text no ntɛmntɛm. font-stylewɔatwa utilities no tiawa sɛ .fst-*na font-weightwɔatwa utilities no tiawa sɛ .fw-*.
Nsɛm a wɔakyerɛw no tuntum.
Bolder weight text (a ɛfa ɔwofo element no ho).
Nkyerɛwee a emu duru yɛ daa.
Nsɛm a emu yɛ hare.
Nsɛm a emu duru yɛ hare (a ɛfa ɔwofo element no ho).
Nkyerɛwee a wɔde nkyerɛwde a ɛyɛ mmerɛw di dwuma.
Nsɛm a wɔde font style a ɛfata di dwuma
<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>Ntrɛwmu no sorokɔ
Sesa line no sorokɔ ne .lh-*utilities.
Eyi yɛ nkyekyem tenten a wɔakyerɛw de akyerɛ sɛnea yɛn utilities no nya element bi line-height so nkɛntɛnso. Wɔde adesua ahorow di dwuma wɔ element no ankasa so anaasɛ ɛtɔ mmere bi a ɔwofo element no so. Wobetumi de yɛn utility API no ayɛ saa adesua ahorow yi sɛnea ɛho hia.
Eyi yɛ nkyekyem tenten a wɔakyerɛw de akyerɛ sɛnea yɛn utilities no nya element bi line-height so nkɛntɛnso. Wɔde adesua ahorow di dwuma wɔ element no ankasa so anaasɛ ɛtɔ mmere bi a ɔwofo element no so. Wobetumi de yɛn utility API no ayɛ saa adesua ahorow yi sɛnea ɛho hia.
Eyi yɛ nkyekyem tenten a wɔakyerɛw de akyerɛ sɛnea yɛn utilities no nya element bi line-height so nkɛntɛnso. Wɔde adesua ahorow di dwuma wɔ element no ankasa so anaasɛ ɛtɔ mmere bi a ɔwofo element no so. Wobetumi de yɛn utility API no ayɛ saa adesua ahorow yi sɛnea ɛho hia.
Eyi yɛ nkyekyem tenten a wɔakyerɛw de akyerɛ sɛnea yɛn utilities no nya element bi line-height so nkɛntɛnso. Wɔde adesua ahorow di dwuma wɔ element no ankasa so anaasɛ ɛtɔ mmere bi a ɔwofo element no so. Wobetumi de yɛn utility API no ayɛ saa adesua ahorow yi sɛnea ɛho hia.
<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 a ɛwɔ hɔ
Sesa nea woapaw no kɔ yɛn monospace font stack no so denam .font-monospace.
Eyi wɔ monospace mu
<p class="font-monospace">This is in monospace</p>Fa kɔla no si hɔ bio
Fa , san hyehyɛ nsɛm anaa link bi kɔla .text-reset, sɛnea ɛbɛyɛ a ebenya kɔla no afi ne wofo hɔ.
Nsɛm a wɔayɛ no mum a wɔde reset link ahyɛ mu .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Nsɛm a wɔde siesie fie
Fa nsɛm a wɔde siesie adesua ahorow siesie nsɛm wɔ afã horow mu.
Saa nkyerɛwee yi wɔ nkyerɛwde bi wɔ n’ase.
Saa nkyerɛwee yi wɔ nkyerɛwde bi a ɛfa mu.
Saa link yi wɔ ne text decoration a wɔayi afi hɔ<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
Nneɛma a Ɛsakra
// 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;
Asase mfonini ahorow
Wɔyɛ font-size utilities fi saa map yi mu, de ka yɛn utilities API ho.
$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
);
Nneɛma a wɔde di dwuma API
Wɔabɔ font ne text utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.
"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
),