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.
Starting
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.:
<!DOCTYPE html>
<html>
<!-- version 1.0.2 para la versión 3 de Twitter Bootstrap -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Manejando datos - Probando Twitter Bootstrap</title>
<!-- Hojas de Estilo -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="pagination-centered">
<h1>Probando Twitter Bootstrap desde Manejando datos</h1>
</header>
<section>
<!-- Escriba aquí su código -->
</section>
<footer>
<h6>
Creado desde <a target="_blank" href="http://www.manejandodatos.es">Manejando datos</a>
</h6>
</footer>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<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:
Formulario inicial
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.
Forms in Twitter Bootstrap
Have a nice day!! And remember that you can read more about forms in TB here.
Another entrances related to Twitter Bootstrap are: