Testo
Documentazione ed esempi per le comuni utilità di testo per controllare l'allineamento, il wrapping, il peso e altro ancora.
Allineamento del testo
Riallinea facilmente il testo ai componenti con le classi di allineamento del testo. Per l'allineamento iniziale, finale e centrale, sono disponibili classi reattive che utilizzano gli stessi punti di interruzione della larghezza della finestra del sistema griglia.
Inizia il testo allineato su tutte le dimensioni della finestra.
Testo allineato al centro su tutte le dimensioni della finestra.
Fine del testo allineato su tutte le dimensioni della finestra.
Inizia il testo allineato su finestre di dimensioni SM (piccole) o più larghe.
Inizia il testo allineato su finestre di dimensioni MD (medie) o più larghe.
Inizia il testo allineato su finestre di dimensioni LG (grande) o più larghe.
Inizia il testo allineato su finestre di dimensioni XL (extra-large) o più larghe.
<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>A capo automatico e overflow del testo
Avvolgi il testo con una .text-wrapclasse.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Impedisci al testo di andare a capo con una .text-nowrapclasse.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Rottura di parole
Impedisci a lunghe stringhe di testo di interrompere il layout dei tuoi componenti utilizzando .text-breakper impostare word-wrap: break-worde word-break: break-word. Utilizziamo word-wrapinvece il più comune overflow-wrapper un supporto più ampio del browser e aggiungiamo il deprecato word-break: break-wordper evitare problemi con i contenitori flessibili.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakviene rimosso dal nostro CSS compilato RTL.
Trasformazione del testo
Trasforma il testo in componenti con classi di capitalizzazione del testo.
Testo minuscolo.
Testo maiuscolo.
testo maiuscolo.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Nota come .text-capitalizecambia solo la prima lettera di ogni parola, lasciando inalterato il caso di tutte le altre lettere.
Dimensione del font
Cambia rapidamente il font-sizetesto. Sebbene le nostre classi di intestazione (ad esempio, .h1– .h6) si applichino font-size, font-weighte line-height, queste utilità si applicano solofont-size . Il dimensionamento per queste utilità corrisponde agli elementi di intestazione dell'HTML, quindi all'aumentare del numero, la loro dimensione diminuisce.
.fs-1 testo
.fs-2 testo
.fs-3 testo
.fs-4 testo
.fs-5 testo
.fs-6 testo
<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>Personalizza le tue disponibilità font-sizemodificando la $font-sizesmappa del Sass.
Peso del carattere e corsivo
Cambia rapidamente l' font-weighto font-styledel testo con queste utilità. font-stylele utilità sono abbreviate in .fst-*e le font-weightutilità sono abbreviate in .fw-*.
Testo grassetto.
Testo in grassetto (relativo all'elemento padre).
Testo di peso normale.
Testo leggero.
Testo più leggero (rispetto all'elemento padre).
Testo in corsivo.
Testo con stile di carattere 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 della linea
Modifica l'altezza della linea con .lh-*le utilità.
Questo è un lungo paragrafo scritto per mostrare come l'altezza della linea di un elemento è influenzata dalle nostre utilità. Le classi vengono applicate all'elemento stesso o talvolta all'elemento padre. Queste classi possono essere personalizzate secondo necessità con la nostra utility API.
Questo è un lungo paragrafo scritto per mostrare come l'altezza della linea di un elemento è influenzata dalle nostre utilità. Le classi vengono applicate all'elemento stesso o talvolta all'elemento padre. Queste classi possono essere personalizzate secondo necessità con la nostra utility API.
Questo è un lungo paragrafo scritto per mostrare come l'altezza della linea di un elemento è influenzata dalle nostre utilità. Le classi vengono applicate all'elemento stesso o talvolta all'elemento padre. Queste classi possono essere personalizzate secondo necessità con la nostra utility API.
Questo è un lungo paragrafo scritto per mostrare come l'altezza della linea di un elemento è influenzata dalle nostre utilità. Le classi vengono applicate all'elemento stesso o talvolta all'elemento padre. Queste classi possono essere personalizzate secondo necessità con la nostra utility 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>Monospazio
Cambia una selezione nella nostra pila di caratteri a spaziatura fissa con .font-monospace.
Questo è nel monospazio
<p class="font-monospace">This is in monospace</p>Ripristina colore
Reimposta il colore di un testo o di un collegamento con .text-reset, in modo che erediti il colore dal suo genitore.
Testo disattivato con un collegamento di ripristino .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Decorazione del testo
Decora il testo nei componenti con le classi di decorazione del testo.
Questo testo ha una riga sotto.
Questo testo ha una riga che lo attraversa.
A questo collegamento è stata rimossa la decorazione del testo<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;
Mappe
Le utilità per la dimensione dei caratteri vengono generate da questa mappa, in combinazione con la nostra API delle 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
);
API di utilità
Le utilità di caratteri e testo sono dichiarate nella nostra API di utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.
"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
),