Tutorial básico do Bootstrap

Plugin do Bootstrap

Tabela Bootstrap

O Bootstrap oferece uma estrutura clara para a criação de tabelas. A tabela a seguir lista alguns elementos de tabela suportados pelo Bootstrap:

标签	descrição
rótulo	<table>
<thead>	adiciona estilo básico à tabela.
<tbody>	elemento contenedor da linha de título da tabela (<tr>), usado para identificar as colunas da tabela.
<tr>	elemento contenedor da linha da tabela principal (<tr>).
<td>	elemento contenedor de um grupo de células de tabela que aparecem na mesma linha (<td> ou <th>).
célula padrão da tabela.	<th>
célula especial da tabela, usada para identificar colunas ou linhas (dependendo do escopo e da posição). Deve ser usada dentro de <thead>.	<caption>

Descrição ou resumo sobre o conteúdo armazenado na tabela.

Classes de tabela

classe	descrição	exemplo
.table	Estilos da tabela a seguir podem ser usados na tabela:	Experimente
.table-striped	Adiciona estilo básico a qualquer <table> (apenas linha horizontal)8 Adiciona listras em forma de zebra no <tbody> (IE	Experimente
.table-bordered	não suportado)	Experimente
.table-hover	Adiciona bordas a todas as células da tabela	Experimente
.table-condensed	Ativa o estado de mouse suspenso em qualquer linha dentro de <tbody>	Experimente
Torna a tabela mais compacta		Experimente

Uso combinado de todas as classes de tabela

<tr>, <th> e <td> classes

classe	descrição	exemplo
.active	As classes da tabela a seguir podem ser usadas para as linhas ou células da tabela:	Experimente
.success	aplica a cor do mouse sobre a linha ou célula	Experimente
.info	representa uma operação de mudança de informação	Experimente
.warning	representa uma operação de aviso	Experimente
.danger	representa uma operação perigosa	Experimente

tabela básica

Se você desejar uma tabela básica com apenas margem interna (padding) e linha horizontal, adicione a classe .tablecomo mostrado no exemplo a seguir:

online

exemplo

exemplo
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　tabela básica/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 básico da tabela</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<th>Nome</<th>
　　　　　　　　　<th>Cidade</<th>
　　　　　　</tr>
　　　</<thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<td>Tanmay</td>
　　　　　　　　　<td>Bangalore</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　<td>Sachin</td>
　　　　　　　　　<td>Mumbai</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>

Teste e Veja ‹/›

Os resultados são mostrados a seguir:

Classes de tabela opcionais

Além dos sinais básicos da tabela e da classe .table, há algumas classes que podem ser usadas para definir estilos para os sinais. Vou apresentar essas classes a seguir.

tabela com listras

ao adicionar .table-striped class, você verá listras nas linhas dentro de <tbody>, como mostrado no exemplo a seguir:

online

exemplo

exemplo
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　tabela com listras/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>Layout de tabela com listras</caption>
	<thead>
		<tr>
			<th>Nome</<th>
			<th>Cidade</<th>
			<th>Código Postal</<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>

Teste e Veja ‹/›

Os resultados são mostrados a seguir:

tabela com borda

ao adicionar .table-bordered class, você verá uma borda ao redor de cada elemento e as bordas da tabela são arredondadas, como mostrado no exemplo a seguir:

online

exemplo

exemplo
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　tabela com borda/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>Layout de tabela com borda</caption>
	<thead>
		<tr>
			<th>Nome</<th>
			<th>Cidade</<th>
			<th>Código Postal</<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>

Teste e Veja ‹/›

Os resultados são mostrados a seguir:

tabela ao passar o mouse

ao adicionar .table-hover class, quando o ponteiro do mouse estiver sobre a linha, aparecerá uma cor cinza clara no fundo, como mostrado no exemplo a seguir:

online

exemplo

exemplo
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　tabela ao passar o mouse</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>Layout de tabela ao passar o mouse</caption>
	<thead>
		<tr>
			<th>Nome</<th>
			<th>Cidade</<th>
			<th>Código Postal</<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>

Teste e Veja ‹/›

Os resultados são mostrados a seguir:

tabela condensada

ao adicionar .table-condensed A margem interna (padding) da linha é dividida em duas partes para tornar a tabela mais compacta, como mostrado no exemplo a seguir. Isso é muito útil quando se deseja que as informações pareçam mais compactas.

online

exemplo

exemplo
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　tabela condensada</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>Layout de tabela condensada</caption>
	<thead>
		<tr>
			<th>Nome</<th>
			<th>Cidade</<th>
			<th>Código Postal</<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>

Teste e Veja ‹/›

Os resultados são mostrados a seguir:

classe de contexto

As classes de contexto listadas na tabela a seguir permitem que você altere a cor de fundo de linhas ou células individuais da tabela.

classe	descrição
.active	aplicar cor de hover a uma linha ou célula específica
.success	representa uma ação positiva ou exitosa
.warning	representa um aviso a ser notado
.danger	representa uma ação perigosa ou negativa潜力

Essas classes podem ser aplicadas a <tr>, <td> ou <th>.

online

exemplo

exemplo
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　classe de contexto</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 de tabela de contexto</caption>
	<thead>
		<tr>
			<th>Produto</<th>
			<th>Data do Pagamento</<th>
			<th>Estado</<th>
		</tr>
	</<thead>
	<tbody>
		<tr class="active">
			<td>Produto1</td>
			<td>23/11/2013</td>
			<td>Para Envio</td>
		</tr>
		<tr class="success">
			<td>Produto2</td>
			<td>10/11/2013</td>
			<td>Em Trânsito</td>
		</tr>
		<tr class="warning">
			<td>Produto3</td>
			<td>20/10/2013</td>
			<td>Para Confirmar</td>
		</tr>
		<tr class="danger">
			<td>Produto4</td>
			<td>20/10/2013</td>
			<td>Devolvido</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Teste e Veja ‹/›

Os resultados são mostrados a seguir:

tabela responsiva

ao colocar qualquer .table empacotado .table-responsive class, você pode fazer a tabela rolar horizontalmente para se adaptar a dispositivos pequenos (menores que 768px). Quando em dispositivos maiores que 768px de largura em dispositivos grandes, você não verá nenhuma diferença.

online

exemplo

exemplo
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　<title>Exemplo Bootstrap</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 de tabela responsiva</caption>
		<thead>
			<tr>
				<th>Produto</<th>
				<th>Data do Pagamento</<th>
				<th>Estado</<th>
			</tr>
		</<thead>
		<tbody>
			<tr>
				<td>Produto1</td>
				<td>23/11/2013</td>
				<td>Para Envio</td>
			</tr>
			<tr>
				<td>Produto2</td>
				<td>10/11/2013</td>
				<td>Em Trânsito</td>
			</tr>
			<tr>
				<td>Produto3</td>
				<td>20/10/2013</td>
				<td>Para Confirmar</td>
			</tr>
			<tr>
				<td>Produto4</td>
				<td>20/10/2013</td>
				<td>Devolvido</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>

Teste e Veja ‹/›

Os resultados são mostrados a seguir:

Formulário Bootstrap Código Bootstrap