Bootstrap - Tipografia
Benvenuti, futuri sviluppatori web! Oggi ci immergeremo nel meraviglioso mondo della tipografia di Bootstrap. Come il vostro amico insegnante di informatica del vicinato, sono qui per guidarvi in questo viaggio con tanti esempi, spiegazioni e forse un paio di battute da papà. Allora, iniziamo!
Impostazioni predefinite / globali di Bootstrap
Bootstrap arriva con alcune impostazioni predefinite di tipografia che rendono il vostro testo bellissimo sin da subito. È come avere un personal stylist per il vostro sito web!
Ecco un esempio di base di come Bootstrap stila il testo:
<p Questo è un paragrafo stilizzato da Bootstrap.</p>Potreste pensare: "Sembra proprio come il testo normale!" E avete ragione! Ma Bootstrap ha fatto alcuni miglioramenti sottili. Ha impostato una famiglia di caratteri predefinita (solitamente un carattere sans-serif), una dimensione del font confortevole e un'altezza della linea gradevole. Sono queste piccole cose che rendono Bootstrap così potente.
Intestazioni
Le intestazioni in Bootstrap sono come le diverse dimensioni del caffè nel vostro caffè preferito - ci sono sei gusti, da h1 a h6.
<h1>Questo è un'intestazione 1</h1>
<h2>Questo è un'intestazione 2</h2>
<h3>Questo è un'intestazione 3</h3>
<h4>Questo è un'intestazione 4</h4>
<h5>Questo è un'intestazione 5</h5>
<h6>Questo è un'intestazione 6</h6>Ogni intestazione ha la sua dimensione e peso, creando una chiara gerarchia nei vostri contenuti. È come organizzare il vostro armadio - tutto ha il suo posto!
Personalizzazione delle intestazioni
Ma cosa fare se volete usare stili di intestazione senza utilizzare effettivamente un tag di intestazione? Bootstrap ha tutto pronto con le classi .h1 a .h6.
<p class="h1">Questo paragrafo sembra un'intestazione 1</p>
<span class="h3">Questo span sembra un'intestazione 3</span>Questo è perfetto quando volete l'aspetto di un'intestazione senza il significato semantico. È come indossare una camicia da smoking - formale, ma non troppo formale.
Intestazioni di display
Quando le intestazioni normali non sono abbastanza, Bootstrap offre le intestazioni "display". Queste sono come le supermodelle delle intestazioni - grandi, in grassetto e capaci di attirare l'attenzione.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>Queste intestazioni di display sono perfette per quei momenti in cui avete bisogno di fare una grande dichiarazione. Usatele saggiamente, però - troppe e la vostra pagina potrebbe iniziare a urlare!
Paragrafo di introduzione
La classe .lead è il modo di Bootstrap per fare risaltare un paragrafo. È come dare al vostro testo un megafono.
<p class="lead">Questo è un paragrafo di introduzione. Si distingue dai paragrafi normali.</p>Usate questo per il testo di introduzione o per informazioni importanti che volete evidenziare.
Abbreviazioni
Bootstrap stila le abbreviazioni e gli acronimi con una tratteggiatura punteggiata. È come dare ai vostri lettori un decoder segreto!
<p>L'<abbr title="Organizzazione Mondiale della Sanità">OMS</abbr> è stata fondata nel 1948.</p>Passate sopra l'abbreviazione e vedrete il termine completo apparire.
Citazione
Le citazioni in Bootstrap sono stilizzate per risaltare dal resto del vostro testo. Sono come i ragazzi cool del mondo dei paragrafi.
<blockquote class="blockquote">
<p>Due cose sono infinite: l'universo e la stupidità umana; e non sono sicuro sull'universo.</p>
</blockquote>Indicare una fonte
Potete aggiungere una fonte alla vostra citazione utilizzando il tag <footer> con una classe di blockquote-footer.
<blockquote class="blockquote">
<p>Due cose sono infinite: l'universo e la stupidità umana; e non sono sicuro sull'universo.</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>È come dare merito a chi merita, ma con stile!
Allineamento
Bootstrap vi permette di allineare facilmente il vostro testo con le classi. È come insegnare al vostro testo a ballare - sinistra, centro, destra!
<p class="text-left">Testo allineato a sinistra.</p>
<p class="text-center">Testo allineato al centro.</p>
<p class="text-right">Testo allineato a destra.</p>Elementi di testo in linea
Bootstrap fornisce stili per vari elementi di testo in linea. È come un coltello svizzero per il vostro testo!
Ecco una tabella degli elementi di testo in linea comunemente utilizzati:
| Elemento | Descrizione |
|---|---|
<mark> |
Testo evidenziato |
<del> |
Testo cancellato |
<s> |
Testo barrato |
<ins> |
Testo inserito |
<u> |
Testo sottolineato |
<small> |
Testo più piccolo |
<strong> |
Testo in grassetto |
<em> |
Testo in corsivo |
Esempio:
<p>Potete usare questi elementi per <mark>evidenziare</mark>, <del>cancellare</del>, <s>barrare</s>, <ins>inserire</ins>, <u>sottolineare</u>, rendere il testo <small>più piccolo</small>, <strong>in grassetto</strong> o <em>in corsivo</em>.</p>Liste
Bootstrap stila le liste per renderle più visivamente accattivanti. È come dare una trasformazione alla vostra lista!
<ul>
<li>Elemento della lista non ordinata 1</li>
<li>Elemento della lista non ordinata 2</li>
</ul>
<ol>
<li>Elemento della lista ordinata 1</li>
<li>Elemento della lista ordinata 2</li>
</ol>Allineamento delle liste descrittive
Bootstrap vi permette di allineare i termini e le descrizioni nelle liste descrittive. È come organizzare un dizionario, ma più cool!
<dl class="row">
<dt class="col-sm-3">Caffè</dt>
<dd class="col-sm-9">Bevanda calda nera</dd>
<dt class="col-sm-3">Latte</dt>
<dd class="col-sm-9">Bevanda fredda bianca</dd>
</dl>Questo crea un layout a due colonne per la vostra lista descrittiva.
Dimensioni dei caratteri responsive
Bootstrap 4 ha introdotto le dimensioni dei caratteri responsive. È come il vostro testo fa yoga - si adatta e si piega a diverse dimensioni dello schermo!
Per abilitare le dimensioni dei caratteri responsive, aggiungete questa riga al vostro CSS:
html {
font-size: 1rem;
}Poi, utilizzate la classe .font-size-responsive sui vostri elementi:
<p class="font-size-responsive">Questo testo adatterà la sua dimensione su diversi dispositivi.</p>Ecco tutto, ragazzi! Una guida completa alla tipografia di Bootstrap. Ricordate, la tipografia è la voce del vostro contenuto - fate in modo che canti! Buon coding, e possa il vostro sito web sempre sembrare fantastico!
Credits: Image by storyset