Tekst
Dokumentacija i primjeri uobičajenih tekstualnih uslužnih programa za kontrolu poravnanja, prelamanja, težine i još mnogo toga.
Poravnanje teksta
Lako poravnajte tekst sa komponentama pomoću klasa poravnanja teksta. Za početno, krajnje i centralno poravnanje, dostupne su responzivne klase koje koriste iste prelomne tačke širine prikaza kao i sistem mreže.
Počnite poravnati tekst na svim veličinama okvira za prikaz.
Centrirano poravnat tekst na svim veličinama okvira za prikaz.
Kraj poravnati tekst na svim veličinama okvira za prikaz.
Započnite poravnati tekst na okvirima za prikaz veličine SM (mali) ili širi.
Počnite poravnati tekst na okvirima za prikaz veličine MD (srednje) ili šire.
Počnite poravnati tekst na okvirima za prikaz veličine LG (veliki) ili širim.
Počnite poravnati tekst na prozorima veličine XL (ekstra-veliki) ili širi.
<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>Prelamanje teksta i prelijevanje
Prelomi tekst .text-wrapklasom.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Spriječite prelamanje teksta .text-nowrapklasom.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Pauza riječi
Spriječite duge nizove teksta da razbiju izgled vaših komponenti pomoću .text-breakza postavljanje word-wrap: break-wordi word-break: break-word. Koristimo word-wrapumjesto uobičajenijeg overflow-wrapza širu podršku pretraživača i dodajemo zastarjeli word-break: break-wordkako bismo izbjegli probleme sa flex kontejnerima.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakje uklonjen iz našeg RTL kompajliranog CSS-a.
Transformacija teksta
Transformirajte tekst u komponente sa klasama velikih slova.
Tekst malim slovima.
Tekst velikim slovima.
Veliki tekst.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Obratite pažnju na to kako .text-capitalizese mijenja samo prvo slovo svake riječi, ostavljajući velika i mala slova bez utjecaja.
Veličina slova
Brzo promijenite font-sizetekst. Dok se naše klase naslova (npr. .h1– .h6) primjenjuju font-size, font-weight, i line-height, ovi uslužni programi primjenjuju se samofont-size . Veličina ovih uslužnih programa odgovara HTML elementima naslova, tako da kako se broj povećava, njihova veličina se smanjuje.
.fs-1 tekst
.fs-2 tekst
.fs-3 tekst
.fs-4 tekst
.fs-5 tekst
.fs-6 tekst
<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>Prilagodite svoje dostupne font-sizes modificiranjem $font-sizesSass mape.
Težina fonta i kurziv
Brzo promijenite font-weightili font-styleteksta pomoću ovih uslužnih programa. font-stylekomunalne usluge su skraćene kao .fst-*, a font-weightkomunalne usluge su skraćene kao .fw-*.
Bold text.
Podebljani tekst težine (u odnosu na roditeljski element).
Tekst normalne težine.
Lagan tekst.
Lakši tekst (u odnosu na roditeljski element).
Kurziv tekst.
Tekst sa normalnim stilom fonta
<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>Visina linije
Promijenite visinu linije pomoću .lh-*uslužnih programa.
Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.
Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.
Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.
Ovo je dugačak pasus napisan da pokaže kako naši uslužni programi utiču na visinu linije elementa. Klase se primjenjuju na sam element ili ponekad na roditeljski element. Ove klase se mogu prilagoditi prema potrebi pomoću našeg uslužnog API-ja.
<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
Promijenite odabir u naš skup jednorazrednih fontova pomoću .font-monospace.
Ovo je u monoprostoru
<p class="font-monospace">This is in monospace</p>Resetuj boju
Poništite boju teksta ili veze pomoću .text-reset, tako da naslijedi boju od svog roditelja.
Isključen tekst sa linkom za resetovanje .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekoracija teksta
Ukrasite tekst u komponentama sa klasama dekoracije teksta.
Ovaj tekst ima liniju ispod.
Ovaj tekst ima liniju koja prolazi kroz njega.
Ovaj link ima uklonjen tekstualni ukras<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
Varijable
// 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;
Mape
Pomoćni programi veličine fonta se generiraju iz ove mape, u kombinaciji s našim uslužnim API-jem.
$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
Pomoćni programi za font i tekst su deklarisani u našem API-ju za pomoćne programe u scss/_utilities.scss. Naučite kako koristiti uslužni 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
),