Tɛks
Dokumɛnt ɛn ɛgzampul fɔ kɔmɔn tɛks yutiliti fɔ kɔntrol alaynɛshɔn, rap, wet, ɛn ɔda tin dɛn.
Teks alaynɛshɔn
I izi fɔ rialayn tɛks to kɔmpɔnɛnt dɛn wit tɛks alaynɛshɔn klas dɛn. Fɔ stat, ɛnd, ɛn sɛnta alaynɛshɔn, rispɔnsiv klas dɛn de we de yuz di sem viupɔt wid brekpɔynt dɛn we di grid sistɛm gɛt.
Start alaynɛt tɛks pan ɔl di sayz dɛn fɔ di viupɔt.
Sɛntral alaynɛd tɛks pan ɔl di sayz dɛn fɔ di viupɔt.
Ɛnd alaynɛt tɛks pan ɔl di sayz dɛn fɔ di viupɔt.
Start alaynɛt tɛks pan viupɔt dɛn we gɛt saiz SM (smɔl) ɔ we big pas dat.
Start alayned tɛks pan viupɔt dɛn we gɛt saiz MD (midul) ɔ we big pas dat.
Start alaynɛt tɛks pan viupɔt dɛn we gɛt LG (big) ɔ we big pas dat.
Start alaynɛt tɛks pan viupɔt dɛn we gɛt sayz XL (ɛkstra-big) ɔ we big pas dat.
<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>
Tekst wrap ɛn ɔvaflɔ
Rap tɛks wit wan .text-wrap
klas.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Nɔ mek tɛks nɔ rap wit wan .text-nowrap
klas.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Wod brek
Nɔ mek lɔng string dɛn na tɛks brok yu kɔmpɔnɛnt dɛn layout bay we yu yuz .text-break
fɔ sɛt word-wrap: break-word
ɛn word-break: break-word
. Wi de yuz word-wrap
insted ɔf di mɔ kɔmɔn overflow-wrap
fɔ wida brawza sɔpɔt, ɛn ad di deprecated word-break: break-word
fɔ avɔyd prɔblɛm wit fleks kɔntena dɛn.
Mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
dɛn pul am na wi RTL kɔmpilayt CSS.
Tekst transfɔm
Transfɔm tɛks insay kɔmpɔnɛnt dɛn wit tɛks kapitaylayz klas dɛn.
Tekst we gɛt smɔl smɔl lɛta dɛn.
Di tɛks we gɛt big big lɛta dɛn.
Tekst we dɛn dɔn Kapitaliz.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Notis aw i .text-capitalize
jɔs de chenj di fɔs lɛta fɔ ɛni wɔd, ɛn lɛf di kes fɔ ɛni ɔda lɛta nɔ afɛkt.
Fɔnt saiz
Kwik kwik wan chenj di font-size
ɔf tɛks. Pan ɔl we wi edlayn klas dɛn (ɛgz., .h1
– .h6
) de aplay font-size
, font-weight
, ɛn line-height
, dɛn yutiliti ya de aplay nɔmɔ font-size
. Sayzin fɔ dɛn yutiliti ya de mach di HTML in edlayn ɛlimɛnt dɛn, so as di nɔmba de go ɔp, dɛn saiz de go dɔŋ.
.fs-1 tɛks
.fs-2 tɛks
.fs-3 tɛks
.fs-4 tɛks
.fs-5 tɛks
.fs-6 tɛks
<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>
Kastamayz yu avaylabl font-size
s bay we yu chenj di $font-sizes
Sass map.
Fɔnt wet ɛn italiks
Kwik kwik wan chenj di font-weight
ɔ font-style
fɔ tɛks wit dɛn yutiliti ya. font-style
dɛn kin shɔt yutiliti dɛn as .fst-*
ɛn font-weight
dɛn kin shɔt yutiliti dɛn as .fw-*
.
Tekst we gɛt bold.
Bolder weit tɛks (rilaytiv to di mama ɛn papa ɛlimɛnt).
Nɔmal wet tɛks.
Layt wet tɛks.
Layt wet tɛks (rilaytiv to di mama ɛn papa ɛlimɛnt).
Tekst we dɛn rayt wit italik.
Tekst wit nɔmal font stayl
<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>
Layn ayt
Chenj di layn ayt wit .lh-*
yutiliti dɛn.
Dis na wan lɔng paregraf we dɛn rayt fɔ sho aw di layn-ayt fɔ wan ɛlimɛnt kin afɛkt wi yutiliti dɛn. Dɛn kin yuz klas dɛn fɔ di ɛlimɛnt sɛf ɔ sɔm tɛm dɛn de fɔ di ɛlimɛnt we de na di mama ɛn papa. Dɛn klas ya kin kɔstɔmayt as nid de wit wi yutiliti API.
Dis na wan lɔng paregraf we dɛn rayt fɔ sho aw di layn-ayt fɔ wan ɛlimɛnt kin afɛkt wi yutiliti dɛn. Dɛn kin yuz klas dɛn fɔ di ɛlimɛnt sɛf ɔ sɔm tɛm dɛn de fɔ di ɛlimɛnt we de na di mama ɛn papa. Dɛn klas ya kin kɔstɔmayt as nid de wit wi yutiliti API.
Dis na wan lɔng paregraf we dɛn rayt fɔ sho aw di layn-ayt fɔ wan ɛlimɛnt kin afɛkt wi yutiliti dɛn. Dɛn kin yuz klas dɛn fɔ di ɛlimɛnt sɛf ɔ sɔm tɛm dɛn de fɔ di ɛlimɛnt we de na di mama ɛn papa. Dɛn klas ya kin kɔstɔmayt as nid de wit wi yutiliti API.
Dis na wan lɔng paregraf we dɛn rayt fɔ sho aw di layn-ayt fɔ wan ɛlimɛnt kin afɛkt wi yutiliti dɛn. Dɛn kin yuz klas dɛn fɔ di ɛlimɛnt sɛf ɔ sɔm tɛm dɛn de fɔ di ɛlimɛnt we de na di mama ɛn papa. Dɛn klas ya kin kɔstɔmayt as nid de wit wi yutiliti 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>
Monospɛs
Chenj wan sɛlɛkshɔn to wi monospace font stak wit .font-monospace
.
Dis na insay wan ples
<p class="font-monospace">This is in monospace</p>
Riset di kɔlɔ
Riset wan tɛks ɔ link in kɔlɔ wit .text-reset
, so dat i go gɛt di kɔlɔ frɔm in mama ɔ papa.
Tekst we dɛn dɔn muv wit wan link we de riset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Teks dɛkɔreshɔn
Dekɔret tɛks insay kɔmpɔnɛnt dɛn wit tɛks dɛkɔreshɔn klas dɛn.
Dis tɛks gɛt wan layn ɔnda am.
Dis tɛks gɛt wan layn we de go tru am.
Dis link gɛt in tɛks dɛkɔreshɔn we dɛn dɔn pul<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 we bin de
Di tin dɛn we kin chenj
// 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;
Map dɛn
Fɔnt-sayz yutiliti dɛn de jenarayz frɔm dis map, in kɔmbaynshɔn wit wi yutiliti 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
);
Yutiliti dɛn API
Fɔnt ɛn tɛks yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss
. Lan aw fɔ yuz di yutiliti dɛn 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
),