Bootstrap

From HaFrWiki42
Revision as of 10:45, 4 December 2014 by Hjmf (talk | contribs) (→‎Usage)
Jump to navigation Jump to search

Bootstrap is a collection/framework of different tools having the properties/attributes:

  • A free collection of tools for creating websites and web applications
  • Contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components
  • Contains optional JavaScript extensions
  • Is open source
  • Available on GitHub

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.

Benefits of the usage of Bootstrap?

  • Mobile-first approach: Since Bootstrap 3, the framework consists of mobile-first styles throughout the entire library
  • Browser support: Bootstrap is supported by all popular browsers
  • Responsive web design: Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobile phones
  • Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap

Bootstrap include:

  • Scaffolding: Contains layout, grid system, fluid grid system, and responsive design
  • Base CSS: Contains classes for typography, tables, forms, buttons, images, and more
  • Components: Contains reusable components: icons, dropdowns, navbars, breadcrumbs, alerts, and more
  • JavaScript Plugins: Contains over a dozen custom jQuery plugins. You can include them all, or one by one
  • Customizable Components: Customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version

Base assumptions =

Keep in mind that Bootstrap 3 is mobile-first!
The code for Bootstrap starts by targeting smaller screens like mobile devices and tablets, and then "expands" components and grids for larger screens.

Usage

Two methods for the usage of Bootstrap:

  1. Download Bootstrap from the Bootstrap Website http://getbootstrap.com.
  2. Include Bootstrap from a Content Delivery Network (CDN), like MaxCDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

See also

top

Reference

top