Twitter Bootstrap for tables and lists
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:
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!
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:
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:
You can see the page and the code here.
I hope it can be useful to you!