Masalabolo
Sɛbɛnw ni misaliw sɛbɛnni nafama nafamaw kama walasa ka ɲɔgɔndan, sirili, girinya ani fɛn wɛrɛw kɔlɔsi.
Sɛbɛnniw labɛncogo
Aw bɛ sɛbɛnniw labɛn kokura nɔgɔya la ka kɛɲɛ ni yɔrɔw ye minnu bɛ sɛbɛnniw labɛncogo kalanw na. Daminɛ, laban ani cɛmancɛ ɲɔgɔndan kama, jaabi kalanw bɛ sɔrɔ minnu bɛ baara kɛ ni filɛlikɛyɔrɔ bonya kariyɔrɔ kelenw ye ni grid system ye.
Sɛbɛnni minnu bɛ ɲɔgɔn kan, olu daminɛ filɛlikɛyɔrɔ hakɛw bɛɛ kan.
Cɛmancɛ sɛbɛnni minnu bɛ ɲɔgɔn kan filɛlikɛyɔrɔ hakɛw bɛɛ kan.
Sɛbɛn minnu bɛ ɲɔgɔn kan, olu laban filɛlikɛlanw hakɛw bɛɛ kan.
Sɛbɛn minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye SM (misɛnnin) ye walima minnu ka bon.
Sɛbɛn minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye MD (cɛmancɛ) ye walima minnu ka bon.
Sɛbɛn minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye LG (ba) ye walima minnu ka bon.
Sɛbɛnni minnu bɛ ɲɔgɔn kan, olu daminɛ filɛliyɔrɔw kan minnu bonya ye XL ye (extra-large) walima minnu ka bon.
<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>
Sɛbɛnniw sirili ani u falenni
Aw bɛ sɛbɛnniw siri ni .text-wrap
kalan ye.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Aw bɛ sɛbɛnniw bali ka siri ni .text-nowrap
kalan ye.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Daɲɛw tiɲɛni
Aw bɛ sɛbɛnni janyalenw bali ka aw ka yɔrɔw labɛncogo tiɲɛ ni baara kɛli ye ni .text-break
to set word-wrap: break-word
ani word-break: break-word
. An bɛ baara Kɛ ni word-wrap
min ka ca ni tɔw ye, o nɔ na overflow-wrap
walasa ka navigatɔrɔn dɛmɛ ka caya, ani ka deprecatedw Fàra o kan word-break: break-word
walasa ka an yɛrɛ tanga koɲɛw ma ni flex minɛnw ye.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
a bɛ Bɔ an ka RTL CSS lajɛlen na.
Sɛbɛnni caman tigɛli
Sɛbɛnw bɛrɛbɛnni kɛ yɔrɔw la ni sɛbɛnnibolow ye minnu bɛ sɛbɛnni kɛ ni sɛbɛnnibolow ye.
Sɛbɛnni fitininw.
Sɛbɛnni minnu bɛ sɛbɛn ni sɛbɛnnibolo belebelebaw ye.
Sɛbɛn min bɛ wele ko CapitaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
A kɔlɔsi cogo min na .text-capitalize
a bɛ daɲɛ kelen-kelen bɛɛ sɛbɛnni fɔlɔ dɔrɔn Changé, ka sɛbɛnni wɛrɛw cogoya to yen min tɛ nɔ bila a la.
Font hakɛ
Teliya la ka font-size
sɛbɛnniw Changer. Hali n’an ka kalansenw (misali la, .h1
– .h6
) bɛ baara kɛ font-size
, font-weight
, ani line-height
, o nafalanw bɛ baara kɛ dɔrɔnfont-size
. O nafalanw bonya bɛ Bɛn HTML ka kùnnafoni-cimago-yɔrɔw ma, o la ni jate bɛ caya, u bonya bɛ Dɔgɔya.
.fs-1 sɛbɛnni
.fs-2 sɛbɛnni
.fs-3 sɛbɛnni
.fs-4 sɛbɛnni
.fs-5 sɛbɛnni
.fs-6 sɛbɛnni
<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>
Aw ye aw ka s sɔrɔlenw kɛ ka kɛɲɛ ni aw yɛrɛ sago ye ni aw ye Sass karti font-size
caman sɛmɛntiya .$font-sizes
Font girinya ani italiki
Teliya la , sɛbɛnni font-weight
walima font-style
sɛbɛnni caman Changer ni nin nafamafɛnw ye. font-style
nafamafɛnw bɛ surunya i n' a fɔ .fst-*
ani font-weight
nafalanw bɛ surunya i n' a fɔ .fw-*
.
Sɛbɛnni minnu sɛbɛnnen don ni nɛrɛmuguma ye.
Sɛbɛnni min girinya ka bon (ka kɛɲɛ ni bangebaga yɔrɔ ye).
Texte de poids normal.
Sɛbɛnni min ka nɔgɔn.
Sɛbɛn min girinya ka nɔgɔn (ka kɛɲɛ ni bangebaga yɔrɔ ye).
Sɛbɛnni minnu bɛ sɛbɛn ni italiki ye.
Sɛbɛnni ni sɛbɛnni kɛcogo nɔrɔlen
<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>
Layini janya
Aw bɛ layini janya Changer ni .lh-*
utilités ye.
Nin ye dakun jan ye min sɛbɛnna walasa k’a jira cogo min na fɛn dɔ ka layini-janya bɛ nɔ bila an ka nafamafɛnw na. Kalansow bɛ Kɛ fɛn yɛrɛ kan walima tuma dɔw la fɛn bangebaga kan. O kalanw bɛ se ka ladilan i n’a fɔ a mago bɛ cogo min na ni an ka nafama API ye.
Nin ye dakun jan ye min sɛbɛnna walasa k’a jira cogo min na fɛn dɔ ka layini-janya bɛ nɔ bila an ka nafamafɛnw na. Kalansow bɛ Kɛ fɛn yɛrɛ kan walima tuma dɔw la fɛn bangebaga kan. O kalanw bɛ se ka ladilan i n’a fɔ a mago bɛ cogo min na ni an ka nafama API ye.
Nin ye dakun jan ye min sɛbɛnna walasa k’a jira cogo min na fɛn dɔ ka layini-janya bɛ nɔ bila an ka nafamafɛnw na. Kalansow bɛ Kɛ fɛn yɛrɛ kan walima tuma dɔw la fɛn bangebaga kan. O kalanw bɛ se ka ladilan i n’a fɔ a mago bɛ cogo min na ni an ka nafama API ye.
Nin ye dakun jan ye min sɛbɛnna walasa k’a jira cogo min na fɛn dɔ ka layini-janya bɛ nɔ bila an ka nafamafɛnw na. Kalansow bɛ Kɛ fɛn yɛrɛ kan walima tuma dɔw la fɛn bangebaga kan. O kalanw bɛ se ka ladilan i n’a fɔ a mago bɛ cogo min na ni an ka nafama API ye.
<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 (yɔrɔ kelen).
Sugandili dɔ Changer ka kɛ an ka monospace font stack ye ni .font-monospace
.
Nin bɛ Kɛ yɔrɔ kelen na
<p class="font-monospace">This is in monospace</p>
Reset kulɛri
Sɛbɛnni walima jɛgɛnsira dɔ kulɛri Lasegin ni .text-reset
, walasa a ka kulɛri ciyɛn ta a bangebaga fɛ.
Sɛbɛnni minnu bɛ muɲu ni reset link ye .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Texte decoration (sɛbɛnni) dekorasiyɔn
Aw bɛ sɛbɛnni masiri yɔrɔw la ni sɛbɛnni masiri kalanw ye.
Layini dɔ bɛ nin sɛbɛn in jukɔrɔ.
Nin sɛbɛn in bɛ ni zana dɔ ye min bɛ tɛmɛ a fɛ.
Nin jɛgɛn in y'a ka sɛbɛnni masirili Bɔ a la<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 ye
Yɛlɛma-yɛlɛmaw
// 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;
Kartiw
Font-size nafamafɛnw bɛ Bɔ nin karti in na, ka fara an ka nafamafɛnw API kan.
$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
);
Nafamafɛnw API
Font ni sɛbɛnni nafamafɛnw bɛ fɔ an ka nafamafɛnw API kɔnɔ san scss/_utilities.scss
. Aw ye baara kɛcogo dɔn ni utilities API ye.
"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
),