This second tip for Twitter Bootstrap (TB) is dedicated to work with tables.
NOTE: you can try also tables with PureCSS , another front-end framwork.
We are esing the template we create in the previous post. Now we insert a simple table in our template, like this:
<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>
The result:
ColumnaNumeroColor
| Hola | 2 | Amarillo |
| Hola 2 | 3 | Verde |
| Adios | 5 | Azul |
| Eooo | 3 | Gris |
| Hasta luego | 5 | Naranja |
At this moment, I have not applied no style class, but adding the “table” class change everything and now, the table seems different. If we would like a “zebra” table, just add the “table-striped” class, and it’s done!
- Tablas con Twitter Bootstrap
You can see the example here.
Working with lists
TB facilitates dealing with lists as well, if the estructure is like this, only including links (it doesn’t work so goo if the list item includes text). It’s prefered something like this
- <li><a href=”#”>Link</a></li>
instead of a item like this:
- <li>Go to <a href=”#”>Link</a></li>
Let’s add a few items:
Let’s add some classes. The “nav” class is used to “remove” the marker, and then, we have to options: doing a tab including the “nav-tabs” class, or adding the “nav-pills” class, that allows us to include the “active” class for highlight (in twitter blue, of course!) the option/s we need. Here you can see the result:
- Lists with Twitter Bootstrap
But if we want vertical navigation, we can achive it adding the “nav-stacked” class, although it’s recomended to use the spanX classes (where X modifies the width to out needs) to fit the width. Again, we can use the “active” class, obtaining the results like this:
- Lists stacked with Twitter Bootstrap
You can see the page and the code here.
I hope it can be useful to you!