Bootstrap (front-end framework)

From Wikipedia, the free encyclopedia
  (Redirected from Bootstrap (framework))
Jump to: navigation, search
Bootstrap (front-end framework)
Boostrap logo.svg
Original author(s) Mark Otto, Jacob Thornton
Developer(s) Bootstrap Core Team
Initial release August 19, 2011; 5 years ago (2011-08-19)
Stable release
3.3.7 / July 25, 2016; 3 months ago (2016-07-25)[1]
Preview release
4.0.0-alpha.5 / October 19, 2016; 20 days ago (2016-10-19)
Repository github.com/twbs/bootstrap
Written in HTML, CSS, Less, Sass and JavaScript
Platform Web engines
Type HTML and CSS-based design templates
License MIT License (Apache License 2.0 prior to 3.1.0)
Website getbootstrap.com

Bootstrap is a free and open-source front-end web framework for designing 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. Unlike many web frameworks, it concerns itself with front-end development only.

Bootstrap is the second most-starred project on GitHub, with more than 100,000 stars and 45,000 forks.[2]

Origin[edit]

Bootstrap, originally named Twitter Blueprint, 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."[3]

After a few months of development by a small group, many developers at Twitter began to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter development team. It was renamed from Twitter Blueprint to Bootstrap, and released as an open source project on August 19, 2011.[4] It has continued to be maintained by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.[5]

On January 31, 2012, Bootstrap 2 was announced. This release added the twelve-column grid layout and responsive design components, as well as changes to many of the existing components.[6] The Bootstrap 3 release was announced on 19 August 2013, moving to a mobile first approach and using a flat design.[7]

On October 29, 2014, Mark Otto announced Bootstrap 4 was in development.[8] The first alpha version of Bootstrap 4 was deployed on August 19, 2015.[9]

Features[edit]

Bootstrap is compatible with the latest versions of the Google Chrome, Firefox, Internet Explorer, Opera, and Safari browsers, although some of these browsers are not supported on all platforms.[10]

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.

The version 4.0 alpha release added Sass and Flexbox support.[11]

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

Structure and function[edit]

Example of a webpage using Bootstrap framework
Example of a webpage using Bootstrap framework rendered in Mozilla Firefox

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 projects.

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

The use of the Less stylesheet language allows the use of variables, functions and operators, nested selectors, as well as 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.

As of Bootstrap 4, Sass will be used for stylesheets instead of Less.

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.

Stylesheets[edit]

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[edit]

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[edit]

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.

Bootstrap 4[edit]

In 2015 Bootstrap developers have announced that they were working on new framework version with multiple updates:[13]

  • Changed syntax from Less to Sass. Faster compilation for Bootstrap thanks to Libsass and Sass-syntax.
  • Updated grid system. New semantic mixins and targeting on mobile devices.
  • flexbox support. More responsive elements' support thanks to flexbox from HTML5.
  • Abandoned wells, thumbnails and panels. They are replaced with "Cards" element.
  • All HTML resets moved to Reboot module.
  • Customization. Since version 4 it's easier to customize styles for templates, since all options are stored in Sass variables. After compiling a file developer gets an updated CSS-file.
  • Closed IE8 support. Developers who need IE8 support should continue using Bootstrap 3.
  • Moved from pixels to rem and em units.
  • Rewrote all JS plugins.
  • Improved work of tooltips and popovers.
  • Improved search and documentation.

See also[edit]

References[edit]

  1. ^ "Bootstrap 3.3.7 Released". Retrieved 30 July 2016. 
  2. ^ "Search · stars:>1". GitHub. Retrieved 14 December 2015. 
  3. ^ Otto, Mark (17 January 2012). "Bootstrap in A List Apart No. 342". Mark Otto. 
  4. ^ Otto, Mark (19 August 2011). "Bootstrap from Twitter". Developer Blog. Twitter. 
  5. ^ "About". Bootstrap. 
  6. ^ Otto, Mark (31 January 2012). "Say hello to Bootstrap 2.0". Developer Blog. Twitter. 
  7. ^ "Bootstrap 3 released". The Official Bootstrap Blog. 19 August 2013. 
  8. ^ Otto, Mark. "Bootstrap 3.3.0 released". Bootstrap Blog. Retrieved 21 August 2015. 
  9. ^ Otto, Mark. "Bootstrap 4 alpha". Bootstrap Blog. Retrieved 20 August 2015. 
  10. ^ "Supported browsers". Bootstrap. 
  11. ^ "Bootstrap 4 alpha". Bootstrap. 
  12. ^ "Bootstrap GitHub Repository". twbs/bootstrap. 
  13. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Bootstrap". v4-alpha.getbootstrap.com. Retrieved 2016-10-27. 

External links[edit]

Retrieved from "https://en.wikipedia.org/w/index.php?title=Bootstrap_(front-end_framework)&oldid=748446752"