Text
Documentation sy ohatra ho an'ny fampiasa lahatsoratra mahazatra hifehezana ny fampifanarahana, ny famonosana, ny lanja, ary ny maro hafa.
Fandrindrana lahatsoratra
Ampifanaraho mora amin'ny singa miaraka amin'ny kilasy fampifanarahana lahatsoratra. Ho an'ny fampifanarahana ny fanombohana, ny fiafarana ary ny afovoany, dia misy kilasy mandray andraikitra izay mampiasa teboka fiatoana mitovy amin'ny sakan'ny seranan-tsambo amin'ny rafitry ny grid.
Atombohy ny lahatsoratra mifanandrify amin'ny haben'ny seranan-tsambo rehetra.
Lahatsoratra mirindra afovoany amin'ny haben'ny seranan-tsambo rehetra.
Atsaharo ny lahatsoratra mifanandrify amin'ny haben'ny seranan-tsambo rehetra.
Atombohy ny lahatsoratra mifanandrify amin'ny seranan-tsambo mirefy SM (kely) na midadasika kokoa.
Atombohy ny lahatsoratra mifanandrify amin'ny seranan-tsambo mirefy MD (medium) na midadasika kokoa.
Atombohy ny lahatsoratra mifanandrify amin'ny LG (lehibe) na midadasika kokoa.
Atombohy ny lahatsoratra mifanandrify amin'ny seranan-tsambo mirefy XL (lehibe kokoa) na lehibe kokoa.
<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>
Famonoana lahatsoratra sy fihoaram-pefy
Fonosy lahatsoratra miaraka amin'ny .text-wrap
kilasy iray.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Sakano ny lahatsoratra tsy hofonosina amin'ny .text-nowrap
kilasy.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Vaky teny
Sakano ny andian-tsoratra lava tsy handrava ny firafitry ny singanao amin'ny fampiasana .text-break
ny fametrahana word-wrap: break-word
sy word-break: break-word
. Ampiasainay word-wrap
ho solon'ny mahazatra overflow-wrap
kokoa ho an'ny fanohanan'ny navigateur midadasika kokoa, ary ampiana ny efa lany andro word-break: break-word
mba hisorohana ny olana amin'ny container flex.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
dia nesorina tao amin'ny CSS natambatray RTL.
Fiovan'ny soratra
Ovay ny lahatsoratra amin'ny singa miaraka amin'ny kilasy fanaovana sora-baventy.
Lahatsoratra kely.
Lahatsoratra lehibe.
CapiTaliZed lahatsoratra.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Mariho ny fomba .text-capitalize
hanovana ny litera voalohany amin'ny teny tsirairay, ka tsy hisy fiantraikany amin'ny toetry ny litera hafa.
Haben'ny endritsoratra
Hanova haingana ny font-size
lahatsoratra. Raha mihatra ny kilasy lohatenintsika (oh: .h1
– .h6
) font-size
, font-weight
, ary , dia mihatra ihanyline-height
ireo fitaovana ireo . Mifanaraka amin'ny singa lohatenin'ny HTML ny habe ho an'ireo fitaovana ireo, ka rehefa mitombo ny isa dia mihena ny habeny.font-size
.fs-1 lahatsoratra
.fs-2 lahatsoratra
.fs-3 lahatsoratra
.fs-4 lahatsoratra
.fs-5 lahatsoratra
.fs-6 lahatsoratra
<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>
Amboary ny font-size
s misy anao amin'ny fanovana ny $font-sizes
sarintany Sass.
Lanja sora-baventy sy sora-mandry
Hanova haingana ny font-weight
na font-style
ny lahatsoratra miaraka amin'ireo fitaovana ireo. font-style
ny utility dia nohafohezina ho .fst-*
ary ny font-weight
utility dia nohafohezina ho .fw-*
.
Lahatsoratra matevina.
Lahatsoratra mavesa-danja kokoa (mifandray amin'ny singa ray aman-dreny).
Lahatsoratra lanja mahazatra.
Lahatsoratra maivana.
Lahatsoratra maivana kokoa (mifandray amin'ny singa ray aman-dreny).
Lahatsoratra italika.
Lahatsoratra misy endri-tsoratra mahazatra
<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>
Haavon'ny tsipika
Hanova ny haavon'ny tsipika miaraka amin'ny .lh-*
fitaovana.
Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.
Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.
Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.
Fehintsoratra lavabe nosoratana hanehoana ny fiantraikan'ny fampiasantsika ny haavon'ny tsipika iray amin'ny singa iray. Ny kilasy dia ampiharina amin'ny singa na indraindray ny singa ray. Ireo kilasy ireo dia azo amboarina araka izay ilaina amin'ny API fampiasanay.
<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
Ovay ny safidy ho amin'ny fitambaran'ny endritsoratra monospace miaraka amin'ny .font-monospace
.
Ao amin'ny monospace izany
<p class="font-monospace">This is in monospace</p>
Avereno ny loko
Avereno ny lokon'ny lahatsoratra na rohy amin'ny .text-reset
, mba handovany ny loko avy amin'ny ray aman-dreniny.
Lahatsoratra mangina miaraka amin'ny rohy famerenana .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Haingo soratra
Haingo lahatsoratra amin'ny singa miaraka amin'ny kilasy haingo lahatsoratra.
Ity lahatsoratra ity dia misy tsipika eo ambaniny.
Misy tsipika mamakivaky azy io lahatsoratra io.
Ity rohy ity dia nesorina ny haingo lahatsoratra<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
hiovaova
// 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
Ny fampiasa amin'ny endritsoratra dia novokarina avy amin'ity sari-tany ity, miaraka amin'ny API fampiasantsika.
$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
Ny endri-tsoratra sy ny endri-tsoratra dia ambara ao amin'ny utility API ao amin'ny scss/_utilities.scss
. Ianaro ny fomba fampiasana ny utility 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
),