Tipografia
Documentazione ed esempi per la tipografia Bootstrap, incluse impostazioni globali, intestazioni, corpo del testo, elenchi e altro.
Impostazioni globali
Bootstrap imposta la visualizzazione globale di base, la tipografia e gli stili di collegamento. Quando è necessario un maggiore controllo, controlla le classi di utilità testuali .
- Usa uno stack di caratteri nativo che seleziona il migliore
font-family
per ogni sistema operativo e dispositivo. - Per una scala di tipi più inclusiva e accessibile, assumiamo la radice predefinita del browser
font-size
(in genere 16px) in modo che i visitatori possano personalizzare le impostazioni predefinite del browser in base alle esigenze. - Usa gli attributi
$font-family-base
,$font-size-base
, e$line-height-base
come base tipografica applicata al<body>
. - Imposta il colore del collegamento globale tramite
$link-color
e applica le sottolineature del collegamento solo su:hover
. - Utilizzare
$body-bg
per impostare abackground-color
su<body>
(#fff
per impostazione predefinita).
Questi stili possono essere trovati all'interno _reboot.scss
e le variabili globali sono definite in _variables.scss
. Assicurati di $font-size-base
impostare rem
.
Intestazioni
Tutte le intestazioni HTML, <h1>
tramite <h6>
, sono disponibili.
Intestazione | Esempio |
---|---|
|
h1. Intestazione Bootstrap |
|
h2. Intestazione Bootstrap |
|
h3. Intestazione Bootstrap |
|
h4. Intestazione Bootstrap |
|
h5. Intestazione Bootstrap |
|
h6. Intestazione Bootstrap |
.h1
sono disponibili anche classi tramite .h6
, per quando si desidera abbinare lo stile del carattere di un'intestazione ma non è possibile utilizzare l'elemento HTML associato.
h1. Intestazione Bootstrap
h2. Intestazione Bootstrap
h3. Intestazione Bootstrap
h4. Intestazione Bootstrap
h5. Intestazione Bootstrap
h6. Intestazione Bootstrap
Personalizzazione delle intestazioni
Usa le classi di utilità incluse per ricreare il piccolo testo dell'intestazione secondaria di Bootstrap 3.
Intestazione di visualizzazione fantasia Con testo secondario sbiadito
Visualizza le intestazioni
Gli elementi di intestazione tradizionali sono progettati per funzionare al meglio nel contenuto della tua pagina. Quando hai bisogno di un'intestazione per distinguerti, considera l'utilizzo di un'intestazione di visualizzazione , uno stile di intestazione più grande e leggermente più supponente. Tieni presente che queste intestazioni non sono reattive per impostazione predefinita, ma è possibile abilitare le dimensioni dei caratteri reattive .
Mostra 1 |
Mostra 2 |
Mostra 3 |
Mostra 4 |
Guida
Fai risaltare un paragrafo aggiungendo .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Elementi di testo in linea
Stile per elementi HTML5 in linea comuni.
È possibile utilizzare il tag mark aevidenziaretesto.
Questa riga di testo deve essere trattata come testo cancellato.
Questa riga di testo deve essere trattata come non più accurata.
Questa riga di testo deve essere trattata come un'aggiunta al documento.
Questa riga di testo verrà visualizzata come sottolineata
Questa riga di testo deve essere trattata come una stampa fine.
Questa riga è resa come testo in grassetto.
Questa riga è stata visualizzata come testo in corsivo.
.mark
e .small
le classi sono anche disponibili per applicare gli stessi stili <mark>
e <small>
evitando le implicazioni semantiche indesiderate che i tag porterebbero.
Anche se non mostrato sopra, sentiti libero di usare <b>
e <i>
in HTML5. <b>
ha lo scopo di evidenziare parole o frasi senza trasmettere ulteriore importanza mentre <i>
è principalmente per voce, termini tecnici, ecc.
Utilità di testo
Modifica l'allineamento, la trasformazione, lo stile, il peso e il colore del testo con le nostre utilità di testo e utilità di colore .
Abbreviazioni
Implementazione stilizzata <abbr>
dell'elemento HTML per abbreviazioni e acronimi per mostrare la versione estesa al passaggio del mouse. Le abbreviazioni hanno una sottolineatura predefinita e ottengono un cursore di aiuto per fornire un contesto aggiuntivo al passaggio del mouse e agli utenti delle tecnologie assistive.
Aggiungi .initialism
a un'abbreviazione per una dimensione del carattere leggermente più piccola.
attr
HTML
Citazioni in blocco
Per citare blocchi di contenuto da un'altra fonte all'interno del documento. Avvolgi <blockquote class="blockquote">
qualsiasi HTML come citazione.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Denominare una fonte
Aggiungi un <footer class="blockquote-footer">
per identificare la fonte. Avvolgi il nome del lavoro di origine in <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Allineamento
Usa le utilità di testo secondo necessità per modificare l'allineamento del tuo blockquote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Elenchi
Senza stile
Rimuovere il margine sinistro e predefinito list-style
sugli elementi dell'elenco (solo figli immediati). Questo si applica solo agli elementi dell'elenco dei figli immediati , il che significa che dovrai aggiungere la classe anche per tutti gli elenchi nidificati.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Intero molestie lorem a massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibolo laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
In linea
Rimuovere i punti elenco di un elenco e applicare un po' di luce margin
con una combinazione di due classi .list-inline
e .list-inline-item
.
- Lorem ipsum
- Fasello iaculo
- Nulla volutpat
Allineamento elenco descrizioni
Allinea i termini e le descrizioni orizzontalmente utilizzando le classi predefinite del nostro sistema di griglia (o mixin semantici). Per termini più lunghi, puoi facoltativamente aggiungere una .text-truncate
classe per troncare il testo con i puntini di sospensione.
- Elenchi di descrizione
- Un elenco di descrizioni è perfetto per definire i termini.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Il termine troncato viene troncato
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nidificazione
-
- Elenco di definizioni nidificate
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Dimensioni dei caratteri reattivi
Bootstrap v4.3 viene fornito con l'opzione per abilitare le dimensioni dei caratteri reattive, consentendo al testo di ridimensionare in modo più naturale le dimensioni del dispositivo e del viewport. RFS può essere abilitato modificando la $enable-responsive-font-sizes
variabile Sass in true
e ricompilando Bootstrap.
Per supportare RFS , utilizziamo un mixin Sass per sostituire le nostre normali font-size
proprietà. Le dimensioni dei caratteri reattivi verranno compilate in calc()
funzioni con un mix di rem
unità di visualizzazione per abilitare il comportamento di ridimensionamento reattivo. Maggiori informazioni su RFS e la sua configurazione possono essere trovate sul suo repository GitHub .