Mawu
Zolemba ndi zitsanzo zamalemba omwe amagwiritsidwa ntchito kuti aziwongolera kulumikizana, kukulunga, kulemera, ndi zina zambiri.
Kuyanjanitsa mawu
Sinthani mawu mosavuta ku zigawo zokhala ndi makalasi oyika mawu. Poyambira, kumapeto, ndi kuyanjanitsa kwapakati, makalasi omvera amapezeka omwe amagwiritsa ntchito malo omwe ali ndi mawonekedwe ofanana ndi grid system.
Yambani mawu olumikizidwa pamasaizi onse owonera.
Mawu olumikizidwa pakati pamasaizi onse owonera.
Malizitsani mawu ogwirizana pamasaizi onse owonera.
Yambitsani mawu ogwirizana pamawonekedwe a SM (yaing'ono) kapena kupitilira apo.
Yambitsani mawu ogwirizana pazithunzi za MD (zapakatikati) kapena zokulirapo.
Yambitsani mawu ogwirizana pa LG (yayikulu) kapena kupitilira apo.
Yambitsani mawu ogwirizana pazithunzi zazikulu za XL (zakukulirakulira) kapena kukulirapo.
<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>Kukulunga malemba ndi kusefukira
Manga mawu ndi .text-wrapkalasi.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Pewani zolemba kuti zisamangidwe ndi .text-nowrapkalasi.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Kudula mawu
Pewani mawu amtundu wautali kuti asaphwanye masanjidwe a zigawo zanu pogwiritsa ntchito .text-breakkukhazikitsa word-wrap: break-wordndi word-break: break-word. Timagwiritsa ntchito word-wrapm'malo mwazofala overflow-wrapkwambiri pothandizira asakatuli ambiri, ndikuwonjezera zomwe zatsitsidwa word-break: break-wordkuti tipewe zovuta ndi zotengera zosinthika.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakamachotsedwa ku CSS yathu yopangidwa ndi RTL.
Kusintha mawu
Sinthani mawu kukhala zigawo ndi makalasi a zilembo zazikulu.
Mawu ocheperako.
Mawu apamwamba.
CapiTaliZed zolemba.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Onani momwe .text-capitalizeamasinthira chilembo choyamba cha liwu lililonse, kusiya chilembo chilichonse chosakhudzidwa.
Kukula kwa zilembo
Sinthani mawu font-sizemwachangu. Pomwe makalasi athu amitu (mwachitsanzo, .h1- .h6) amagwiritsa ntchito font-size, font-weight, ndi line-height, izi zimagwira ntchitofont-size . Kukula kwazinthu izi kumagwirizana ndi mutu wa HTML, kotero kuchuluka kwake kumachepa, kukula kwake kumachepa.
.fs-1 mawu
.fs-2 mawu
.fs-3 mawu
.fs-4 mawu
.fs-5 mawu
.fs-6 mawu
<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>Sinthani zomwe zilipo font-sizeposintha $font-sizesmapu a Sass.
Kulemera kwa zilembo ndi zilembo
Sinthani mwachangu mawu font-weightkapena font-stylemawu ndi izi. font-stylezofunikira zimafupikitsidwa .fst-*ndipo font-weightzofunikira zimafupikitsidwa ngati .fw-*.
Mawu olimba mtima.
Mawu olemetsa kwambiri (ogwirizana ndi gawo la makolo).
Zolemetsa zachibadwa.
Zolemba zolemera zopepuka.
Zolemetsa zopepuka (zogwirizana ndi chinthu cha makolo).
Mawu opendekeka.
Malemba okhala ndi masitayilo abwinobwino
<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>Kutalika kwa mzere
Sinthani kutalika kwa mzere ndi .lh-*zofunikira.
Iyi ndi ndime yayitali yolembedwa kuti iwonetse momwe kutalika kwa mzere wa chinthu kumakhudzidwira ndi zida zathu. Makalasi amagwiritsidwa ntchito ku chinthu chokha kapena nthawi zina gawo la makolo. Maphunzirowa amatha kusinthidwa momwe angafunikire ndi API yathu yothandizira.
Iyi ndi ndime yayitali yolembedwa kuti iwonetse momwe kutalika kwa mzere wa chinthu kumakhudzidwira ndi zida zathu. Makalasi amagwiritsidwa ntchito ku chinthu chokha kapena nthawi zina gawo la makolo. Maphunzirowa amatha kusinthidwa momwe angafunikire ndi API yathu yothandizira.
Iyi ndi ndime yayitali yolembedwa kuti iwonetse momwe kutalika kwa mzere wa chinthu kumakhudzidwira ndi zida zathu. Makalasi amagwiritsidwa ntchito ku chinthu chokha kapena nthawi zina gawo la makolo. Maphunzirowa amatha kusinthidwa momwe angafunikire ndi API yathu yothandizira.
Iyi ndi ndime yayitali yolembedwa kuti iwonetse momwe kutalika kwa mzere wa chinthu kumakhudzidwira ndi zida zathu. Makalasi amagwiritsidwa ntchito ku chinthu chokha kapena nthawi zina gawo la makolo. Maphunzirowa amatha kusinthidwa momwe angafunikire ndi API yathu yothandizira.
<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
Sinthani masanjidwe kukhala masanjidwe athu amtundu wa monospace ndi .font-monospace.
Izi zili mu monospace
<p class="font-monospace">This is in monospace</p>Bwezeretsani mtundu
Konzaninso mtundu wa mawu kapena ulalo ndi .text-reset, kuti alandire mtunduwo kuchokera kwa kholo lake.
Mawu osalankhula ndi ulalo wokonzanso .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Kukongoletsa malemba
Kongoletsani zolemba m'zigawo zokhala ndi makalasi okongoletsa zolemba.
Mawu awa ali ndi mzere pansi pake.
Mawu awa ali ndi mzere wodutsamo.
Ulalo uwu wachotsa zokongoletsa zake<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
Zosintha
// 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;
Mapu
Zothandizira kukula kwa zilembo zimapangidwa kuchokera pamapuwa, kuphatikiza ndi zida zathu za 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
);
Utilities API
Zida zamafonti ndi zolemba zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito 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
),