Twitter Bootstrap, an introduction
Twitter bootstrap is a CSS framework, develop by Twitter, ready to do a lot of cool things, and I’ll try to show you in a few post. Companies like Twitter, Facebook or Google have “alternatives” projects that one should study in deep, specially if you’re a developer.
You have to visit twitter.github.com/bootstrap to download Twitter Bootstrap,. Now we have the zip file which contains 2 directories: css, y js, so, we create a dir to include these two sub dirs.
I am using a very simple template for using this library, and also using the html5shiv library, for “avoiding” some IE problems, and respond.js. You have a template available on the Bootstrap web.:
script src="js/html5shiv.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- Optionally enable responsive features in IE8 --> <script src="js/respond.js"></script> </body> </html>
You can download the librery respond.js here: github.com/scottjehl/Respond.
NOTE: I began this tutorial with version 2, but it has been adapted to version 3. You have more info here.
News from versión 3
A few weeks ago, TB arrived to version 3, with several improvements and news:
- Buttons improvements
- graphicons are not part of the TB framework anymore, although you can add it as a plugin, becaming an independent project.
- New grid
- Context panels
- Form Layouts According to Cols, no more controls
- And more …
As an extra link, it’s very interesting the proposal you find from DivShot for TB3, offering an editor to use it: http://www.divshot.com/features
Creating a form
I’ll try the new styles with an example, so first, let’s prepare 3 forms:
You can try here, with the code, with no classes yet.
Applying styles to forms
In the first example, let’s improve the form aspect, consisting in a label and a text box with two buttons.
The class well allows you to set a background color to the element, in this case, the from. The class span3 (exactaty the same as span1, span2, … ,span6, .. untl span12) allows you to enlange or reduce the width of the elements.
For Buttons you can use the btn class, although I can make it more visible by adding the class btn-primary, and we’ll see the same button, but blue (the “twitter blue”. There are more classes for changind button colors, and it will be cover in a new entrance.
If you would like to have round borders on textboxes, it’s easy just adding the class search-query.
Finally, if you want all form elements on the same line, add the form-inline class, and everything will change ! You need to include the class form-control in all input tags, to divide the content in several lines.
You can use pagination-centered class to center content and elements, and it’s valid for the head and for the body, so, I have add it to the template!
The result is here.
Have a nice day!! And remember that you can read more about forms in TB here.
Another entrances related to Twitter Bootstrap are: