tutorial básico Bootstrap

plugin Bootstrap

Well do Bootstrap Grupos de Listas do Bootstrap

Painéis do Bootstrap

Este capítulo explicará o painel Bootstrap (Panels). O componente de painel é usado para inserir componentes DOM em uma caixa. Crie um painel básico, adicionando apenas a classe ao elemento <div>. .panel e classe .panel-default basta, como mostrado nos exemplos a seguir:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Exemplo Bootstrap　-　painel padrão</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="panel panel-default">
　　　　<div class="panel-body">
　　　　　　　　Este é um painel básico
　　　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

título do painel

Podemos adicionar títulos ao painel de duas maneiras:

usar .panel-cabeçalho a classe pode adicionar simplesmente um contêiner de título ao painel.
usar com .panel-title da classe <h1>-<h6> para adicionar títulos com estilos pré-definidos.

Os exemplos a seguir demonstram essas duas maneiras:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　título do painel</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="panel panel-default">
	<div class="panel-heading">
		título sem title
	</div>
	<div class="panel-body">
		conteúdo do painel
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">
			título com title
		</h2>
	</div>
	<div class="panel-body">
		conteúdo do painel
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

rodapé do painel

Podemos adicionar rodapés ao painel, basta colocar o botão ou o subtítulo em uma classe .panel-rodapé no <div>. Abaixo está um exemplo que ilustra isso:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　rodapé do painel</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="panel panel-default">
	<div class="panel-body">
		Este é um painel básico
	</div>
	<div class="panel-rodapé">rodapé do painel</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Os rodapés do painel não herdam cor e borda do painel com cor de contexto, pois não são conteúdo em primeiro plano.

painel com cor de contexto

usar classe de estado de contexto painel-primário、painel-sucesso、painel-info、painel-warning、panel-dangerpara definir painéis com cor de contexto, os exemplos a seguir:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Painéis com cor 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>
<div class="panel panel-primary">
	<div class="panel-heading">
		<h2　class="panel-title">Título do painel</h2>
	</div>
	<div class="panel-body">
		Este é um painel básico
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h2　class="panel-title">Título do painel</h2>
	</div>
	<div class="panel-body">
		Este é um painel básico
	</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">
		<h2　class="panel-title">Título do painel</h2>
	</div>
	<div class="panel-body">
		Este é um painel básico
	</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">
		<h2　class="panel-title">Título do painel</h2>
	</div>
	<div class="panel-body">
		Este é um painel básico
	</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2　class="panel-title">Título do painel</h2>
	</div>
	<div class="panel-body">
		Este é um painel básico
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Painel com tabela

Para criar uma tabela sem borda em um painel, podemos usar a classe .table。Suponha que haja um <div> contendo .panel-body，podemos adicionar uma borda extra ao topo da tabela para separá-la. Se não incluir .panel-body do <div>, o componente se moverá sem interrupção do cabeçalho do painel para a tabela.

O exemplo a seguir demonstra isso:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Painel com tabela</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="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">Título do painel</h2>
	</div>
	<div class="panel-body">
		Este é um painel básico
	</div>
	<table class="table">
		<th>Produto</th><th>Preço</th>
		<tr><td>Produto A</td><td>200</td></tr>
		<tr><td>Produto B</td><td>400</td></tr>
	</table>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Título do painel</div>
	<table class="table">
		<th>Produto</th><th>Preço</th>
		<tr><td>Produto A</td><td>200</td></tr>
		<tr><td>Produto B</td><td>400</td></tr>
	</table>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Painel com lista de grupos

Podemos incluir listas de grupos em qualquer painel, adicionando .panel e .panel-default classe para criar painéis e adicionar listas de grupos dentro deles. Você pode Listas de grupos aprender a criar listas de grupos em um capítulo.

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Painel com lista</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="panel panel-default">
	<div class="panel-heading">Título do painel</div>
	<div class="panel-body">
		<p>Este é um conteúdo básico de painel. Este é um conteúdo básico de painel.
			Este é um conteúdo básico de painel. Este é um conteúdo básico de painel.
			Este é um conteúdo básico de painel. Este é um conteúdo básico de painel.
			Este é um conteúdo básico de painel. Este é um conteúdo básico de painel.
		</p>
	</div>
	<ul class="list-group">
		<li　class="list-group-item">Registro de domínio gratuito</li>
		<li　class="list-group-item">Espaço de hospedagem gratuito Windows</li>
		<li　class="list-group-item">Número de imagens</li>
		<li　class="list-group-item">24*7　suporte</li>
		<li　class="list-group-item">Custo de atualização anual</li>
	</ul>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Well do Bootstrap Grupos de Listas do Bootstrap