Para la segunda entrada de Twitter Bootstrap (TB) vamos a trabajar con tablas. En la primera entrada, os recuerdo que creamos una plantilla base, que será la que utilicemos en nuestros ejemplos.
NOTA: Puedes comparar las tablas de este framework, con PureCSS, otro magnífico framework CSS para los perezosos del front-end.
Nada mejor que introducir una tabla en nuestra plantilla:
<table>
<thead>
<th>Columna</th>
<th>Numero</th>
<th>Color</th>
</thead>
<tbody>
<tr>
<td>Hola</td>
<td>2</td>
<td>Amarillo</td>
</tr>
<tr>
<td>Hola 2</td>
<td>3</td>
<td>Verde</td>
</tr>
<tr>
<td>Adios</td>
<td>5</td>
<td>Azul</td>
</tr>
<tr>
<td>Eooo</td>
<td>3</td>
<td>Gris</td>
</tr>
<tr>
<td>Hasta luego</td>
<td>5</td>
<td>Naranja</td>
</tr>
</tbody>
</table>
Lo vemos así:
ColumnaNumeroColor
| Hola | 2 | Amarillo |
| Hola 2 | 3 | Verde |
| Adios | 5 | Azul |
| Eooo | 3 | Gris |
| Hasta luego | 5 | Naranja |
De momento, no hemos aplicado ningún estilo, que haremos con la clase table, para que esto vaya tomando forma. Si además, queremos que muestre las filas con colores alternos, es cuestión de añadir la clase table-striped, y ya lo tenemos listo, según se muestra abajo.
Tablas con Twitter Bootstrap
Podeis ver la página aquí.
Trabajando con listas
TB también facilita mucho el trabajo con las listas, especialmente cuando sólo incluyen vínculos (no funcionan tan bien cuando no incluyen texto). Es decir, con
- <li><a href=”#”>Enlace</a></li>
funciona bien, y no tanto cuando el patrón es este
- <li>Vamos al <a href=”#”>Enlace</a></li>
Preparamos unas cuantos enlaces:
Salvo los vínculos, lo demás es “lo clásico”. La clase “nav” es la que usamos para eliminar el marcador, y a partir de aquí, tenemos dos opciones. Podemos hacerlo tipo “tabs”, incorporando la clase “nav-tabs“, o bien la clase “nav-pills“, que además permite jugar con la clase “active“, para remarcar la opción que más nos interese (en azul). El resultado es este:
Listas con Twitter Bootstrap
Sin embargo, para crear estas barras de navegación verticales, además tenemos que añadir la clase nav-stacked, pero para limitar el ancho, volvemos a usar las clases spanX, siendo X el número que más se aproxime al tamaño óptimo según nuestras necesidades. Además, aquí podemos usar también la clase active. El resultado:
Listas apiladas con Twitter Bootstrap
Podeis acceder al código aquí.
Y con esto, hemos conocido otro poquito más de TB. Espero que os sea de utilidad!
Otras entradas relacionadas con Twitter Boostrap, son: