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

Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Tablas Bootstrap

Bootstrap proporciona un diseño claro para la creación de tablas. La siguiente tabla enumera algunos elementos de tabla admitidos por Bootstrap:

标签clases
Etiqueta<table>
<thead>Agregar estilo básico a la tabla.
<tbody>Elemento contenedor de la fila de título de la tabla (<tr>), utilizado para identificar columnas.
<tr>Elemento contenedor de filas de la tabla principal (<tr>).
<td>Elemento contenedor de un grupo de celdas de tabla que aparecen en una única fila (<td> o <th>).
Célula de tabla predeterminada.<th>
Célula de tabla especial, utilizada para identificar columnas o filas (dependiendo del rango y posición). Debe usarse dentro de <thead>.<caption>

Descripción o resumen sobre el contenido almacenado en la tabla.

Clases de tabla

Las clases de contexto enumeradas en la tabla a continuación le permiten cambiar el color de fondo de las filas o celdas individuales de la tabla.clasesejemplo en línea
encerrado enEstilos de la siguiente tabla se pueden usar en la tabla:Intente uno
encerrado en-stripedAgregar estilo básico a cualquier <table> (solo líneas horizontales)8 Agregar rayas en forma de zebra en <tbody> (IEIntente uno
encerrado en-borderedNo se admite)Intente uno
encerrado en-hoverAgregar bordes a todas las celdas de la tablaIntente uno
encerrado en-condensedHabilitar el estado de hover del ratón en cualquier fila <tbody>Intente uno
Hacer que la tabla sea más compactaIntente uno

Uso conjunto de todas las clases de tabla

<tr>, <th> y <td> clases

Las clases de contexto enumeradas en la tabla a continuación le permiten cambiar el color de fondo de las filas o celdas individuales de la tabla.clasesejemplo en línea
DescripciónLas clases de la siguiente tabla se pueden usar para las filas o celdas de la tabla:Intente uno
aplica un color de subrayado a una fila o celda específicaAplica el color de hover en la fila o celdaIntente uno
.infoRepresenta una acción de cambio de informaciónIntente uno
representa una acción exitosa o positivaRepresenta una acción de advertenciaIntente uno
representa una advertencia que debe prestar atenciónRepresenta una acción peligrosaIntente uno

Tabla básica

Si desea una tabla básica con solo margen interior (padding) y división horizontal, agregue la clase encerrado encomo se muestra en el siguiente ejemplo:

