English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di base di Bootstrap

Plugin di Bootstrap

Formattazione Bootstrap

Bootstrap utilizza Helvetica Neue, Helvetica, Arial e sans-serif come suo font predefinito.

Utilizzando le caratteristiche di formattazione di Bootstrap, puoi creare titoli, paragrafi, elenchi e altri elementi inline.

Titolo

Bootstrap definisce lo stile per tutti i titoli HTML (da h1 a h6). Ecco un esempio sottostante:

I risultati sono mostrati di seguito:

sottotitolo inline

Se desideri aggiungere un sottotitolo inline a qualsiasi titolo, basta semplicemente aggiungere <small> intorno all'elemento, o aggiungere .small class, in modo da ottenere un testo di dimensioni più piccole e di colore più chiaro, come mostrato nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Esempio Bootstrap - Sottotitoli inline</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>Sono un titolo 1 h1. <small>Sono un sottotitolo 1 h1</small></h1>　
	<h2>Sono un titolo 2 h2. <small>Sono un sottotitolo 2 h2</small></h2>
	<h2>Sono un titolo 3 h2. <small>Sono un sottotitolo 3 h2</small></h2>
	<h4>Sono un titolo 4 h4. <small>Sono un sottotitolo 4 h4</small></h4>
	<h5>Sono un titolo 5 h5. <small>Sono un sottotitolo 5 h5</small></h5>
	<h6>Sono un titolo 6 h6. <small>Sono un sottotitolo 6 h6</small></h6>
</body>
</html>
Testa per vedere <‹/›

I risultati sono mostrati di seguito:

Testo guida principale

Per aggiungere testo evidenziato ai paragrafi, è possibile aggiungere, il che ottiene un testo più grande, più spesso e con un'altezza di riga più alta, come mostrato nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Testo guida principale</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Testo guida principale</h2>
<p class="lead">Questo è un esempio di utilizzo del testo guida principale. Questo è un esempio di utilizzo del testo guida principale. Questo è un esempio di utilizzo del testo guida principale. Questo è un esempio di utilizzo del testo guida principale. Questo è un esempio di utilizzo del testo guida principale. Questo è un esempio di utilizzo del testo guida principale. Questo è un esempio di utilizzo del testo guida principale. Questo è un esempio di utilizzo del testo guida principale.</p>
</body>
</html>
Testa per vedere <‹/›

I risultati sono mostrati di seguito:

Evidenziare

I tag di evidenziazione predefiniti di HTML <small>(impostare il testo alla dimensione del testo del genitore del 85%)、<strong>(impostare il testo in grassetto)、<em>(impostare il testo in corsivo).

Bootstrap fornisce alcune classi per evidenziare il testo, come mostrato nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Evidenziare</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<small>Il contenuto di questa riga è all'interno di un etichetta</small><br>
<strong>Il contenuto di questa riga è all'interno di un etichetta</strong><br>
<em>Il contenuto di questa riga è all'interno di un etichetta e viene visualizzato in grassetto</em><br>
<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>
<p　class="text-muted">Il contenuto di questa riga è degradato</p>
<p　class="text-primary">Questa riga di contenuto ha una classe di tipo <strong>primary</strong>.
<p　class="text-success">Questa riga di contenuto ha una classe di tipo <strong>success</strong>.
<p　class="text-info">Questa riga di contenuto ha una classe di tipo <strong>info</strong>.
<p　class="text-warning">Questa riga di contenuto ha una classe di tipo <strong>warning</strong>.
<p　class="text-danger">Questa riga di contenuto ha una classe di tipo <strong>danger</strong>.
</body>
</html>
Testa per vedere <‹/›

I risultati sono mostrati di seguito:

Abbreviazioni

L'elemento HTML fornisce etichette per le abbreviazioni, come ad esempio WWW o HTTP. Bootstrap definisce lo stile dell'elemento <abbr> come una linea tratteggiata in basso nel testo, che viene visualizzata quando il mouse è sopra di essa (se avete aggiunto del testo all'attributo title dell'<abbr>). Per ottenere un testo di dimensioni più piccole, aggiungere .initialism all'<abbr>.

Esempio online

<!DOCTYPE html>
<html>
<head>
　　　<title>Bootstrap　esempio　-　abbreviazioni</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<abbr　title="World　Wide　Web">WWW</abbr><br>
<abbr　title="Real　Simple　Syndication"　class="initialism">RSS</abbr>
</body>
</html>
Testa per vedere <‹/›

I risultati sono mostrati di seguito:

Indirizzo (Address)

Utilizzando il tag <address>, è possibile visualizzare le informazioni di contatto sul sito web. Poiché <address> di default è display:block;, è necessario utilizzare il tag <br> per aggiungere una riga di piegatura al testo dell'indirizzo.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　esempio　-　indirizzo</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<address>
	<strong>Some　Company,　Inc.</strong>
	007　street
	Città, Stato XXXXX<br>
	<abbr title="Telefono">P:</abbr> (123) 456-7890
