Twitter Bootstrap, an introduction

Posted by in Frameworks

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

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

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: