Although I have used a lot PureCSS framework to beautify the front-end aspect, I am falling in love to Twitter Bootstrap (TB) …. to good for not using it! Since the first time I wrote about TB until today, more than a year and things have changed, a lot of improvements, trying to make life easy to front-end developers. Here you have a good tutorial.
I must admit that using TB is easy, but you need to invest some time studying all posibilities, and that’s what I’m doing. Of course, this book Bootstrap 3, el manual (in spanish) is helping me a lot!
Also, I want to recommend you a very attractive version of TB, written under TB version 3: Material design for Bootstrap.
Buttons
I wrote an entrance how to create nice buttons using PureCSS , and today I’m doing the same but for TB. The main class is btn , and you need a second class to add aspect: btn-default, or btn-primary, btn-success, btn-info, btn-warning o btn-danger.
You can see the result here.
Also, you can modify the size, by using different classes: btn-lg for large, btn-sm for small, and btn-xs for extra small.
The classe active can be included as well to show the active button. And you can disable buttons with the attribute disabled=”disabled” in case you use the tag <button>, while you can include the class disabled if you are using the tag <a> (and adding role=”button”).
If you compare the creation of buttons between PureCSS and TB, I think both are easy to use, and in both cases, you need two clases: one for indicateing that you are creating a button, and a second one for the aspect.
If you need an extra help, you can create cool Boostrap buttons by using this generator: http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php.
Glyphicons
Glyphicons are a set of icons included on Bootstrap, that you can use adding classes on span tags. As an example::
<span class=”glyphicon glyphicon-eur“></span>
Very simple. The list of icons available are here.
Tabs
Creating tabs is very easy with jQueryUI, but it’s also easy using Bootstrap. You only need to be careful, and you’ll do it. You need a DIV container where everything will be handle, and inside this container, you need to define to DIVs: one for the headres, and another one for the content. The way to link both is by using the href property. Here you can see an HTML code for creating a tab widget, with 3 tabs.
<section class="container"> <div id="tab_resultados"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#ver-tab1">Tab 1</a></li> <li><a data-toggle="tab" href="#ver-tab2">Tab 2</a></li> <li><a data-toggle="tab" href="#ver-tab3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="ver-tab1" class="tab-pane fade in active"> <p>Info de Tab 1</p> </div> <div id="ver-tab2" class="tab-pane fade"> <p>Info de Tab 2</p> </div> <div id="ver-tab3" class="tab-pane fade"> <p>Info de Tab 3</p> </div> </div> </div> </section>
As you can see, if you follow this structure, everything is very ease. All work is developed by classes nav, nav-tabs and tab-content. The first one is the container, the second the tab header and the third is the content. For showing the content, you need to use the class tab-pane fade. Easy, isn’t it?
Also, you can use the class nav-pills instead of the class nav-tabs if you want a different visualization of the tabs, although you’ll get the same behaviour. And, I have used the class nav-justified on the botton tabs, as you can see.
Next image is the result of this code, and also here:
Tabs en Bootstrap
I hope is can be interesting for you, and happy coding!
You can read more entrance related to Twitter Bootstrap: an introduction, working with tables.