Teksto
Dokumentado kaj ekzemploj por komunaj tekstaj utilecoj por kontroli vicigon, envolvadon, pezon kaj pli.
Teksta vicigo
Facile realigu tekston al komponantoj kun tekstaj vicigoklasoj. Por komenco, fino kaj centra vicigo, respondaj klasoj estas disponeblaj, kiuj uzas la samajn vidfenejlarĝajn rompopunktojn kiel la kradsistemo.
Komencu vicigitan tekston sur ĉiuj grandecoj de vidpunkto.
Centri vicigitan tekston sur ĉiuj grandoj de vidpunkto.
Finu vicigitan tekston sur ĉiuj grandecoj de vidpunkto.
Komencu vicigitan tekston sur vidfenestroj SM (malgrandaj) aŭ pli larĝaj.
Komencu vicigitan tekston sur vidfenestroj MD (mezaj) aŭ pli larĝaj.
Komencu vicigitan tekston sur vidfenestroj grandecoj LG (grandaj) aŭ pli larĝaj.
Komencu vicigitan tekston sur vidfenestroj XL (ekstregrandaj) aŭ pli larĝaj.
<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>Teksto envolvado kaj superfluo
Envolvi tekston kun .text-wrapklaso.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Malhelpi tekston envolvi kun .text-nowrapklaso.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Vortrompo
Malhelpu longajn tekstoĉenojn rompi la aranĝon de viaj komponantoj per uzado .text-breakde agordi word-wrap: break-wordkaj word-break: break-word. Ni uzas word-wrapanstataŭ la pli oftan overflow-wrappor pli larĝa retumila subteno, kaj aldonas la malrekomenditan word-break: break-wordpor eviti problemojn kun fleksaj ujoj.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakestas forigita de nia RTL kompilita CSS.
Teksto transformo
Transformu tekston en komponantojn kun klasoj de tekstaj majuskloj.
Minuskla teksto.
Majuskla teksto.
Majuskigita teksto.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Notu kiel .text-capitalizenur ŝanĝas la unuan literon de ĉiu vorto, lasante la majuskon de iuj aliaj literoj netuŝita.
Grando de tiparo
Rapide ŝanĝu la font-sizetekston. Dum niaj titoloj klasoj (ekz., .h1– .h6) validas font-size, font-weight, kaj line-height, ĉi tiuj utilecoj validas nurfont-size . Dimensioj por ĉi tiuj utilecoj kongruas kun la titolelementoj de HTML, do kiam la nombro pliiĝas, ilia grandeco malpliiĝas.
.fs-1 teksto
.fs-2 teksto
.fs-3 teksto
.fs-4 teksto
.fs-5 teksto
.fs-6 teksto
<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>Agordu viajn disponeblajn font-sizes modifante la $font-sizesSass-mapon.
Tiparopezo kaj kursivo
Rapide ŝanĝu la font-weightaŭ font-stylede teksto per ĉi tiuj iloj. font-styleutilecoj estas mallongigitaj kiel .fst-*kaj font-weightutilecoj estas mallongigitaj kiel .fw-*.
Grada teksto.
Pli grasa peza teksto (rilate al la gepatra elemento).
Normala peza teksto.
Malpeza teksto.
Pli malpeza teksto (rilate al la gepatra elemento).
Kursiva teksto.
Teksto kun normala tiparostilo
<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>Linia alteco
Ŝanĝu la linialton per .lh-*utilecoj.
Ĉi tio estas longa alineo skribita por montri kiel la linio-alteco de elemento estas tuŝita de niaj utilecoj. Klasoj estas aplikataj al la elemento mem aŭ foje al la gepatra elemento. Ĉi tiuj klasoj povas esti personecigitaj laŭbezone per nia utileca API.
Ĉi tio estas longa alineo skribita por montri kiel la linio-alteco de elemento estas tuŝita de niaj utilecoj. Klasoj estas aplikataj al la elemento mem aŭ foje al la gepatra elemento. Ĉi tiuj klasoj povas esti personecigitaj laŭbezone per nia utileca API.
Ĉi tio estas longa alineo skribita por montri kiel la linio-alteco de elemento estas tuŝita de niaj utilecoj. Klasoj estas aplikataj al la elemento mem aŭ foje al la gepatra elemento. Ĉi tiuj klasoj povas esti personecigitaj laŭbezone per nia utileca API.
Ĉi tio estas longa alineo skribita por montri kiel la linio-alteco de elemento estas tuŝita de niaj utilecoj. Klasoj estas aplikataj al la elemento mem aŭ foje al la gepatra elemento. Ĉi tiuj klasoj povas esti personecigitaj laŭbezone per nia utileca 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>Monospaco
Ŝanĝu elekton al nia monospaca tiparstako per .font-monospace.
Ĉi tio estas en monospaco
<p class="font-monospace">This is in monospace</p>Restarigi koloron
Restarigu la koloron de teksto aŭ ligilo per .text-reset, tiel ke ĝi heredu la koloron de sia gepatro.
Silentita teksto kun rekomencigita ligilo .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Teksta ornamado
Ornamu tekston en komponantoj per tekstornamaj klasoj.
Ĉi tiu teksto havas linion sub ĝi.
Ĉi tiu teksto havas linion tra ĝi.
Ĉi tiu ligilo havas sian tekstan ornamon forigita<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
Variabloj
// 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;
Mapoj
Tipargrandaj iloj estas generitaj de ĉi tiu mapo, kombine kun niaj iloj 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
);
Utilaĵoj API
Tiparo- kaj tekstaj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn 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
),