Bootstrap (front-end framework)

Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface design elements, as well as optional JavaScript extensions.

It is the most popular project in GitHub and is used by NASA and MSNBC among others.

Origin

Bootstrap emerged from a Twitter project to develop internal analysis and management tools. At some point, various libraries were used for the interface development, which led to inconsistencies and a high maintenance burden. In face of those challenges:

"[...] a super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company."

The first deployment under real conditions happened on bootstrap first Hackweek. Mark Otto showed some colleagues how to accelerate their projects development with the help of the toolkit. As a result dozens of teams have moved to the framework.

In August 2011 Twitter decided to release bootstrap as open-source. As of February 2012 it is the most popular GitHub development project.

Features

Bootstrap has relatively incomplete support for HTML 5 and CSS 3, but is compatible with all major browsers. Basic information of compatibility of websites or applications is available for all devices and browsers. There is a concept of partial compatibility that makes the basic information of a website available for all devices and browsers. For example, the properties introduced in CSS3 for rounded corners, gradients and shadows are used by bootstrap despite lack of support by older web browsers. These extend the functionality of the toolkit, but are not required for its use.

Since version 2.0 it also supports responsive design. This means the graphic design of web pages adjust dynamically, taking into account the characteristics of the device used (PC, tablet, mobile phone).

Bootstrap is open source and available on Github. Developers are encouraged to participate in the project and make their own contributions to the platform.

Structure and function

Bootstrap is modular and consists essentially of a series of LESS stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. The developer can adapt the bootstrap file itself, selecting the components they wish to use in her project.

Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by the LESS declarations.

The use of LESS stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Since version 2.0, the configuration of bootstrap also has a special "Customize" option in the documentation. Moreover, the developer chooses on a form the desired components and adjusts, if necessary, the values ​​of various options to their needs. The subsequently generated package already includes the pre-built CSS style sheet.

Grid System and Responsive Design

Bootstrap comes standard with a 940 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use different resolutions and types of devices: mobile phones, portrait and landscape format, Tablets and PCs with a low and high resolution (widescreen). This adjusts the width of the columns automatically.

Understanding CSS Stylesheet

Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a browser and system-wide uniform, modern appearance for formatting text, tables and form elements.

Re-usable components

In addition to the regular HTML elements bootstrap contains other commonly used interface elements. These include buttons with advanced features (eg. grouping of buttons or buttons with drop-down option), (make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation , pagination , etc.), labels, advanced typographic capabilities thumbnails, formatting for warning messages and progress bar.

JavaScript plug-ins

The JavaScript components of bootstrap are based on the jQuery JavaScript framework. Plugins are accordingly found in the jQuery toolkit plugins. They provide additional user-interface elements such as dialog, tooltips and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields.

Use

File:Twitter-bootstrap-example-firefox-10.png

A bootstrap-designed document shown in Mozilla Firefox 10

To use bootstrap in an HTML page the developer must first compile one CSS file from the downloaded LESS stylesheets. This can be done with a special compiler.

Then she must integrate the generated CSS file in the HTML file. If JavaScript components are selected, they must be referenced along with the jQuery library in the HTML document.

The following example illustrates how this works. The HTML code defines a simple search form and a list of results in tabular form. The page consists of regular, semantical HTML 5 elements and some additional CSS class information according to the bootstrap documentation. The figure shows the representation of the document in Mozilla Firefox 10.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Twitter Bootstrap</title>

    <!-- Include the bootstrap stylesheets -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Optional: Include the jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
    </script>

    <!-- Optional: Incorporate the Bootstrap Javascript plugins -->
    <script src="js/bootstrap.min.js"></script>
  </head>
 
  <body>
    <div class="container">
      <h1>Search</h1>
 
      <p>Example for a simple search form.</p>
 
      <!-- Search form with input field and button -->
      <form class="well-shaped search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
 
      <h2>Results</h2>
 
      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</ th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor sit amet</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Consetetur sadipscing elitr</td>
          </tr>
          <tr>
            <td>3</td>
            <td>At vero eos et accusam</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

External links

• Bootstrap, from Twitter - The official website, contains documentation and downloads
• LESS - The dynamic stylesheet language