HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)
34 - Bootstrap
Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Bootstrap is a free front-end framework for faster and easier web development.
Bootstrap also gives you the ability to easily create responsive designs.
There are two ways to start using Bootstrap on your own web site.
If you want to download and host Bootstrap yourself, 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).
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part 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 part sets the initial zoom level when the page is first loaded by the browser.
Bootstrap also requires a containing element to wrap site contents.
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire width of the viewport
In the next chapter, you will see how we will use bootstrap in our application.