No verá ninguna diferencia cuando vea la tabla en dispositivos grandes (más de

ejemplo
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Tabla 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>Disposición básica de tabla</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<caption>Disposición de tabla condensada</<th>
　　　　　　　　　<th>Nombre</<th>
　　　　　　</tr>
　　　</<thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<th>Código postal</td>
　　　　　　　　　<td>Tanmay</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　000/td>
　　　　　　　　　<td>Sachin</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Clases opcionales de tabla

Además de las marcas básicas de la tabla y la clase .table, hay algunas clases que se pueden usar para definir estilos para las marcas. A continuación, se le presentarán estas clases.

Tabla con rayas

A través de la adición encerrado en-striped La clase, verá rayas en las filas <tbody>, como se muestra en el siguiente ejemplo:

No verá ninguna diferencia cuando vea la tabla en dispositivos grandes (más de

ejemplo
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Tabla con rayas/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>
tabla condensada<-striped">
	<caption>Disposición de tabla con rayas</caption>
	<thead>
		<tr>
			<caption>Disposición de tabla condensada</<th>
			<th>Nombre</<th>
			<th>Ciudad</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Código postal</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Tabla con borde

A través de la adición encerrado en-bordered La clase, verá que cada elemento tiene un borde y que la tabla tiene esquinas redondeadas, como se muestra en el siguiente ejemplo:

No verá ninguna diferencia cuando vea la tabla en dispositivos grandes (más de

ejemplo
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Tabla con borde/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>
tabla condensada<-bordered">
	<caption>Disposición de tabla con borde</caption>
	<thead>
		<tr>
			<caption>Disposición de tabla condensada</<th>
			<th>Nombre</<th>
			<th>Ciudad</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Código postal</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Tabla al pasar el ratón

A través de la adición encerrado en-hover La clase, cuando el puntero del ratón se coloca sobre la fila, aparecerá un fondo de color gris claro, como se muestra en el siguiente ejemplo:

No verá ninguna diferencia cuando vea la tabla en dispositivos grandes (más de

ejemplo
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Tabla al pasar el ratón</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>
tabla condensada<-hover">
	<caption>Disposición de tabla al pasar el ratón</caption>
	<thead>
		<tr>
			<caption>Disposición de tabla condensada</<th>
			<th>Nombre</<th>
			<th>Ciudad</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Código postal</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Simplificación de la tabla

A través de la adición encerrado en-condensed La propiedad de margen interior (padding) se divide en dos partes para que la tabla se vea más compacta, como se muestra en el siguiente ejemplo. Esto es muy útil cuando se desea que la información se vea más compacta.

No verá ninguna diferencia cuando vea la tabla en dispositivos grandes (más de

ejemplo
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　精简表格Prueba y mira ‹/›

Los resultados se muestran a continuación:

<td>Pune<

clases de contexto

Las clases de contexto enumeradas en la tabla a continuación le permiten cambiar el color de fondo de las filas o celdas individuales de la tabla.clases
Descripción.active
aplica un color de subrayado a una fila o celda específica.success
representa una acción exitosa o positiva.warning
representa una advertencia que debe prestar atención.danger

representa una acción peligrosa o potencialmente negativa

No verá ninguna diferencia cuando vea la tabla en dispositivos grandes (más de

ejemplo
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　Estas clases se pueden aplicar a <tr>, <td> o <th>./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">
	clases de contexto</caption>
	<thead>
		<tr>
			<th>Producto</<th>
			<th>Fecha de pago</<th>
			<th>Estado</<th>
		</tr>
	</<thead>
	<tbody>
		<caption>Disposición de tabla de contexto<
			<td>Producto1</td>
			<td>23/11/2013</td>
			<td>Por enviar</td>
		</tr>
		<tr class="active">
			<td>Producto2</td>
			<td>10/11/2013</td>
			<td>En tránsito</td>
		</tr>
		<tr class="success">
			<td>Producto3</td>
			<td>20/10/2013</td>
			<td>Por confirmar</td>
		</tr>
		<tr class="warning">
			<td>Producto4</td>
			<td>20/10/2013</td>
			<td>Reembolsado</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

<tr class="danger">

tabla responsiva encerrado en a través de la inclusión de cualquier encerrado en-.table responsive 768class, puede hacer que la tabla se desplace horizontalmente para adaptarse a dispositivos pequeños (menores de 768px). Cuando esté en dispositivos mayores de

No verá ninguna diferencia cuando vea la tabla en dispositivos grandes (más de

ejemplo
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　<title>Bootstrap ejemplo</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>Disposición de tabla responsiva</caption>
		<thead>
			<tr>
				<th>Producto</<th>
				<th>Fecha de pago</<th>
				<th>Estado</<th>
			</tr>
		</<thead>
		<tbody>
			<tr>
				<td>Producto1</td>
				<td>23/11/2013</td>
				<td>Por enviar</td>
			</tr>
			<tr>
				<td>Producto2</td>
				<td>10/11/2013</td>
				<td>En tránsito</td>
			</tr>
			<tr>
				<td>Producto3</td>
				<td>20/10/2013</td>
				<td>Por confirmar</td>
			</tr>
			<tr>
				<td>Producto4</td>
				<td>20/10/2013</td>
				<td>Reembolsado</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Formularios BootstrapCódigo Bootstrap