Twitter Bootstrap for tables and lists

Posted by in Frameworks

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
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:

Listas con Twitter Bootstrap
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:

Listas apiladas con Twitter Bootstrap
Lists stacked with Twitter Bootstrap

You can see the page and the code here.

I hope it can be useful to you!