Bootstrap: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
| Line 1: | Line 1: | ||
{{TOCright}} | {{TOCright}} | ||
Bootstrap | '''Bootstrap''' is a collection/framework of different tools having the properties/attributes: | ||
* A free collection of tools for creating websites and web applications | * 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 HTML and CSS-based design templates for text, forms, buttons, navigation and other components | ||
| Line 22: | Line 22: | ||
* '''JavaScript Plugins''': Contains over a dozen custom jQuery plugins. You can include them all, or one by one | * '''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 | * '''Customizable Components''': Customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version | ||
== Usage == | |||
Two methods for the usage of Bootstrap: | |||
# Download Bootstrap from the Bootstrap Website http://getbootstrap.com. | |||
# Include Bootstrap from a Content Delivery Network (CDN), like MaxCDN | |||
<pre> | |||
<!-- 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> | |||
</pre> | |||
== See also == | == See also == | ||
Revision as of 10:39, 4 December 2014
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
Usage
Two methods for the usage of Bootstrap:
- Download Bootstrap from the Bootstrap Website http://getbootstrap.com.
- 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>