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>