Bootstrap 基础教程

Bootstrap 插件

Well de Bootstrap Grupos de listas de Bootstrap

Panes de Bootstrap

本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的示例所示：

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Ejemplo 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="panel panel-default">
　　　　<div class="panel-body">
　　　　　　　　Este es un panel básico
　　　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

面板标题

我们可以通过以下两种方式来添加面板标题：

使用 .panel-heading class 可以很简单地向面板添加标题容器。
使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

下面的示例演示了这两种方式：

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo 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="panel panel-default">
	<div class="panel-heading">
		不带　title　的面板标题
	</div>
	<div class="panel-body">
		面板内容
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">
			带有　title　的面板标题
		</h2>
	</div>
	<div class="panel-body">
		面板内容
	</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

面板脚注

我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。下面的示例演示了这点：

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo 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="panel panel-default">
	<div class="panel-body">
		Este es un panel básico
	</div>
	<div class="panel-footer">面板脚注</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

面板脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，para configurar el panel con color de contexto, el ejemplo es el siguiente:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Panel con color 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 del panel</h2>
	</div>
	<div class="panel-body">
		Este es un panel básico
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h2　class="panel-title">Título del panel</h2>
	</div>
	<div class="panel-body">
		Este es un panel básico
	</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">
		<h2　class="panel-title">Título del panel</h2>
	</div>
	<div class="panel-body">
		Este es un panel básico
	</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">
		<h2　class="panel-title">Título del panel</h2>
	</div>
	<div class="panel-body">
		Este es un panel básico
	</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2　class="panel-title">Título del panel</h2>
	</div>
	<div class="panel-body">
		Este es un panel básico
	</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

Panel con tabla

Para crear una tabla sin borde en el panel, podemos usar la clase .table。Supongamos que hay un <div> que contiene .panel-body，podemos agregar un borde adicional al principio de la tabla para separarlo. Si no se incluye .panel-body del <div>, el componente se moverá sin interrupción desde la cabecera del panel al tabla.

El siguiente ejemplo demuestra esto:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Panel con tabla</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 del panel</h2>
	</div>
	<div class="panel-body">
		Este es un panel básico
	</div>
	<table class="table">
		<th>Producto/th><th>Precio/th>
		<tr><td>Producto A</td><td>200</td></tr>
		<tr><td>Producto B</td><td>400</td></tr>
	</table>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Título del panel</div>
	<table class="table">
		<th>Producto/th><th>Precio/th>
		<tr><td>Producto A</td><td>200</td></tr>
		<tr><td>Producto B</td><td>400</td></tr>
	</table>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

Panel con lista

Podemos incluir listas grupales en cualquier panel, añadiendo .panel y .panel-default clase para crear paneles, y agregar listas grupales en el panel. Puede comenzar desde Listas grupales aprender a crear listas grupales en un capítulo.

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Panel con 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 del panel</div>
	<div class="panel-body">
		<p>Este es un contenido básico de panel. Este es un contenido básico de panel.
			Este es un contenido básico de panel. Este es un contenido básico de panel.
			Este es un contenido básico de panel. Este es un contenido básico de panel.
			Este es un contenido básico de panel. Este es un contenido básico de panel.
		</p>
	</div>
	<ul class="list-group">
		<li class="list-group-item">Registro de dominio gratuito</li>
		<li class="list-group-item">Espacio de alojamiento gratuito de Windows</li>
		<li class="list-group-item">Número de imágenes</li>
		<li class="list-group-item">24*7　soporte</li>
		<li class="list-group-item">Costo de actualización anual</li>
	</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

Well de Bootstrap Grupos de listas de Bootstrap