Text
Zvinyorwa uye mienzaniso yezvakajairwa zvinyorwa zvekushandisa kudzora kurongeka, kuputira, huremu, nezvimwe.
Kurongeka kwemavara
Gadzirisa zvinyorwa kune zvikamu zvine makirasi ekugadzirisa zvinyorwa. Kwekutanga, kupera, uye kurongeka kwepakati, makirasi anopindura aripo anoshandisa iwo akafanana ekutarisa hupamhi hwekuputsika segridhi system.
Tanga mavara akarongedzerwa pamasaizi ese ekutarisisa.
Mavara akarongwa nepakati pamasaizi ese enzvimbo yekuona.
Pedzisa mavara akarongedzerwa pamasaizi ese ekutarisisa.
Tanga mavara akarongedzerwa pane ekuona nzvimbo saizi SM (diki) kana yakafara.
Tanga mavara akarongedzerwa pazviteshi zvekuona saizi MD (yepakati) kana yakafara.
Tanga mameseji akarongedzerwa pane ekuona nzvimbo saizi LG (huru) kana yakafara.
Tanga mameseji akarongedzerwa pane ekuona nzvimbo saizi XL (yakawedzera-yakakura) kana yakafara.
<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>
Kuputirwa kwemavara uye kufashukira
Peta zvinyorwa .text-wrap
nekirasi.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Dzivirira zvinyorwa kubva pakuputirwa .text-nowrap
nekirasi.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Kutsemuka kweshoko
Dzivirira tambo refu dzemavara kubva pakupwanya marongerwo ezvikamu zvako nekushandisa .text-break
kuseta word-wrap: break-word
uye word-break: break-word
. Isu tinoshandisa word-wrap
pachinzvimbo cheyakajairika overflow-wrap
kune yakafara bhurawuza rutsigiro, uye towedzera yakadzikiswa word-break: break-word
kudzivirira nyaya neflex containers.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
inobviswa kubva kune yedu RTL yakaunganidzwa CSS.
Kushandura mavara
Shandura zvinyorwa muzvikamu zvine makirasi emavara makuru.
Mavara akaderedzwa.
Mavara makuru.
CapiTaliZed zvinyorwa.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Ziva kuti .text-capitalize
anoshandura sei vara rekutanga rezwi rega rega, achisiya nyaya yemamwe mavara asina kukanganiswa.
Saizi yefonti
Kurumidza chinja font-size
mavara. Nepo makirasi edu emusoro (semuenzaniso, .h1
- .h6
) anoshanda font-size
, font-weight
, uye line-height
, izvi zvinoshandiswa zvinongoshanda chetefont-size
. Kukura kwezvishandiso izvi kunoenderana nemusoro weHTML zvinhu, saka sezvo nhamba inowedzera, saizi yavo inodzikira.
.fs-1 zvinyorwa
.fs-2 zvinyorwa
.fs-3 zvinyorwa
.fs-4 zvinyorwa
.fs-5 zvinyorwa
.fs-6 zvinyorwa
<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>
Gadzirisa yako iripo font-size
nekugadzirisa $font-sizes
mepu yeSass.
Uremu hwemafonti uye tits
Kurumidza shandura iyo font-weight
kana font-style
yemavara nezvishandiso izvi. font-style
zvishandiso zvinopfupikiswa se .fst-*
uye font-weight
zvinoshandiswa zvinopfupikiswa se .fw-*
.
Bold text.
Bolder uremu zvinyorwa (zvinoenderana nechinhu chemubereki).
Normal uremu chinyorwa.
Chiedza chinorema chinyorwa.
Huremu huremu zvinyorwa (zvinoenderana nechinhu chemubereki).
Rugwaro rwakatsveyama.
Mavara ane zvakajairika font style
<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>
Mutsara urefu
Shandura urefu hwemutsara .lh-*
nezvinoshandiswa.
Iyi indima refu yakanyorwa kuratidza kuti mutsara-urefu hwechinhu chinokanganiswa sei nezvishandiso zvedu. Makirasi anoshandiswa kune chinhu pachacho kana dzimwe nguva chinhu chemubereki. Aya makirasi anogona kugadziridzwa sezvinodiwa nekushandisa kwedu API.
Iyi indima refu yakanyorwa kuratidza kuti mutsara-urefu hwechinhu chinokanganiswa sei nezvishandiso zvedu. Makirasi anoshandiswa kune chinhu pachacho kana dzimwe nguva chinhu chemubereki. Aya makirasi anogona kugadziridzwa sezvinodiwa nekushandisa kwedu API.
Iyi indima refu yakanyorwa kuratidza kuti mutsara-urefu hwechinhu chinokanganiswa sei nezvishandiso zvedu. Makirasi anoshandiswa kune chinhu pachacho kana dzimwe nguva chinhu chemubereki. Aya makirasi anogona kugadziridzwa sezvinodiwa nekushandisa kwedu API.
Iyi indima refu yakanyorwa kuratidza kuti mutsara-urefu hwechinhu chinokanganiswa sei nezvishandiso zvedu. Makirasi anoshandiswa kune chinhu pachacho kana dzimwe nguva chinhu chemubereki. Aya makirasi anogona kugadziridzwa sezvinodiwa nekushandisa kwedu 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>
Monospace
Chinja sarudzo kune yedu monospace font stack ne .font-monospace
.
Izvi zviri mune monospace
<p class="font-monospace">This is in monospace</p>
Reset ruvara
Gadzirisa zvakare mavara kana ruvara rwelink ne .text-reset
, kuti itore nhaka yeruvara kubva kumubereki wayo.
Mavara akadzimwa ane chinongedzo chekugadzirisa .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Kushongedza kwemavara
Shongedza zvinyorwa muzvikamu zvine makirasi ekushongedza zvinyorwa.
Chinyorwa ichi chine mutsetse pasi pacho.
Chinyorwa ichi chine mutsara unofamba nacho.
Iyi link ine mavara ayo ekushongedza abviswa<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
Variables
// 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;
Maps
Font-saizi zvekushandisa zvinogadzirwa kubva pamepu iyi, musanganiswa neyedu zvekushandisa 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
);
Purogiramu inonzi Utilities
Mafonti uye mameseji ekushandisa anoziviswa mune zvedu zvekushandisa API mu scss/_utilities.scss
. Dzidza mashandisiro ezvishandiso 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
),