Testu
Documentazione è esempi per utilità di testu cumuni per cuntrullà l'allinjamentu, l'imballaggio, u pesu, è più.
Allineamentu di testu
Realignate facilmente u testu à i cumpunenti cù classi di allineamentu di testu. Per l'allineamentu di u principiu, di a fine è di u centru, e classi rispunsevuli sò dispunibuli chì utilizanu i stessi punti di rottura di larghezza di vista cum'è u sistema di griglia.
Cumincià u testu allinatu in tutte e dimensioni di vista.
Centra u testu allinatu nantu à tutte e dimensioni di vista.
Finisce u testu allinatu nantu à tutte e dimensioni di vista.
Cumincià u testu allinatu nantu à i vetri di dimensione SM (picculu) o più largu.
Cumincià u testu allinatu nantu à i vetri di dimensione MD (mediu) o più largu.
Cumincià u testu allinatu nantu à i vetri di dimensioni LG (grande) o più largu.
Cumincià u testu allinatu nantu à i vetri di dimensione XL (extra-large) o più largu.
<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>
Imballaggio di testu è overflow
Imbulighjate u testu cù una .text-wrap
classe.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Impedisce u testu di imballà cù una .text-nowrap
classe.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Pausa di parolla
Impedisce à longu stringhe di testu di rompe u layout di i vostri cumpunenti usendu .text-break
per stabilisce word-wrap: break-word
è word-break: break-word
. Utilizemu word-wrap
invece di u più cumuni overflow-wrap
per un supportu più largu di u navigatore, è aghjunghje u deprecated word-break: break-word
per evità prublemi cù cuntenituri flessibili.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
hè eliminatu da u nostru CSS compilatu RTL.
Trasformazione di u testu
Trasfurmà u testu in cumpunenti cù classi di capitalizazione di testu.
Testu minuscule.
Testu in maiuscule.
Testu in majuscule.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Nota cumu .text-capitalize
cambia solu a prima lettera di ogni parolla, lascendu u casu di qualsiasi altre lettere micca affettatu.
Dimensione di font
Cambia rapidamente u font-size
testu. Mentre i nostri classi di intestazioni (per esempiu, .h1
- .h6
) s'applicanu font-size
, font-weight
, è line-height
, queste utilità si applicanu solu font-size
. A dimensione per queste utilità currisponde à l'elementi di l'intestazione HTML, perchè u numeru aumenta, a so dimensione diminuisce.
.fs-1 testu
.fs-2 testu
.fs-3 testu
.fs-4 testu
.fs-5 testu
.fs-6 testu
<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>
Personalizà i vostri dispunibuli font-size
mudificà a $font-sizes
mappa Sass.
Peso di font è italicu
Cambia rapidamente u font-weight
o font-style
di u testu cù queste utilità. font-style
utilità sò abbreviate cum'è .fst-*
è font-weight
utilità sò abbreviate cum'è .fw-*
.
Testu in grassu.
Testu di pesu più grassu (relativu à l'elementu parent).
Testu di pesu normale.
Testu di pisu ligeru.
Testu di pesu più ligeru (relativu à l'elementu parent).
Testu italicu.
Testu cù stile di font normale
<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>
Altezza di a linea
Cambia l'altezza di a linea cù .lh-*
utilità.
Questu hè un longu paràgrafu scrittu per vede cumu l'altezza di a linea di un elementu hè affettata da e nostre utilità. E classi sò appiicati à l'elementu stessu o qualchì volta l'elementu parent. Queste classi ponu esse persunalizate cum'è necessariu cù a nostra API di utilità.
Questu hè un longu paràgrafu scrittu per vede cumu l'altezza di a linea di un elementu hè affettata da e nostre utilità. E classi sò appiicati à l'elementu stessu o qualchì volta l'elementu parent. Queste classi ponu esse persunalizate cum'è necessariu cù a nostra API di utilità.
Questu hè un longu paràgrafu scrittu per vede cumu l'altezza di a linea di un elementu hè affettata da e nostre utilità. E classi sò appiicati à l'elementu stessu o qualchì volta l'elementu parent. Queste classi ponu esse persunalizate cum'è necessariu cù a nostra API di utilità.
Questu hè un longu paràgrafu scrittu per vede cumu l'altezza di a linea di un elementu hè affettata da e nostre utilità. E classi sò appiicati à l'elementu stessu o qualchì volta l'elementu parent. Queste classi ponu esse persunalizate cum'è necessariu cù a nostra API di utilità.
<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
Cambia una selezzione à a nostra pila di font monospace cù .font-monospace
.
Questu hè in monospace
<p class="font-monospace">This is in monospace</p>
Resetta u culore
Resettate un testu o un culore di ligame cù .text-reset
, in modu chì eredite u culore da u so parente.
Testu silenziu cù un ligame di reset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Decorazione di testu
Decorate u testu in cumpunenti cù classi di decorazione di testu.
Stu testu hà una linea sottu.
Stu testu hà una linea chì passa per ellu.
Stu ligame hà a so decorazione di testu eliminata<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
Variabili
// 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
L'utilità di dimensione di font sò generate da questa mappa, in cumminazione cù a nostra API di utilità.
$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
L'utilità di font è testu sò dichjarate in a nostra API d'utilità in scss/_utilities.scss
. Amparate cumu utilizà l'API utilities.
"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
),