Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
We created this guide with great tips & tricks for the Twitter bootstrap for you. In the first part we will discuss the basics and tips for grid layouts, buttons and tabs. In the second part we will cover the actions area and how you can implement your code with bootstrap and how to switch to responsive layouts, use LESS preprocessor and customization options.
The Bootstrap framework actually comes from one of the Twitter teams, that wanted to put together a toolbox for coworkers, as a base framework for new web projects. It currently has almost 25.000 forks and 68.000 followers, at the version 3.1.1, being one of the most popular projects from Github. Besides HTML and CSS components it also includes a range of practical jQuery plugins for common user interface and since version 2 it supports and is heavily used for responsive layouts development. In the below examples we will use the 2nd version as a reference.
Although created by nerds, it is suitable for developers of all levels. It is intended to be a style guide, but well documented and with practical code examples that are ready to be used. Bootstraps down limit is Internet Explorer 7. Users who still develop and support IE7 unfortunately will not enjoy the benefits of gradients, rounded corners and shadows. Bootstrap follows the principle of progressive enhancement. The CSS code can be further developed and managed by using the CSS preprocessor LESS. Particularly attractive is the download section. You indicate which components you want in your download package and receive your personal variant, with colors, fonts, the degree of rounding of input fields and more. You are basically able to adapt it to your or to your client needs.
To start using Twitter Bootstrap, you should download the complete code including documentation from Github. There you will find in the docs/examples folder the document starter-template/index.html which provides a good basis for the first steps with Twitter Bootstrap. It starts - as expected - with the HTML5 doctype:
<! DOCTYPE html>
Then the base stylesheet is included:
<link href="../assets/css/bootstrap. css" REL="stylesheet">
This ensures that all HTML elements are cross-browser and displayed the same. Normalize.css is used. Unlike, for instance to a classic reset, the paddings and margins will be set to a reasonable default value in the normalization process. This is an excellent base on which to build with additional formatting. The stylesheet for the responsive layout is also involved. You should only use it when you really want to create a responsive layout:
<link href="../assets/css/bootstrap-responsive.css" REL="stylesheet">
< - [if lt IE 9 ]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> < / script > <[ endif] ->
<script src="../assets/js/jquery. js"></ script>
<script src="../assets/js/bootstrap-transition.js"></ script> <! - other scripts omitted ->
For the real application you should design your own download package in which the files are arranged - which plays an important role in performance.
Grid layouts are popular because they simplify the arrangement of elements on the website. Bootstrap offers everything you need for creating grid layouts. There are two versions to choose from: one is pixel and the other on percentages based. By default are 12 columns in the grid. 60 pixels with 20 pixels spacing, which corresponds to a total width of 940 pixels.
To use the grid layout , you must assign the appropriate classes to your elements. The main/comprehensive/extended element receives the class .container. In here you will define the individual lines for an element with the class .row. You can determine the exact division of a line using classes such as .spanX / .colX, where X specifies the number of spanned grid elements. Total should be 12 within a line.
As an example, the following code extends the first element on four columns, the second on eight. 4+8 = 12 shows that a row is completely filled.
<div class="span4"> four </ div>
<div class="span8"> eight </ div >
</ div >
If you plan to use a liquid grid instead of a fixed grid then you have to modify the class name in two places. The container element requires the class .container-fluid and in each row the class will be called .row-fluid.
<div class="span4"> four </ div>
<div class="span8"> eight </ div >
If a 12 -column grid does not fit, you can change it via the LESS variables, just like you can also adjust the spacing.
Bootstrap offers beautiful formatting- and for many frequently used user interface components, the matching functions too. This ranges from the formatting of headings, lists of form elements and buttons to breadcrumbs, thumbnails, pagers, drop-down menus and much more.
The matching icons for the buttons are supplied directly by downloading the code.
Two examples, namely the buttons and tabs. To create a simple button with the .btn class you can use a button- or an -a element. You can easily create different buttons types in matching colors over the LESS variables.
<button href="#" class="btn"> Normal </ button >
<button href="#" class="btn btn- warning"> Warning < / button>
The multiple use of classes is typical to bootstrap and shows that formatting is defined in own classes. You can control the size of the buttons with the three predefined classes: .btn-large, .btn-small or .btn-mini.
<button href="#" class="btn btn-warning btn-large"> Warning < / button>
You can directly integrate an icon. Use the i- or the b- element (which have indeed experienced a redefinition in HTML5) with one of the icons for certain classes. The CSS sprite technique is used. It includes all icons - there are around 140 - in a large image. The background-position for the right image section is automatically calculated. The following code snippet shows a magnifying glass:
<i class="icon-search"> </ i>
In the following example an icon will be integrated in a button:
<a href="#" class="btn btn-large"> <i class="icon-comment"> </ i> comment </ a>
Please note that it is important that you leave a space after the i- element.
For the creation of tabs you first need the right HTML base. In our case an unordered list with links. To make them act as tabs, add the .nav and .nav -tabs classes to the list container. We highlight the current tab with the .active class.
<ul class="nav nav-tabs">
<li class="active"> <a href="#"> One </ a> </ li>
<li> <a href="#"> Two </ a> </ li>
<li> <a href="#"> Three </ a> < / li >
You now have horizontal tabs. If you replace the class .nav-tabs with .nav-pills, you no longer have horizontal tabs but so-called pills, a sort of buttons:
<ul class="nav nav-pills"> < - rest of the list above ->
Tabs can also be placed under each other with the class .nav-stacked:
<ul class="nav nav-tabs nav-stacked"> < - rest of the list above ->
This also works in the pills variation:
<ul class="nav nav-pills nav-stacked"> < - rest of the list above ->
There are of course more components as tabs and buttons. The pager, bread-crumbs, thumbnails, progress indicators and more.
Particularly appealing are the details. If you click in a form field it will radiate from the inside, thanks to a cleverly set :focus multiple box-shadow. Responsible for this is the following statement in the stylesheet:
border-color : rgba (82, 168 , 236, 0.8) ; box-shadow : 0 1px 1px rgba (0, 0, 0, 0.075 ) inset , 0 0 8px rgba (82, 168 , 236, 0.6) ; outline : 0 none;
We suggest you to analyze the examples once again with Firebug. It's really easy to implement and use as a strong base for every project you have.