Bootstrap tabla básico
Un básico Bootstrap tabla tiene un acolchado ligero y sólo divisores horizontales.
El .table clase añade un estilo básico a una tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Las filas de rayas
El .table-striped clase añade cebra-raya a una tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabla bordeado
El .table-bordered clase añade fronteras en todos los lados de la mesa y las células:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Las filas de la libración
El .table-hover clase permite a un estado estacionario en filas de la tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabla condensada
El .table-condensed clase hace una tabla más compacta cortando el relleno de celda a la mitad:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Las clases contextuales
Clases contextuales pueden ser utilizados para filas de la tabla de color ( <tr> ) o celdas de la tabla ( <td> ):
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Las clases contextuales que se pueden utilizar son:
| Clase | Descripción |
|---|---|
.active | Aplica el color de la libración de la fila de tabla o celda de tabla |
.success | Indica una acción exitosa o positivo |
.info | Indica un cambio informativo neutral o acción |
.warning | Indica una advertencia de que podrían necesitar atención |
.danger | Indica una acción peligrosa o potencialmente negativo |
Tablas de respuesta
El .table-responsive clase crea una tabla de respuesta. La tabla a continuación, desplazarse horizontalmente en dispositivos pequeños (menos de 768px). Al ver en algo más grande que 768px de ancho, no hay diferencia:
Ejemplo
<div class="table-responsive">
<table class="table">
...
</table>
</div> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
completa Bootstrap Table Reference Bootstrap Table Reference
Para una referencia completa de todas las clases de mesa, ir a nuestra completa Bootstrap hacer referencia a tablas .