Tutorial di base Bootstrap

Plugin Bootstrap

Tabelle Bootstrap

Bootstrap fornisce una布局 chiara per la creazione di tabelle. La tabella seguente elenca alcuni elementi di tabella supportati da Bootstrap:

Etichetta	Descrizione
<table>	Aggiungi uno stile di base alla tabella.
<thead>	Elemento contenitore della riga del titolo della tabella, utilizzato per identificare le colonne della tabella.
<tbody>	Elemento contenitore delle righe della tabella principale (<tr>).
<tr>	Elemento contenitore di un gruppo di celle della tabella che appaiono in una singola riga (<td> o <th>).
<td>	Cella della tabella predefinita.
<th>	Cella della tabella speciale utilizzata per identificare le colonne o le righe (a seconda dell'intervallo e della posizione). Deve essere utilizzata all'interno di <thead>.
<caption>	Descrizione o sommario del contenuto archiviato nella tabella.

Classi della tabella

Lo stile della tabella di seguito può essere utilizzato nella tabella:

Classe	Descrizione	Esempio
.table	Aggiungi uno stile di base a qualsiasi <table> (solo linee di separazione orizzontali)	Prova a farlo
.table-striped	Aggiungi strisce a scacchiera nella <tbody> (non supportato da IE8)	Prova a farlo
.table-bordered	Aggiungi bordi a tutte le celle della tabella	Prova a farlo
.table-hover	Abilita lo stato di hover del mouse in qualsiasi riga all'interno di <tbody>	Prova a farlo
.table-condensed	Rendi la tabella più compatta	Prova a farlo
Utilizzo congiunto di tutte le classi della tabella		Prova a farlo

Classi <tr>, <th> e <td>

Le classi della tabella di seguito possono essere utilizzate per le righe o le celle della tabella:

Classe	Descrizione	Esempio
.active	Applica il colore di hover alle righe o alle celle	Prova a farlo
.success	Rappresenta un'operazione di successo	Prova a farlo
.info	Rappresenta un'operazione di cambiamento di informazione	Prova a farlo
.warning	Rappresenta un'operazione di avviso	Prova a farlo
.danger	Rappresenta un'operazione pericolosa	Prova a farlo

Tabella di base

Se desideri una tabella di base con solo spazi interni (padding) e divisioni orizzontali, aggiungi la classe .table, come mostrato nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Tabella di base</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>
<table class="table">
	<caption>Layout di base della tabella</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<th>Nome</th>
　　　　　　　　　<th>Città</th>
　　　　　　</tr>
　　　</thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<td>Tanmay</td>
　　　　　　　　　<td>Bangalore</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　<td>Sachin</td>
　　　　　　　　　<td>Mumbai</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>

Testa e guarda ‹/›

I risultati sono mostrati di seguito:

Classi opzionali della tabella

Oltre ai segni di tabella di base e alla classe .table, ci sono alcune classi che possono essere utilizzate per definire lo stile dei segni. Di seguito ti presenteremo queste classi.

Tabella a strisce

Aggiungendo .table-striped La classe, vedrai le strisce sulle righe all'interno di <tbody>, come nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Tabella a strisce</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>
<table class="table table-striped">
	<caption>Disposizione tabellare a strisce</caption>
	<thead>
		<tr>
			<th>Nome</th>
			<th>Città</th>
			<th>Cap</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Testa e guarda ‹/›

I risultati sono mostrati di seguito:

Tabella con bordi

Aggiungendo .table-bordered La classe, vedrai che ogni elemento ha un bordo intorno e che la tabella ha angoli arrotondati, come nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Tabella con bordi</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>
<table class="table table-bordered">
	<caption>Disposizione tabellare con bordi</caption>
	<thead>
		<tr>
			<th>Nome</th>
			<th>Città</th>
			<th>Cap</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Testa e guarda ‹/›

I risultati sono mostrati di seguito:

Tabella con sovrapposizione

Aggiungendo .table-hover La classe, quando il puntatore è sopra una riga, appare uno sfondo grigio chiaro, come nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Tabella con sovrapposizione</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>
<table class="table table-hover">
	<caption>Disposizione tabellare con sovrapposizione</caption>
	<thead>
		<tr>
			<th>Nome</th>
			<th>Città</th>
			<th>Cap</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Testa e guarda ‹/›

I risultati sono mostrati di seguito:

Tabella semplificata

Aggiungendo .table-condensed La classe, il margine interno (padding) è diviso a metà per far sembrare la tabella più compatta, come nell'esempio seguente. Questo è molto utile quando si vuole rendere le informazioni più compatte.

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Tabella semplificata</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>
<table class="table table-condensed">
	<caption>Disposizione tabellare semplificata</caption>
	<thead>
		<tr>
			<th>Nome</th>
			<th>Città</th>
			<th>Cap</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Testa e guarda ‹/›

I risultati sono mostrati di seguito:

Classi di contesto

Le classi di contesto elencate nella tabella sottostante ti permettono di cambiare il colore di sfondo delle righe della tabella o di una singola cella.

Classe	Descrizione
.active	Applica un colore di sovrapposizione specifico a una riga o cella
.success	Rappresenta un'azione positiva o positiva
.warning	Rappresenta un avviso da notare
.danger	Rappresenta un'azione pericolosa o negativa

Queste classi possono essere applicate a <tr>, <td> o <th>.

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Esempio Bootstrap - Classi contestuali</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>
<table class="table">
	<caption>Layout di tabella contestuale</caption>
	<thead>
		<tr>
			<th>Prodotto</th>
			<th>Data di pagamento</th>
			<th>Stato</th>
		</tr>
	</thead>
	<tbody>
		<tr class="active">
			<td>Prodotto 1</td>
			<td>23/11/2013</td>
			<td>In attesa di spedizione</td>
		</tr>
		<tr class="success">
			<td>Prodotto 2</td>
			<td>10/11/2013</td>
			<td>In Spedizione</td>
		</tr>
		<tr class="warning">
			<td>Prodotto 3</td>
			<td>20/10/2013</td>
			<td>In Attesa di Conferma</td>
		</tr>
		<tr class="danger">
			<td>Prodotto 4</td>
			<td>20/10/2013</td>
			<td>Restituito</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Testa e guarda ‹/›

I risultati sono mostrati di seguito:

Tabella reattiva

Trascinando qualsiasi .table Incluso .table-responsive Nella classe, puoi far scorrere la tabella orizzontalmente per adattarsi ai dispositivi di piccole dimensioni (inferiori a 768px). Quando si visualizza su dispositivi di grandi dimensioni (più grandi di 768px), non si noteranno differenze.

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Esempio Bootstrap - Tabella reattiva</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>
<div class="table-responsive">
	<table class="table">
		<caption>Layout di tabella reattiva</caption>
		<thead>
			<tr>
				<th>Prodotto</th>
				<th>Data di pagamento</th>
				<th>Stato</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Prodotto 1</td>
				<td>23/11/2013</td>
				<td>In attesa di spedizione</td>
			</tr>
			<tr>
				<td>Prodotto 2</td>
				<td>10/11/2013</td>
				<td>In Spedizione</td>
			</tr>
			<tr>
				<td>Prodotto 3</td>
				<td>20/10/2013</td>
				<td>In Attesa di Conferma</td>
			</tr>
			<tr>
				<td>Prodotto 4</td>
				<td>20/10/2013</td>
				<td>Restituito</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>

Testa e guarda ‹/›

I risultati sono mostrati di seguito:

Moduli Bootstrap Codice Bootstrap