Forma bootstrap
Bootstrap proporciona una tabla de diseño creado clara. En la siguiente tabla se muestran algunos elementos de la tabla apoyo de arranque:
| etiqueta | descripción |
|---|---|
| <Tabla> | Agregando a formar la base de estilo. |
| <Culata en T> | fila de encabezado elemento contenedor de tablas (<tr>), que se utiliza para identificar las columnas de la tabla. |
| <Tbody> | Tabla elemento contenedor en el cuerpo de la fila de tabla (<tr>). |
| <Tr> | Un grupo aparece en una sola línea en el elemento contenedor de la celda de la tabla (<td> o <th>). |
| <Td> | La celda de la tabla por defecto. |
| <Th> | celda de la tabla especial, usado para identificar la columna o fila (dependiendo de la extensión y localización). Debe utilizar el <thead> interior. |
| <Caption> | Sobre la descripción del contenido del almacén tabla o resumen. |
clase Form
Las siguientes tablas de estilos de tabla se pueden utilizar:
| categoría | descripción | Ejemplos |
|---|---|---|
| .table | <Table> Añadir estilo de base arbitraria (sólo separador horizontal) | probar |
| .table-rayado | En el <tbody> en el formulario para agregar rayas de la cebra (IE8 no es compatible) | probar |
| .table-confinado | Añadir un borde para todas las celdas de la tabla | probar |
| .table-libración | En el <tbody> estado estacionario dentro de cualquier fila permitir | probar |
| .table condensar | Hacer más forma compacta | probar |
| El uso conjunto de todas las clases de formularios | probar | |
clase <tr>, <th> y <td>
Clases La siguiente tabla se pueden utilizar para formar una fila o celda:
| categoría | descripción | Ejemplos |
|---|---|---|
| .active | La aplicación de color en la línea de vuelo estacionario o célula | probar |
| .success | Indica una operación exitosa | probar |
| .info | La información que representa la variación de operación | probar |
| .warning | Representa una operación de alerta | probar |
| .danger | Representa una operación peligrosa | probar |
La forma básica
Si desea que sólo con un acolchado (el relleno) y división básica a nivel de tabla, agregar laclase.table, como se muestra en los siguientes ejemplos:
Ejemplos
Trate »
Los resultados son los siguientes:
Opcional clase Form
Además del etiquetado de la tabla básica y clase .table, y algunos se pueden usar como un marcador para definir las clases de estilo. A continuación se dará a conocer a estas clases.
tabla de rayas
Mediante la adición dela clase-.table rayado,podrás ver las rayas en la línea <tbody> dentro, como muestra el siguiente ejemplo:
Ejemplos
Trate »
Los resultados son los siguientes:
borde de la tabla
Mediante la adición dela clase-.table confinado,se verá que cada elemento tiene un borde alrededor, y el total se redondeará forma, como se muestra en el siguiente ejemplo:
Ejemplos
Trate »
Los resultados son los siguientes:
tabla Hover
Mediante la adición dela clase .table-vuelo estacionario,cuando el puntero se encuentra sobre la fila en que habrá un fondo gris claro, como se muestra en los siguientes ejemplos:
Ejemplos
Trate »
Los resultados son los siguientes:
Forma compacta
Mediante la adición declase-.table condensada,acolchado en línea (relleno) se reduce a la mitad, de modo que la mesa parece más compacta, como se muestra en el siguiente ejemplo. Esta información es útil cuando se desea un aspecto más compacto.
Ejemplos
Trate »
Los resultados son los siguientes:
clase de contexto
clase de contexto que aparece en la siguiente tabla le permite cambiar el color de fondo de filas de la tabla o celdas individuales.
| 类 | 描述 |
|---|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
Estas clases se pueden aplicar a la etiqueta <tr>, <td> o <th>.
Ejemplos
Trate »
Los resultados son los siguientes:
tabla sensible
Por cualquier.tableenvuelto enclase .table sensible,puede tener la mesa para desplazarse horizontalmente para adaptarse a dispositivos pequeños (menos de 768px). Visualización en un equipo a gran escala es mayor que 768px de ancho, que no verá ninguna diferencia.
Ejemplos
Trate »
Los resultados son los siguientes:
