Nuŋɔɖi
Nuŋlɔɖiwo kple kpɔɖeŋuwo na nuŋɔŋlɔ ƒe dɔwɔnu siwo bɔ be woatsɔ akpɔ nuwo ƒe ɖoɖowɔwɔ, wo babla, woƒe kpekpeme, kple bubuwo dzi.
Nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu
Gbugbɔ ɖo nuŋɔŋlɔwo ɖe akpa siwo me nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ƒe klasswo le bɔbɔe. Le gɔmedzedze, nuwuwu, kple titina ƒe ɖoɖowɔwɔ gome la, ŋuɖoɖo ƒe klasswo li siwo zãa nukpɔkpɔ ƒe kekeme ƒe gbagbãƒe ɖeka ma ke abe grid ɖoɖoa ene.
Dze nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le nukpɔkpɔ ƒe lolomewo katã dzi.
Nuŋɔŋlɔ si woɖo ɖe titina le nukpɔkpɔ ƒe lolomewo katã dzi.
Wu nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le nukpɔkpɔ ƒe lolomewo katã dzi.
Dze nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔƒe siwo ƒe lolome nye SM (sue) alo keke wu.
Dze nuŋɔŋlɔ siwo woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔmɔ̃ siwo ƒe lolome nye MD (medium) alo esi keke wu la dzi.
Dze nuŋɔŋlɔ siwo woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔmɔ̃ siwo ƒe lolome nye LG (lolo) alo esi keke wu la dzi.
Dze nuŋɔŋlɔ siwo woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔmɔ̃ siwo ƒe lolome nye XL (lolo wu) alo esiwo keke wu la dzi.
<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>
Nuŋɔŋlɔwo babla kple woƒe agbɔsɔsɔ fũ
Kpe nuŋɔŋlɔa ɖe .text-wrap
klass aɖe me.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Xɔ mɔ na nuŋɔŋlɔ be wòagaxatsa kple .text-nowrap
klass o.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Nyawo ƒe gbagbã
Xɔ mɔ na nuŋɔŋlɔ ƒe ka didiwo be woagagbã wò akpawo ƒe ɖoɖo o to to .text-break
set word-wrap: break-word
kple zazã me word-break: break-word
. Míezãa word-wrap
ɖe esi bɔ wu teƒe overflow-wrap
hena web-browser ƒe kpekpeɖeŋu si keke ta wu, eye míetsɔa esiwo woɖe ɖa la kpena ɖe eŋu word-break: break-word
be míaƒo asa na nya siwo ku ɖe flex containers ŋu.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
woɖee ɖa le míaƒe RTL si woƒo ƒu CSS la me.
Nuŋɔŋlɔ ƒe tɔtrɔ
Trɔ nuŋɔŋlɔ ɖe akpawo me kple nuŋɔŋlɔ ƒe ŋɔŋlɔdzesi gãwo ƒe klasswo.
Nuŋɔŋlɔ suewo.
Nuŋɔŋlɔ gãwo.
Nuŋɔŋlɔ si woŋlɔ ɖe agbalẽ me.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
De dzesi alesi .text-capitalize
wòtrɔa nya ɖesiaɖe ƒe ŋɔŋlɔdzesi gbãtɔ ko, eye wògblẽa ŋɔŋlɔdzesi bubu ɖesiaɖe ƒe nya la ɖi be mekpɔa ŋusẽ ɖe edzi o.
Font ƒe lolome
font-size
Trɔ nuŋɔŋlɔa ƒe akpaa kaba . Togbɔ be míaƒe tanya ƒe klasswo (le kpɔɖeŋu me, .h1
– .h6
) wɔa dɔ font-size
le , font-weight
, kple ŋu line-height
hã la, dɔwɔnu siawo wɔa dɔ font-size
le . Dɔwɔnu siawo ƒe lolome sɔ kple HTML ƒe tanya ƒe akpawo, eyata ne xexlẽmea le dzidzim ɖe edzi la, woƒe lolome dzi ɖena kpɔtɔna.
.fs-1 nuŋɔŋlɔ
.fs-2 nuŋɔŋlɔ
.fs-3 ƒe nuŋɔŋlɔ
.fs-4 ƒe nuŋɔŋlɔ
.fs-5 nuŋɔŋlɔ
.fs-6 nuŋɔŋlɔ
<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>
Trɔ asi le wò font-size
s siwo li ŋu to asitɔtrɔ le $font-sizes
Sass ƒe anyigbatata ŋu me.
Ŋɔŋlɔdzesiwo ƒe kpekpeme kple nuŋɔŋlɔ siwo wotsɔ ŋlɔa nu ɖe nu dzi
font-weight
Trɔ alo ƒe nuŋɔŋlɔa kaba font-style
kple dɔwɔnu siawo. font-style
woɖea nuzazãwo .fst-*
ƒe font-weight
kpukpuiwo be .fw-*
.
Nuŋɔŋlɔ si me woŋlɔ nu ɖo kple bold.
Bolder weight text (ne wotsɔe sɔ kple dzila ƒe akpaa).
Kpekpeme si sɔ ƒe nuŋɔŋlɔ.
Nuŋɔŋlɔ si ƒe kpekpeme le bɔbɔe.
Nuŋɔŋlɔ si ƒe kpekpeme le bɔbɔe wu (ne wotsɔe sɔ kple dzila ƒe akpaa).
Nuŋɔŋlɔ si woŋlɔ kple nuŋɔŋlɔ si woŋlɔ kple asi.
Nuŋɔŋlɔ kple nuŋɔŋlɔ ƒe atsyã si sɔ
<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>
Fli ƒe kɔkɔme
Trɔ fli ƒe kɔkɔme kple .lh-*
utilities.
Esia nye memama didi aɖe si woŋlɔ tsɔ ɖe alesi míaƒe dɔwɔnuwo kpɔa ŋusẽ ɖe element aɖe ƒe fli-kɔkɔme dzii fia. Wozãa klasswo ɖe element la ŋutɔ ŋu alo ɣeaɖewoɣi le dzila element la ŋu. Woateŋu atrɔ asi le klass siawo ŋu alesi wòhiãe kple míaƒe utility API.
Esia nye memama didi aɖe si woŋlɔ tsɔ ɖe alesi míaƒe dɔwɔnuwo kpɔa ŋusẽ ɖe element aɖe ƒe fli-kɔkɔme dzii fia. Wozãa klasswo ɖe element la ŋutɔ ŋu alo ɣeaɖewoɣi le dzila element la ŋu. Woateŋu atrɔ asi le klass siawo ŋu alesi wòhiãe kple míaƒe utility API.
Esia nye memama didi aɖe si woŋlɔ tsɔ ɖe alesi míaƒe dɔwɔnuwo kpɔa ŋusẽ ɖe element aɖe ƒe fli-kɔkɔme dzii fia. Wozãa klasswo ɖe element la ŋutɔ ŋu alo ɣeaɖewoɣi le dzila element la ŋu. Woateŋu atrɔ asi le klass siawo ŋu alesi wòhiãe kple míaƒe utility API.
Esia nye memama didi aɖe si woŋlɔ tsɔ ɖe alesi míaƒe dɔwɔnuwo kpɔa ŋusẽ ɖe element aɖe ƒe fli-kɔkɔme dzii fia. Wozãa klasswo ɖe element la ŋutɔ ŋu alo ɣeaɖewoɣi le dzila element la ŋu. Woateŋu atrɔ asi le klass siawo ŋu alesi wòhiãe kple míaƒe utility API.
<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>
Teƒe ɖeka
Trɔ tiatia aɖe ɖe míaƒe monospace ŋɔŋlɔdzesiwo ƒe ƒuƒoƒoa me kple .font-monospace
.
Esia le monospace me
<p class="font-monospace">This is in monospace</p>
Trɔ asi le amadede ŋu
Trɔ asi le nuŋɔŋlɔ alo kadodo aɖe ƒe amadede ŋu kple .text-reset
, ale be wòanyi amadedea ƒe dome tso edzila gbɔ.
Nuŋɔŋlɔ si me mekɔ o kple kadodo si nye reset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Nuŋɔŋlɔ ƒe atsyɔ̃ɖoɖo
Atsyɔ̃ɖoɖo na nuŋɔŋlɔ le akpawo me kple nuŋɔŋlɔ ƒe atsyɔ̃ɖoɖo ƒe klasswo.
Fli aɖe le nuŋɔŋlɔ sia te.
Fli aɖe le nuŋɔŋlɔ sia me tom.
Woɖe eƒe nuŋɔŋlɔ ƒe atsyɔ̃ɖoɖo ɖa le kadodo sia me<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 ƒe nyawo
Nusiwo trɔna
// 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;
Anyigbatatawo
Wowɔa ŋɔŋlɔdzesiwo ƒe lolome ƒe dɔwɔnuwo tso anyigbatata sia me, tsɔ kpe ɖe míaƒe dɔwɔnuwo ƒe API ŋu.
$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
);
Dɔwɔnuwo ƒe API
Woɖe gbeƒã ŋɔŋlɔdzesi kple nuŋɔŋlɔ ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss
. Srɔ̃ alesi nàzã utilities API lae.
"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
),