Introduzione alla tipografia Bootstrap
La tipografia è una delle ultime funzionalità di bootstrap. È particolarmente utilizzato per lo stile e la formattazione di elementi di testo. Utilizzando la funzionalità tipografica di bootstrap qualcuno è in grado di creare titoli, paragrafi, alcuni altri elementi incorporati ed elenchi. Fondamentalmente bootstrap usa 1rem (16px) come dimensione del carattere inclusa l'altezza della riga 5. Per impostazione predefinita, le famiglie di caratteri utilizzate da bootstrap sono sans-serif, Arial, Imposta come visualizzare il contenuto sul corpo, colore di sfondo sul corpo, usa il carattere dimensione e altezza della linea per creare margini, imbottiture, ecc.
Caratteristiche della tipografia Bootstrap
Di seguito sono riportate le diverse caratteristiche della tipografia come segue:
1) Titoli
Le intestazioni HTML sono divise in
per
Intestazione Bootstrap
visualizzato in dimensione carattereIntestazione Bootstrap
visualizzato in dimensione carattereIntestazione Bootstrap
visualizzato in dimensione carattereIntestazione Bootstrap
visualizzato in dimensione carattereIntestazione Bootstrap
visualizzato in dimensione carattereIntestazione Bootstrap
visualizzato in dimensione carattereUsando il codice HTML fornisce output come mostrato di seguito:
Usando la tipografia Bootstrap è stato disegnato e formattato usando le rispettive classi come mostrato di seguito:
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
L'output del codice sopra usando la tipografia Bootstrap è il seguente:
2) Titoli reattivi
I titoli responsive sono una delle cose migliori che si possano progettare usando la tipografia. questi sono gli elementi in cui il testo viene regolato automaticamente usando la classe di risposta secondo le dimensioni del dispositivo. Quindi si può facilmente vedere lo stesso testo in modo appropriato su dispositivi diversi.
Aggiungi la classe reattiva nel tag di intestazione come segue:
Responsive Header
Quindi mostrerà l'output come:
Intestazione reattiva.
Puoi controllare lo stesso testo su diversi dispositivi e ridimensionando il browser mostrerà le modifiche.
3)
Questo tag viene utilizzato per creare un testo secondario più leggero, più piccolo nell'intestazione. Per impostazione predefinita, imposta all'85% della dimensione dell'intestazione principale.
Esempio:
Example heading secondary text
Produzione:
h5 intestazione testo secondario
4)
Questo tag viene utilizzato per evidenziare il testo.
Esempio :
Bootstrap Typography
Bootstrap Typography
Questo è usato per evidenziare il testo.
5)
Questo tag viene utilizzato per contrassegnare un'abbreviazione. 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 di assistenza.
Esempio:
Ci sono così tanti paesi nel mondo. L'India è il miglior paese
6)
Indica il testo eliminato
Esempio:
Questo tag viene utilizzato per mostrare il testo eliminato.
Produzione:
Questo tag è usato per mostrare.
7)
L'elemento blockquote viene utilizzato per presentare il contenuto da un'altra fonte.
Esempio:
Blockquotes
Blockquotes
L'elemento blockquote viene utilizzato per presentare il contenuto da un'altra fonte:
Basta poco per fare una vita felice; è tutto dentro di te, nel tuo modo di pensare. La vita è come suonare un violino in pubblico e apprendere lo strumento mentre si procede.
Produzione:
blockquotes
L'elemento blockquote viene utilizzato per presentare il contenuto da un'altra fonte:
Basta poco per fare una vita felice; è tutto dentro di te, nel tuo modo di pensare. La vita è come suonare il violino in pubblico e apprendere lo strumento mentre si procede.
8)
:
Questo tag viene utilizzato per visualizzare un elenco di descrizioni.
Esempio:
L'elemento dl indica un elenco di descrizioni:
- Pane
- - Bianca
- - Marrone
- Bevande fredde
- - Pepsi
Produzione:
L'elemento dl indica un elenco di descrizioni:
Pane
bianca
Marrone
Bevande fredde
Pepsi.
9)
L'istruzione di codice inline deve essere raggruppata nell'elemento code.
Esempio:
I seguenti elementi HTML: span
, section
e div
definiscono una sezione in un documento.
Produzione:
I seguenti elementi HTML: span, section e div definiscono una sezione in un documento.
10) Colori contestuali
Questa non è altro che una classe diversa che viene utilizzata per trasmettere significato usando colori diversi.
Sta avendo classi diverse come .text-silenziato, .text-info, .text-primary, .text-success, .text-warning, .text-danger.
Esempio:
Utilizzare le classi contestuali per fornire "significato attraverso i colori":
Questo testo è disattivato.
Questo testo è importante
Questo testo indica il successo.
Questo testo rappresenta alcune informazioni.
Questo testo rappresenta un avvertimento.
Questo testo rappresenta un pericolo.
Produzione:
Questo testo è disattivato.
Questo testo è importante
Questo testo indica il successo.
Questo testo rappresenta alcune informazioni.
Questo testo rappresenta un avvertimento.
Questo testo rappresenta un pericolo.
Dove possiamo usare
- La maggior parte dei web designer preferisce utilizzare la tipografia bootstrap per un migliore aspetto del formato del testo.
- È particolarmente utilizzato durante lo styling e la formattazione del contenuto del testo.
- Il più delle volte c'è un problema relativo alla reattività del testo. Le dimensioni del testo variano in base ai diversi dispositivi. Quindi questi problemi vengono chiariti usando la funzionalità tipografia bootstrap.
- La tipografia Bootstrap è personalizzata in modo semplice per presentare in modo attraente all'utente finale.
- Tali elementi di testo su una pagina Web verranno sempre resi attraverso il collegamento al foglio di stile Bootstrap 4 allo stesso modo, tranne per il fatto che questi elementi vengono sovrascritti da altre classi di stile.
- Bootstrap offre agli sviluppatori comode funzionalità tipografiche per semplificare la creazione di intestazioni, paragrafi, elenchi e altri elementi incorporati che potrebbero attirare i lettori.
Conclusione
- Come per tutti i dettagli forniti nel contenuto sopra, le diverse caratteristiche tipografiche di Bootstrap per titoli, blockquote, testo iniziale, testo marcato, abbreviazioni con esempi adeguati.
- Tali caratteristiche robuste e carine di Bootstrap lo rendono un framework di sviluppo front-end molto popolare e unico, ampiamente utilizzato da molte organizzazioni.
- Il bootstrap include tutti i tag tipografici per i quali desideriamo uno stile, da qualsiasi tag a
e l'intera gerarchia di titoli.
Articoli consigliati
Questa è una guida alla tipografia Bootstrap. Qui discutiamo diverse caratteristiche della tipografia Bootstrap come titoli, blockquote, abbreviazioni, segni, ecc. Puoi anche leggere i seguenti articoli per saperne di più -
- Comandi Bootstrap
- Componenti Bootstrap
- Come installare Bootstrap
- Layout Bootstrap