Tipografia Bootstrap - Caratteristiche della tipografia Bootstrap con esempi

Sommario:

Anonim

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 carattere

Intestazione Bootstrap

visualizzato in dimensione carattere

Intestazione Bootstrap

visualizzato in dimensione carattere

Intestazione Bootstrap

visualizzato in dimensione carattere
Intestazione Bootstrap
visualizzato in dimensione carattere
Intestazione Bootstrap
visualizzato in dimensione carattere

Usando 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

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