Bootstrap - Tipografia
Bootstrap utilizza Helvetica Neue, Helvetica, Arial e sans-serif nella sua pila di caratteri predefinita. Utilizzando la funzionalità tipografica di Bootstrap è possibile creare titoli, paragrafi, elenchi e altri elementi in linea. Vediamo imparare ognuno di questi nelle seguenti sezioni.
Titoli
Tutti i titoli HTML (da h1 a h6) hanno uno stile in Bootstrap. Di seguito è mostrato un esempio:
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>Il segmento di codice sopra con Bootstrap produrrà il seguente risultato:
Sottotitoli in linea
Per aggiungere un sottotitolo in linea a uno qualsiasi dei titoli, aggiungi semplicemente <small> attorno a uno qualsiasi degli elementi o aggiungi .small classe e otterrai un testo più piccolo in un colore più chiaro come mostrato nell'esempio sotto -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>Il segmento di codice sopra con Bootstrap produrrà il seguente risultato:
Lead Body Copy
Per aggiungere un po 'di enfasi a un paragrafo, aggiungi class = "lead". Questo ti darà una dimensione del carattere più grande, un peso più leggero e un'altezza della linea più alta come nell'esempio seguente:
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>Enfasi
I tag di enfasi predefiniti dell'HTML come <small> impostano il testo all'85% della dimensione del genitore, <strong> enfatizza un testo con un carattere più pesante e <em> enfatizza un testo in corsivo.
Bootstrap offre alcune classi che possono essere utilizzate per dare enfasi ai testi come mostrato nel seguente esempio:
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>Abbreviazioni
L'elemento HTML <abbr> fornisce markup per abbreviazioni o acronimi, come WWW o HTTP. Bootstrap stili gli elementi <abbr> con un bordo punteggiato chiaro lungo la parte inferiore e rivela il testo completo al passaggio del mouse (a condizione che il testo venga aggiunto all'attributo del titolo <abbr>). Per ottenere una dimensione del carattere leggermente più piccola, aggiungi .initialism a <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>Indirizzi
Usando il tag <address> puoi visualizzare le informazioni di contatto sulla tua pagina web. Poiché <indirizzo> di default mostra: block; dovrai usare
Tag per aggiungere interruzioni di riga al testo dell'indirizzo incluso.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>Blockquotes
Puoi usare il valore predefinito <blockquote> attorno a qualsiasi testo HTML. Altre opzioni includono l'aggiunta di un tag <small> per identificare la fonte della citazione e l'allineamento a destra del blockquote utilizzando class .pull-right . L'esempio seguente mostra tutte queste funzionalità:
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>Liste
Bootstrap supporta elenchi ordinati, elenchi non ordinati e elenchi di definizioni.
Ordered lists - Un elenco ordinato è un elenco che rientra in una sorta di ordine sequenziale ed è preceduto da numeri.
Unordered lists- Un elenco non ordinato è un elenco che non ha un ordine particolare ed è tradizionalmente in stile con punti elenco. Se non vuoi che appaiano i punti elenco , puoi rimuovere lo stile utilizzando la classe .list-unstyled . Puoi anche inserire tutti gli elementi dell'elenco su una singola riga utilizzando la classe .list-inline .
Definition lists- In questo tipo di elenco, ogni voce di elenco può essere composta sia dagli elementi <dt> che dagli elementi <dd>. <dt> sta per termine di definizione e, come un dizionario, questo è il termine (o frase) che viene definito. Successivamente, <dd> è la definizione di <dt>. Puoi allineare i termini e le descrizioni in <dl> fianco a fianco usando la classe dl-horizontal .
L'esempio seguente mostra ciascuno di questi tipi:
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>