Bootstrap is a free and open-source front-end web framework for designing websites and web applications . It contains HTML – and CSS -based templates for typography , forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.

Bootstrap is the second most-starred project on GitHub , with more than 111,600 stars and 51,500 forks. [3]

Origins

Bootstrap, originally named Twitter Blueprint, 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 think we have a lot to do with it.” up with an early version of Bootstrap as a document and share common design patterns and assets within the company. ” [4]

Hack Week has a hackathon -style week for the Twitter development team. It was renamed from Twitter Blueprints to Bootstrap, and released as an open source project on August 19, 2011. [5] Mark Otto, Jacob Thornton, and a small group of core developers large community of contributors. [6]

On January 31, 2012, Bootstrap 2 was released, which added a twelve-column responsive grid layout system, inbuilt support for Glyphicons, several new components, and many changes to many of the existing components. [7]

On August 19, 2013, Bootstrap 3 was released, which redesigned components to use flat design , and a mobile first approach. [8]

On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development. [9] The first alpha version of Bootstrap 4 was released on August 19, 2015. [10] The first beta version was released on August 10, 2017. [11]

Features

Bootstrap 3 supports the latest versions of the Google Chrome , Firefox , Internet Explorer , Opera , and Safari (except on Windows). It also supports back to IE8 and the latest Firefox Extended Support Release (ESR). [12]

Since 2.0, Bootstrap 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.

The release 4.0 release release Sass and flexbox support. [10]

Structure and function

Example of a webpage using Bootstrap framework rendered in Mozilla Firefox

Bootstrap is modular and consists of a series of stylesheets that implement the various components of the toolkit. These stylesheets are generally included in a bundle and included in web pages. Bootstrap provides a number of configurations that control various types of hardware.

Since Bootstrap 2, the Bootstrap has a customization of a customized version of Bootstrap based on the requested components and various settings.

As of Bootstrap 4, Sass is used instead of Less for the stylesheets.

Each Bootstrap component consists of an HTML structure, CSS declarations, and some supporting JavaScript code.

Grid system and responsive design comes with 1170 pixel wide grid layout . Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has several variations of mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

Stylesheets

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.

Re-usable components

In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. The components are implemented as CSS classes, which must be applied to certain HTML elements in a page.

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, for example an auto-complete function for input fields. In version 1.3 [13] , the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.

Bootstrap 4

On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development. [9] On September 6, 2016, Mark suspended work on Bootstrap. Bootstrap 4. Over 4,000 commits have been made to the Bootstrap 4 codebase so far.

Bootstrap 4 is a complete rewrite from Bootstrap 3. Significant changes include:

  • Switched from Less to Sass .
  • Dropped IE8 , IE9 , and iOS 6 support.
  • Added flexbox support and then dropped non- flexbox support.
  • Switched from pixels to root ems .
  • Increased global font-size from 14px to 16px.
  • Dropped the panel, thumbnail, and more
  • Dropped the Glyphicons icon font.
  • Dropped the pager component.
  • Rewrote almost all components, jQuery plugins and documentation.

See also

  • CSS framework
  • Responsive web design
  • Web design

References

  1. Jump up^ Rebert, Chris (July 25, 2016). “Bootstrap 3.3.7 released” . Archivedfrom the original on November 23, 2016 . Retrieved February 23, 2017 .
  2. Jump up^ Otto, Mark (2017-10-19). “Bootstrap 4 Beta 2” . Retrieved 2017-10-30 .
  3. Jump up^ “Search · stars:> 1” . GitHub . Retrieved February 23, 2017 .
  4. Jump up^ Otto, Mark (January 17, 2012). “Bootstrap in A List Apart No. 342” . Mark Otto’s blog . Archived from the original on October 28, 2016 . Retrieved February 23, 2017 .
  5. Jump up^ Otto, Mark (August 19, 2011). “Bootstrap from Twitter” . Developer Blog . Twitter. Archived from the original on February 23, 2017 . Retrieved February 23, 2017 .
  6. Jump up^ “About” . Bootstrap . Retrieved February 23, 2017 .
  7. Jump up^ Otto, Mark (January 31, 2012). “Say hello to Bootstrap 2.0” . Developer Blog . Twitter. Archived from the original on February 23, 2017 . Retrieved February 23, 2017 .
  8. Jump up^ Otto, Mark (August 19, 2013). “Bootstrap 3 released” . Archived from the original on October 23, 2016 . Retrieved February 23, 2017 .
  9. ^ Jump up to:b Otto, Mark (October 29, 2014). “Bootstrap 3.3.0 released” . Archived from the original on July 24, 2016 . Retrieved February 23, 2017 .
  10. ^ Jump up to:b Otto, Mark (August 19, 2015). “Bootstrap 4 alpha” . Archived from the original on January 23, 2017 . Retrieved February 23, 2017 .
  11. Jump up^ Otto, Mark; Thornton, Jacob (2017-08-10). “Bootstrap 4 Beta” . Retrieved 2017-08-16 .
  12. Jump up^ “Supported browsers” . Bootstrap . Retrieved February 23, 2017 .
  13. Jump up^ “Bootstrap, from Twitter 1.3.0 Documentation – BootstrapDocs” . bootstrapdocs.com . Retrieved 2017-10-22 .