</address>
<address>
	<strong>Nome Completo</strong><br>
	<a href="mailto:#">[email protected]</a>
</address>
</body>
</html>
Testa per vedere <‹/›

I risultati sono mostrati di seguito:

Citazione (Blockquote)

Puoi utilizzare <blockquote> predefinito accanto a qualsiasi testo HTML. Altre opzioni includono l'aggiunta di un tag <small> per identificare la fonte della citazione, utilizzando la classe .pull-right Citazione a destra. Di seguito è illustrato questi tratti:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Citazione</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote>
	<p>
		Questo è un esempio di citazione predefinita. Questo è un esempio di citazione predefinita. Questo è un esempio di citazione predefinita. Questo è un esempio di citazione predefinita. Questo è un esempio di citazione predefinita. Questo è un esempio di citazione predefinita. Questo è un esempio di citazione predefinita. Questo è un esempio di citazione predefinita.
	</p>
</blockquote>
<blockquote>
	Questa è una citazione con titolo di sorgente.
	<small>Qualcuno famoso in <cite title="Titolo della Sorgente">Titolo della Sorgente</cite></small>
</blockquote>
<blockquote class="pull-right">
	Questa è una citazione allineata a destra.
	<small>Qualcuno famoso in <cite title="Titolo della Sorgente">Titolo della Sorgente</cite></small>
</blockquote>
</body>
</html>
Testa per vedere <‹/›

I risultati sono mostrati di seguito:

Elenchi

Bootstrap supporta elenchi ordinati, non ordinati e di definizione.

  • Elenco ordinatoL'elenco ordinato è un elenco che inizia con un numero o un altro carattere ordinato.

  • Elenco non ordinatoL'elenco non ordinato è un elenco senza ordine, iniziato con un punto esclamativo in stile tradizionale. Se non vuoi visualizzare questi punti esclamativi, puoi utilizzare la classe .list-unstyled per rimuovere lo stile. Puoi anche utilizzare la classe .list-inline mettere tutte le voci in una riga.

  • Elenco di definizioniin questo tipo di elenco, ogni voce può contenere gli elementi <dt> e <dd>. <dt> rappresenta Definizione di terminisimile a un dizionario. Successivamente, <dd> è la descrizione di <dt>. La classe .dl-horizontal permette di allineare in una riga le frasi e le loro descrizioni all'interno di <dl>. Inizialmente, sono disposti in modo predefinito in una pila, ma si allineano in una riga man mano che la barra di navigazione si espande.

Di seguito è illustrato un esempio di questi tipi di elenchi:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Elenco</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Elenco ordinato</h4>
<ol>
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li>Elemento 4</li>
</ol>
<h4>Elenco non elencato</h4>
<ul>
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li>Elemento 4</li>
</ul>
<h4>Elenco senza stile definito</h4>
<ul class="list-unstyled">
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li>Elemento 4</li>
</ul>
<h4>Elenco in linea</h4>
<ul class="list-inline">
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li>Elemento 4</li>
</ul>
<h4>Elenco definito</h4>
<dl>
	<dt>Descrizione 1</dt>
	<dd>Elemento 1</dd>
	<dt>Descrizione 2</dt>
	<dd>Elemento 2</dd>
</dl>
<h4>Elenco definito orizzontale</h4>
<dl class="dl-horizontal">
	　<dt>Descrizione 1</dt>
	　<dd>Elemento 1</dd>
	　<dt>Descrizione 2</dt>
	　<dd>Elemento 2</dd>
</dl>
</body>
</html>
Testa per vedere <‹/›

I risultati sono mostrati di seguito:

Altre classi di formattazione

La tabella sottostante fornisce esempi di altre classi di formattazione di Bootstrap:

ClasseDescrizioneEsempio
.leadEvidenzia il paragrafoProva Ora
.text-leftImposta il testo a sinistra allineatoProva Ora
.text-rightImposta il testo a destra allineatoProva Ora
.text-nowrapLa parte superiore del paragrafo non viene capovolta se supera lo schermoProva Ora
.text-uppercaseImposta il testo in maiuscoloProva Ora
.initialismIl testo visualizzato nell'elemento <abbr> viene mostrato in caratteri minuscoli e può convertire le lettere minuscole in maiuscoleProva Ora
.list-unstyledRimuovere lo stile di elenco predefinito, allineamento a sinistra degli elementi di elenco (in <ul> e <ol>). Questa classe si applica solo agli elementi figli diretti 　 　(Se si desidera rimuovere gli elenchi elencati nidificati, è necessario utilizzare questo stile negli elenchi nidificati)Prova Ora
.dl-horizontalQuesta classe imposta flottaggio e offset, applicata agli elementi <dl> e <dt>, l'implementazione specifica può essere visualizzata nell'esempioProva Ora
Codice BootstrapSistema di Griglia Bootstrap