Jump to content

Bootstrap (front-end framework)

From Wikipedia, the free encyclopedia

This is an old revision of this page, as edited by Mintygoat (talk | contribs) at 02:59, 21 May 2014 (added information about bootstrap 3.0). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Bootstrap
Repository
Written inHTML, CSS, LESS, SASS and JavaScript
TypeHTML and CSS-based design templates
LicenseMIT License (Apache License 2.0 prior to 3.1.0)
Websitegetbootstrap.com

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, navigation and other interface components, as well as optional JavaScript extensions. It is the No.1 project on GitHub with 65,000+ stars and 23,800 forks (as of March 2014) [1] and has been used by NASA and MSNBC, among many others.[2][3]

Origin

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto:

"...[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."[4]

The first deployment under real conditions happened during Twitter's first Hackweek.[5] Mark Otto showed some colleagues how to accelerate their project's development with the help of the toolkit. As a result, dozens of teams have moved to the framework.

In August 2011, Twitter released Bootstrap as open source. In February 2012, it was the most popular GitHub development project.

Features

Bootstrap is compatible with the latest versions of all major browsers. It gracefully degrades when used on older browsers such as Internet Explorer 8.

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

Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.

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

Recently, community members have translated Bootstrap's documentation into various languages, including Chinese, Spanish and Russian.[6]

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. Developers can adapt the Bootstrap file itself, selecting the components they wish to use in their 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 comes standard with a 1170 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

The CSS stylesheet

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

Re-usable components

In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. These include buttons with advanced features (e.g. 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, warning messages and a progress bar.

JavaScript components

Bootstrap comes with several JavaScript components in the form of jQuery plugins. They provide additional user interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. In version 2.0, the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.

An implementation of Twitter Bootstrap using the Dojo Toolkit is also available. It is called Dojo Bootstrap[8][9] and is a port of the Twitter Bootstrap plugins. It uses 100% Dojo code and has support for AMD (Asynchronous Module Definition[10]).

Likewise, Bootstrap controls for AngularJS are also available; they are called UI Bootstrap.[11] This port reuses some Bootstrap markup..

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 downloads the Bootstrap CSS stylesheet and includes a link in the HTML file.

(The developer can also compile the CSS file from the downloaded LESS or SASS stylesheets, with a special compiler.)

If the developer wants to use the JavaScript components, 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 HTML 5 elements and CSS 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 href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>

      <!-- Search form with input field and button -->
      <form class="well form-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 ...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam, ...</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor ...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="//code.jquery.com/jquery-1.7.2.min.js"></script>

    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </body>
</html>

Creating a simple layout grid (Fluid)

    <div class="row">
       <div class="col-md-4">...</div>
       <div class="col-md-4">...</div>
       <div class="col-md-4">...</div>
    </div>

See also

References

  1. ^ "GitHub: Search Stars>1". Retrieved 5 October 2013.
  2. ^ "NASA - Spot The Station". 2012-11-06.
  3. ^ "MSNBC - Breaking News". 2012-11-06.
  4. ^ Mark Otto (2012-01-17). "Bootstrap in A List Apart #342". Retrieved 2012-03-05.
  5. ^ Mark Otto (2011-08-19). "Bootstrap from Twitter". Retrieved 2012-04-27.
  6. ^ http://getbootstrap.com/about/
  7. ^ http://blog.seosemanticxhtml.com/a-complete-reference-library-of-bootstrap-classes/
  8. ^ Blog: Using Twitter Bootstrap with Dojo. Retrieved on 2012-09-18
  9. ^ Dojo Toolkit implementation of Twitter Bootstrap. Retrieved on 2012-09-18
  10. ^ AMD for asynchronous loading of modules and its dependencies. Retrieved on 2012-09-18
  11. ^ http://angular-ui.github.io/bootstrap/

External links

Wikimedia Commons has media related to Bootstrap (framework).
  • Bootstrap - The official website, contains documentation and downloads
  • Bootstrap Blog - The official Bootstrap blog maintained by the developer, Mark Otto
  • Bootstrap Expo - The official website of Beautiful and inspiring uses of Bootstrap
  • Wrapbootstrap - Premium Bootstrap themes marketplace.
  • Bootstrap CDN - Bootstrap CDN.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Bootstrap_(front-end_framework)&oldid=609469245"