Learn Bootstrap from here
WHAT YOU SHOULD ALREADY KNOW
Before you continue you should have a basic understanding of the following:
If you want to study these subjects first, find the tutorials on our Home page.
WHAT IS BOOTSTRAP?
- Bootstrap is a free collection of tools for creating websites and web applications
- Bootstrap contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components
- Bootstrap is open source and 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.
Bootstrap was released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub!
WHY USE 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
|What is Responsive Web Design?
Responsive web design is to create web sites which adjust and align themselves according to what media tool you use for viewing it.
WHAT DOES 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
- Customizable Components : Customize Bootstrap’s components, LESS variables, and jQuery plugins to create your own version
THE HTML FILE
Since Bootstrap uses HTML elements and CSS properties that require the use of the HTML5 doctype, include the HTML5 doctype at the beginning of the page, along with the correct character set:
Keep in mind that Bootstrap 3 is mobile-first. Mobile-first styles are found throughout the entire Bootstrap library instead of in separate files.
To ensure proper rendering and touch zooming, also add the viewport meta tag inside the <head> element:
The width=device-width sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 sets the initial zoom level when the page is first loaded by the browser.
ADDING BOOTSTRAP TO YOUR WEB PAGES
There are two ways of starting to use Bootstrap on your own web site.
- Download Bootstrap from getbootstrap.com
- Include Bootstrap from a CDN, like MaxCDN
If you want to download Bootstrap, go to getbootstrap.com, and follow the instructions there.
If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
<link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<!– Optional: Include the jQuery library –>
|One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
PUT YOUR HTML ELEMENTS INSIDE CONTAINERS
Bootstrap also requires a containing element to wrap site contents.
There are two containers to choose from:
1. Use the .container class for a responsive fixed width container:
2. Use the .container-fluid class for a full width container, spanning the entire width of the viewport:
BOOTSTRAP BROWSER/DEVICE SUPPORT
Bootstrap works best in the latest desktop and mobile browsers.
Older browsers might display different renderings (though fully functional) of certain elements/components.
Bootstrap supports the latest versions of the following browsers and platforms:
|Android||YES||YES||Not available||NO||Not available|
|iOS||YES||Not available||Not available||NO||YES|
|Mac OS X||YES||YES||Not available||YES||YES|
* Bootstrap supports Internet Explorer 8 and higher.