Bootstrap (Framework)

Bootstrap
	; A sample page designed with Bootstrap 3 in Google Chrome 34
Basic data
developer	Twitter
Publishing year	August 19, 2011
Current version	4.5.2 ; ( August 6, 2020 )
operating system	Platform independence
programming language	JavaScript , Cascading Style Sheets , Hypertext Markup Language , Sass
category	Web design
License	MIT license
German speaking	No
	getbootstrap.com

Bootstrap is a free front end - CSS framework . It contains HTML and CSS- based design templates for typography , forms, buttons, tables, grid systems, navigation and other user interface design elements as well as additional, optional JavaScript extensions.

Emergence

Bootstrap originally emerged from the project to further develop Twitter's internal analysis and management tools. At that time, the company was using a wide variety of libraries for surface development, which led to inconsistencies and high maintenance costs. In order to meet these challenges, the focus of the project was expanded:

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

“[…] A very small group of developers and I sat down to design a new internal tool and saw the opportunity to make more of it. During the process, we realized that we were in the process of creating something that was much more far-reaching than just another internal tool. Months later, we had an early version of Bootstrap in our hands, which documented general design patterns and findings within the company. "

- Mark Otto : In his personal blog about the development of Bootstrap.

According to Otto, the idea of bringing designers and developers together plays an elementary role in the development: "From whiteboarding ideas to coding rough prototypes, collaborating across disciplines is what made Bootstrap successful for internal use at Twitter.", ("Vom Skizzieren From ideas to programming rough prototypes, it was the interdisciplinary collaboration that made Bootstrap so successful for internal use on Twitter ”).

The name Bootstrap is borrowed from the story of Hieronymus Carl Friedrich von Münchhausen , also known as "Baron Münchhausen", who, among other things, dished up the falsehood that he pulled himself out of a swamp by his own hair (strap) , instead of a hair Boots (boot) is used, which is also known as an English proverb. Since the bootstrap framework is the basis on which other parts of the website are built, the factual connection is established (see Bootstrapping_ (computer science) ).

Bootstrap was first used under real conditions on Twitter's first hackweek. Otto showed some colleagues how they can use the toolkit to accelerate the development of their projects. When the results were presented, it became clear that dozens of teams had used the framework. In this way, Bootstrap not only contributed to shortening the development time, but also to creating a uniform look and feel for the applications created during the Hackweek without the assistance of a dedicated designer.

In August 2011, Twitter decided to make the results available to the public as an open source project. Since then, Bootstrap has developed into a popular GitHub project with ≈50,000 forks , ≈105,000 likes and over ≈7,000 observers (as of March 2017).

properties

Bootstrap was developed with support for the then relatively new HTML5 and CSS 3 . Since Bootstrap from version 3 does not support Firefox 3.6 or Internet Explorer 7, version 2 will continue to be updated in a transition period. The concept of progressive improvement is used to ensure browser compatibility . This means that the basic information of the website or application is accessible to all devices and browsers, but advanced functionality is only available to the devices and browsers that support them. This becomes clear, for example, with the properties introduced in CSS 3 for rounded corners, color gradients and shadows. These are used intensively by Bootstrap despite the lack of support from older web browsers. The semantic use of HTML and the implementation of alternative style definitions in the stylesheets ensure that the information and functions of the website are available in older browsers despite the lack of functionality. The same applies to the JavaScript components supplied. These expand the functionality of the toolkit, but are not a prerequisite for its use.

Starting with version 2.0, Bootstrap also supports the design in terms of responsive web design . This means that the graphic structure of websites is dynamic and takes into account the properties of the device used (PC, tablet, mobile phone). Arranged elements are automatically adapted to the screen resolution or window size.

Bootstrap is offered as an open source library and made available on GitHub . Developers are invited to take part in the project and can make their own contributions on the platform.

Structure and functionality

Bootstrap has a modular structure and essentially consists of Less stylesheets, which contain the individual components of the framework. These individual components are brought together by a central bootstrap file. With this structure, the developer can decide for himself which components are used in his project by adapting the bootstrap file.

Adjustments are possible to a limited extent using a central configuration stylesheet. This includes information on the font and size, color or the structure of the grid layout. More profound changes are possible by overwriting the LESS declarations from Bootstrap.

From version 2.0, the configuration of Bootstrap is also possible via a special “Customize” option in the documentation. The developer uses a form to select the desired components and, if necessary, adjust the values of various options to suit his needs. The package created afterwards already contains the fully compiled CSS stylesheet.

Basic structure: grid system and responsive web design

Bootstrap is delivered as standard with a 940 pixel wide, twelve column grid layout. Alternatively, the designer can use a variable-width layout. For both cases, the toolkit offers four variations in terms of responsive web design , which serve different resolutions and device types: mobile phones, portrait and landscape tablets, and PCs with low and high ( widescreen ) resolution. The width of the columns automatically adapts to the available window width.

Using the configuration style sheet, the developer has the option of adapting the number and width of the columns, the distance between the columns and the overall width of the layout to suit his needs.

With Release 4, the grid system has been adapted to the CSS Flexbox system in order to adapt more flexibly to the existing window size: The basic principle of the twelve-column grid was retained in Bootstrap 4, and the responsive grid was refined to five viewport widths. While the grid in Bootstrap 3 was essentially still implemented with the CSS property float , which was never intended for complex layouts, the CSS layout standard Flexbox allows the definition and arrangement of flexible boxes in Bootstrap 4. From version 4, browsers are Internet Explorer 9 and lower no longer supported due to lack of Flexport implementation.

Basic CSS stylesheet

Bootstrap contains a number of stylesheets which contain basic style definitions for all major HTML components. These ensure a uniform, modern appearance for text formatting, tables and form elements across browsers and systems. The developer benefits from the experience gained in the development and design of Twitter and can fall back on tried and tested design decisions and proven design patterns for the front end design. Bootstrap 4 has been expanded to include a wide range of new utility classes that can be used to define frames, fillets, colors, dimensions, etc.

Reusable components

In addition to the regular HTML elements, Bootstrap contains other frequently used interface elements. These include buttons with extended functionality (e.g. grouping buttons or buttons with dropdown options), navigation elements (navigation lists and bars, horizontal and vertical tabs, breadcrumb navigation , pagination , etc.), labels, extended typographical options, miniature views, formatting for notification messages and progress bars .

JavaScript plugins

Bootstrap's JavaScript components are based on the JavaScript framework jQuery . The plugins contained in the toolkit are accordingly jQuery plugins. They offer additional user interface elements such as dialog windows , tooltips and carousels . They also expand the functionality of some of the existing interface elements, including an auto-complete function for input fields. With the release of the 5-alpha bootstrap version, the dependency on jQuery was abandoned.

Cards component

With Bootstrap 4, the cards component was introduced, which enables the integration of images, texts, lists, buttons and navigation bars in cards, the head and foot areas of which can be optically separated. With Flexbox, several cards can be placed next to each other at the same height. The unrelated cards of a deck of cards have the same as groups. The CSS property card-columns can be used to organize the cards in a similar way to content in the Pinterest app, but from top to bottom and from left to right.

use

To use Bootstrap in an HTML page, all you have to do is download a completed ZIP archive from the Bootstrap website. This archive already contains almost all the files required to be included in your own project, such as a stylesheet file with all components, a JavaScript file with all plugins and also a required icon font. Alternatively, there is a complete, much more extensive ZIP archive for developers to download from GitHub , which also contains examples of typical websites for convenient use as a source file and much more.

The files in the ZIP archive must be integrated into your own HTML document / project. If you also want to work with Javascript components, the Javascript file must also be referenced in the HTML document together with the jQuery library. If you want customized settings for style and Javascript functionality, you can change almost all of Bootstrap's elements on the website yourself and download a customized package. Finally, Bootstrap can also be compiled locally, depending on your needs, deviating from the standard.

The following example illustrates how it works. The HTML source code defines a simple search form and a list of results in the form of a table. The page consists of regular, semantically used HTML5 elements as well as some additional CSS class information according to the Bootstrap documentation.

<!DOCTYPE html>
<html>

  <head>
    <title>Bootstrap Beispiel</title>
    <meta charset="UTF-8">

    <!-- Einbinden des Bootstrap-Stylesheets -->
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- optional: Einbinden der jQuery-Bibliothek -->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

    <!-- optional: Einbinden der Bootstrap-JavaScript-Plugins -->
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
  </head>

  <body>
    <section class="container">
      <h1>Suche</h1>

      <p>Beispiel für ein einfaches Suchformular.</p>

      <!-- Suchformular mit Eingabefeld und 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>Ergebnisse</h2>

      <!-- Tabelle mit abwechselnder Zellenhintergrundfarbe und Außenrahmen -->
      <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>
    </section>
  </body>

</html>

Remarks

↑ A description of the Hackweek concept in the official Twitter blog
↑ The JavaScript components are not used in this example and are only referenced for the sake of completeness.

Web links

Commons : Bootstrap (Framework) - collection of images, videos and audio files

Bootstrap - the official website contains the documentation and download options
German documentation - an unofficial German translation of the bootstrap documentation
Bootstrap page at Github (English)
Twitter Bootstrap tutorial. Help to all elements in the W3C (English)

Individual evidence

↑ Release 4.5.2 . August 6, 2020 (accessed August 7, 2020).
↑ getbootstrap.com .
↑ ^a ^b Mark Otto: Bootstrap from Twitter. August 19, 2011, accessed August 17, 2015 .
↑ Mark Otto: Bootstrap in A List Apart # 342. January 17, 2012, accessed February 25, 2012 .
↑ ^a ^b Mark Otto: Building Twitter Bootstrap. January 17, 2012, accessed February 25, 2012 .
↑ pull oneself up by one's bootstraps - Wiktionary
↑ bootstrap
↑ ^a ^b Bootstrap, from Twitter. Retrieved February 25, 2012 (official project page on GitHub).
^ Mark Otto: Say hello to Bootstrap 2.0. January 31, 2012, archived from the original on February 3, 2012 ; accessed on February 25, 2012 (English).
↑ less / bootstrap.less at master from twitter / bootstrap. Retrieved September 12, 2014 (The bootstrap.less stylesheet in the Bootstrap repository on GitHub).
↑ ^a ^b less / variables.less at master from twitter / bootstrap. Retrieved February 25, 2012 (The variables.less stylesheet in the Bootstrap repository on GitHub).
↑ Customize and Download. Retrieved February 25, 2012 (The "Customize" option in the Bootstrap documentation).
^ Scaffolding. Retrieved February 25, 2012 (description of the grid system in the Bootstrap documentation).
↑ Flexbox. Retrieved on March 24, 2017 (description of the Flexbox system in the Mozilla Developer Network).
^ Base CSS. Retrieved February 25, 2012 (Description of Base CSS styling in the Bootstrap documentation).
↑ Alexander Neumann: Twitter releases the HTML5 framework Bootstrap 2.0. In: heise Developer. February 2, 2012, Retrieved February 25, 2012 .
↑ Dieter Petereit: Bootstrap: CSS- and HTML5-based WebApp-Toolkit from Twitter. In: t3n. August 23, 2011, accessed February 25, 2012 .
↑ Components. Retrieved February 25, 2012 (description of the additional components in the Bootstrap documentation).
↑ Javascript for Bootstrap. Retrieved January 14, 2013 (description of JavaScript components in Bootstrap documentation).
↑ jQuery and JavaScript. Retrieved June 16, 2020 (Bootstrap no longer uses jQuery).

[7] A description of the Hackweek concept in the official Twitter blog

[22] The JavaScript components are not used in this example and are only referenced for the sake of completeness.

[_1f7b4d1ac8b0397e-1] Release 4.5.2 . August 6, 2020 (accessed August 7, 2020).

[_aa5e4462259bd0ee-2] tbootstrap.com .

[Bootstrap_from_Twitter-3] Mark Otto: Bootstrap from Twitter. August 19, 2011, accessed August 17, 2015 .

[Bootstrap_in_A_List_Apart-4] Mark Otto: Bootstrap in A List Apart # 342. January 17, 2012, accessed February 25, 2012 .

[Building_Twitter_Bootstrap-5] Mark Otto: Building Twitter Bootstrap. January 17, 2012, accessed February 25, 2012 .

[6] ull oneself up by one's bootstraps - Wiktionary

[8] tstrap

[Bootstrap_Github-9] Bootstrap, from Twitter. Retrieved February 25, 2012 (official project page on GitHub).

[Say_hello_to_Bootstrap_2.0-10] Mark Otto: Say hello to Bootstrap 2.0. January 31, 2012, archived from the original on February 3, 2012 ; accessed on February 25, 2012 (English).

[11] less / bootstrap.less at master from twitter / bootstrap. Retrieved September 12, 2014 (The bootstrap.less stylesheet in the Bootstrap repository on GitHub).

[variables.less-12] less / variables.less at master from twitter / bootstrap. Retrieved February 25, 2012 (The variables.less stylesheet in the Bootstrap repository on GitHub).

[Customize-13] Customize and Download. Retrieved February 25, 2012 (The "Customize" option in the Bootstrap documentation).

[14] Scaffolding. Retrieved February 25, 2012 (description of the grid system in the Bootstrap documentation).

[15] Flexbox. Retrieved on March 24, 2017 (description of the Flexbox system in the Mozilla Developer Network).

[16] Base CSS. Retrieved February 25, 2012 (Description of Base CSS styling in the Bootstrap documentation).

[17] Alexander Neumann: Twitter releases the HTML5 framework Bootstrap 2.0. In: heise Developer. February 2, 2012, Retrieved February 25, 2012 .

[18] Dieter Petereit: Bootstrap: CSS- and HTML5-based WebApp-Toolkit from Twitter. In: t3n. August 23, 2011, accessed February 25, 2012 .

[19] Components. Retrieved February 25, 2012 (description of the additional components in the Bootstrap documentation).

[20] Javascript for Bootstrap. Retrieved January 14, 2013 (description of JavaScript components in Bootstrap documentation).

[21] jQuery and JavaScript. Retrieved June 16, 2020 (Bootstrap no longer uses jQuery).