Si no eres de los que se quiere entretener con el CSS o buscas una forma sencilla de dar formato a los elementos de tu página, Bootstrap es tu solución y una gran ayuda para tus diseños.
Por ejemplo, si estamos trabajando con tablas puede ser que queramos tener tablas estilo cebra mediante CSS. Esas que tienen las líneas pares de un color y las líneas impares de otro. Aquí vamos a ver lo sencillo que es tener tablas estilo cebra con Bootstrap.
Lo primero a la hora de trabajar con Bootstrap es cargar el viewport y la hoja de estilo de Bootstrap en la cabecera:
Y lo segundo será cargar el framework Bootstrap al final de la página.
Es recomendable que la carga del script de Bootstrap sea la última línea de tu página, antes del elemento de cierre de body para evitar tener problemas.
Ahora insertarmos la tabla. Para el manejo de las tablas Bootstrap nos proporciona la clase «table». Así que definiremos la tabla de la siguiente forma:
| País | Capital | Superficie | Habitantes |
|---|---|---|---|
| España | Madrid | 504.645 km2 | 46,6 M |
Si queremos tener una tablas estilo cebra con Bootstrap deberemos de añadir, además de la clase table, la clase table-striped.
Así el código a escribir es el siguiente:
| País | Capital | Superficie | Habitantes |
|---|---|---|---|
| España | Madrid | 504.645 km2 | 46,6 M |
Una cosa importante que tenemos que saber a la hora de crear tablas estilo cebra con Bootstrap es que si utilizamos las agrupaciones thead, tbody,... el estilo de tipo cebra solo se aplicará a los elementos que estén dentro de la agrupación tbody, dejando de lado la cabecera.
