Ntawv nyeem
Cov ntaub ntawv thiab cov piv txwv rau cov ntawv nyeem siv los tswj kev sib dhos, qhwv, qhov hnyav, thiab lwm yam.
Cov ntawv nyeem alignment
Yooj yim realign cov ntawv rau cov khoom nrog cov chav kawm ntawv nyeem. Rau qhov pib, qhov kawg, thiab qhov chaw nyob nruab nrab, cov chav kawm teb muaj nyob uas siv tib qhov kev pom dav dav qhov sib cais raws li kab sib chaws.
Pib dlhos cov ntawv ntawm txhua qhov loj ntawm qhov chaw saib.
Muab cov ntawv nyob hauv nruab nrab ntawm txhua qhov loj ntawm qhov chaw saib.
Xaus cov ntawv sib dhos ntawm txhua qhov loj ntawm qhov chaw saib.
Pib dlhos cov ntawv ntawm viewports loj SM (me) los yog dav dua.
Pib dlhos cov ntawv ntawm viewports loj MD (nruab nrab) los yog wider.
Pib dlhos cov ntawv ntawm viewports loj LG (loj) los yog wider.
Pib ua raws cov ntawv nyeem ntawm qhov chaw saib qhov loj XL (ntxiv-loj) lossis dav dua.
<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>
Text wrapping thiab overflow
Qhwv ntawv nrog ib .text-wrap
chav kawm.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Tiv thaiv cov ntawv los ntawm kev qhwv nrog ib .text-nowrap
chav kawm.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Lo lus tawg
Tiv thaiv cov hlua ntev ntawm cov ntawv los ntawm kev tawg koj cov khoom 'layout los ntawm kev siv .text-break
los teeb tsa word-wrap: break-word
thiab word-break: break-word
. Peb siv word-wrap
es tsis txhob siv ntau dua overflow-wrap
rau kev txhawb nqa dav dav ntawm browser, thiab ntxiv qhov tsis word-break: break-word
txaus siab kom tsis txhob muaj teeb meem nrog flex ntim.
hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
raug tshem tawm ntawm peb RTL suav nrog CSS.
Cov ntawv hloov pauv
Hloov cov ntawv hauv cov khoom nrog cov chav kawm ntawv sau ntawv.
Cov ntawv qis.
Uppercased ntawv nyeem.
CapiTaliZed ntawv nyeem.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Nco ntsoov yuav ua li cas .text-capitalize
tsuas yog hloov thawj tsab ntawv ntawm txhua lo lus, tawm hauv rooj plaub ntawm lwm cov ntawv tsis cuam tshuam.
Font loj
Hloov cov font-size
ntawv sai sai. Thaum peb cov chav kawm (piv txwv li, .h1
– .h6
) siv font-size
, font-weight
, thiab line-height
, cov khoom siv hluav taws xob no tsuas siv tau font-size
. Sizing rau cov khoom siv hluav taws xob no sib phim HTML cov ntsiab lus, yog li tus lej nce, lawv qhov loj me me.
.fs-1 lus
.fs-2 lus
.fs-3 lus
.fs-4 lus
.fs-5 lus
.fs-6 lus
<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>
Customize koj muaj font-size
s los ntawm kev hloov kho $font-sizes
Sass daim ntawv qhia.
Font hnyav thiab italics
Hloov cov ntawv font-weight
lossis font-style
cov ntawv sai sai nrog cov khoom siv no. font-style
utilities yog abbreviated li .fst-*
thiab font-weight
utilities yog abbreviated li .fw-*
.
Cov ntawv loj.
Bolder hnyav ntawv (xws li niam txiv lub ntsiab).
Cov ntawv hnyav li qub.
Lub teeb nyhav ntawv.
Cov ntawv hnyav dua (xws li niam txiv lub ntsiab).
Italic ntawv nyeem.
Cov ntawv nrog ib txwm 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>
Kab qhov siab
Hloov kab qhov siab nrog .lh-*
cov khoom siv hluav taws xob.
Qhov no yog ib nqe lus ntev sau los qhia tias kab-qhov siab ntawm ib lub ntsiab yog cuam tshuam los ntawm peb cov khoom siv. Cov chav kawm yog siv rau lub caij nws tus kheej lossis qee zaum niam txiv lub caij. Cov chav kawm no tuaj yeem hloov kho raws li xav tau nrog peb cov khoom siv API.
Qhov no yog ib nqe lus ntev sau los qhia tias kab-qhov siab ntawm ib lub ntsiab yog cuam tshuam los ntawm peb cov khoom siv. Cov chav kawm yog siv rau lub caij nws tus kheej lossis qee zaum niam txiv lub caij. Cov chav kawm no tuaj yeem hloov kho raws li xav tau nrog peb cov khoom siv API.
Qhov no yog ib nqe lus ntev sau los qhia tias kab-qhov siab ntawm ib lub ntsiab yog cuam tshuam los ntawm peb cov khoom siv. Cov chav kawm yog siv rau lub caij nws tus kheej lossis qee zaum niam txiv lub caij. Cov chav kawm no tuaj yeem hloov kho raws li xav tau nrog peb cov khoom siv API.
Qhov no yog ib nqe lus ntev sau los qhia tias kab-qhov siab ntawm ib lub ntsiab yog cuam tshuam los ntawm peb cov khoom siv. Cov chav kawm yog siv rau lub caij nws tus kheej lossis qee zaum niam txiv lub caij. Cov chav kawm no tuaj yeem hloov kho raws li xav tau nrog peb cov khoom siv 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
Hloov ib qho kev xaiv rau peb monospace font pawg nrog .font-monospace
.
Qhov no yog nyob rau hauv monospace
<p class="font-monospace">This is in monospace</p>
Rov pib xim
Pib dua cov ntawv nyeem lossis txuas cov xim nrog .text-reset
, kom nws tau txais cov xim los ntawm nws niam nws txiv.
Muted ntawv nrog ib tug reset link .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Cov ntawv kho kom zoo nkauj
Kho cov ntawv hauv cov khoom nrog cov chav kawm kho kom zoo nkauj.
Cov ntawv no muaj ib kab hauv qab nws.
Cov ntawv no muaj ib kab mus hla nws.
Qhov txuas no muaj nws cov ntawv kho kom zoo nkauj tshem tawm<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
Hloov pauv
// 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-loj siv hluav taws xob yog tsim los ntawm daim ntawv qhia no, ua ke nrog peb cov khoom siv 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
Cov ntawv siv font thiab ntawv tau tshaj tawm hauv peb cov khoom siv API hauv scss/_utilities.scss
. Kawm paub siv cov khoom siv hluav taws xob API li cas.
"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
),