Bootstrap definisce gli stili globali per il testo e per il colore di sfondo a livello del selettore body:
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff;} |
Nell'ordine vengono impostati gli stili per:
Tutti gli elementi e i componenti per cui non si specifichino stili diversi, ereditano questi valori.
Sono definite regole per i titoli da h1 a h6. Si può può formattare del testo come titolo anche applicando le classi .h1-.h6.
<h1>Titolo con tag h1</h1><div class="h1">Titolo con classe .h1</div> |
La font-family e l'altezza di riga dei titoli sono impostate con questa regola. Modificare il valore di font-family per avere un font specifico per i titoli, diverso da quello dei paragrafi.
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.1;} |
Le dimensioni del font dei titoli vanno da 38px a 12px:
h1,.h1 { font-size: 36px;}h2,.h2 { font-size: 30px;}h3,.h3 { font-size: 24px;}h4,.h4 { font-size: 18px;}h5,.h5 { font-size: 14px;}h6,.h6 { font-size: 12px;} |
Ai titoli viene applicato un margine superiore e inferiore con queste regole predefinite:
h1,h2,h3 { margin-top: 20px; margin-bottom: 10px;}h4,h5,h6 { margin-top: 10px; margin-bottom: 10px;} |
I paragrafi, per il colore e la dimensione del testo e per l'altezza di riga, ereditano le impostazioni globali definite a livello del selettore body. Ogni paragrafo riceve un margine inferiore di 10px:
p { margin: 0 0 10px;} |
Sono un paragrafo normale. Il testo è di 14px.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Per dare più peso e visibilità a un paragrafo si aggiunge la classe .lead:
.lead { margin-bottom: 20px; font-size: 16.099999999999998px; font-weight: 200; line-height: 1.4;} |
Sono un paragrafo con la classe .lead.
È possibile allineare il testo sfruttando tre classi:
text-left: allinea il testo a sinistra;text-center: allinea il testo al centro;text-right: allinea il testo a destra.<p class="text-left">Sono un paragrafo allineato a sinistra.</p><p class="text-center">Sono un paragrafo allineato al centro.</p><p class="text-right">Sono un paragrafo allineato a destra.</p> |
Sono un paragrafo allineato a sinistra.
Sono un paragrafo allineato al centro.
Sono un paragrafo allineato a destra.
Per la formattazione di abbreviazioni, indirizzi e citazioni Bootstrap si appoggia agli elementi HTML <abbr>, <address> e <blockquote>.
Una parte di testo che rappresenta un'abbreviazione va racchiusa con il tag <abbr>, al quale si assegna un attributo title in cui viene espresso il significato per esteso dell'abbreviazione. Il titolo viene visualizzato quando si passa con il mouse sull'abbreviazione.
<p>Il linguaggio <abbr title="HyperText Markup Language">HTML</abbr>.</p> |
Il linguaggio HTML.
Per formattare un indirizzo, si racchiudono le parti che lo compongono nel tag <address> e si separano con il tag <br>.
<address> <strong>FakeBoot, Inc.</strong><br> Via dei Cavalieri, 600<br> Roma, 00100, Italy<br> Telefono/fax: 123 456-7890</address> |
Una parte di testo definita come citazione va definita con il tag <blockquote>. Al suo interno si raccomanda di usare un paragrafo (<p>) per racchiudere il testo. Se si include la fonte della citazione, si usi per definirla nel markup il tag <small>, che ha come esito a livello visuale un ridimensionamento del testo pari all'85% della dimensione di base.
<blockquote> <p>Essere o non essere, questo è il problema.</p> <small>William Shakespeare, Amleto</small></blockquote> |
Essere o non essere, questo è il problema.
William Shakespeare, Amleto
Per allineare la citazione a destra, si può aggiungere la classe .pull-right al blockquote.
<blockquote class="pull-right"> <p>Essere o non essere, questo è il problema.</p> <small>William Shakespeare, Amleto</small></blockquote> |
Essere o non essere, questo è il problema.
William Shakespeare, Amleto
All'interno del foglio di stile di Bootstrap, questo è il blocco di regole su cui intervenire per personalizzare l'aspetto delle citazioni:
blockquote { padding: 10px 20px; margin: 0 0 20px; border-left: 5px solid #eeeeee;}blockquote p { font-size: 17.5px; font-weight: 300; line-height: 1.25;}blockquote p:last-child { margin-bottom: 0;}blockquote small { display: block; line-height: 1.428571429; color: #999999;}blockquote small:before { content: '\2014 \00A0';}blockquote.pull-right { padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0;}blockquote.pull-right p,blockquote.pull-right small { text-align: right;}blockquote.pull-right small:before { content: '';}blockquote.pull-right small:after { content: '\00A0 \2014';} |
A livello tipografico le liste ereditano tutte le impostazioni globali.
Le liste ordinate <ol> e non ordinate <ul> non richiedono classi speciali. Possiamo usare la classe .list-unstyled per rimuovere il marcatore.
<ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>...</li></ul> |
La classe .list-inline, invece, consente di disporre orizzontalmente sulla stessa riga gli item di lista. È una buona base di partenza per menu di navigazione orizzontali.
<ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>...</li></ul> |
Le liste di definizione <dl> presentano di default sono così rese a schermo:
Applicando la classe .dl-horizontal al tag <dl> disponiamo orizzontalmente il termine rispetto alla definizione.
<dl class="dl-horizontal"> <dt>Item 1</dt> <dd>Questa è la descrizione dell'item di una lista di definizione.</dd> <dt>Item 2</dt> <dd>Questa è la descrizione dell'item di una lista di definizione.</dd> <dt>Item 2</dt> <dd>Questa è la descrizione dell'item di una lista di definizione.</dd></dl> |