Getting Started with Bootstrap
It is easy to get started with Bootstrap. This section explains how to download and setup the Bootstrap. The first thing is to download required files.
We can download latest version of Bootstrap from the link: getbootstrap.com/ and download the latest archived files. There are three types of downloads available for Bootstrap;
- Download Bootstrap
- Download Source
- Download Sass
as shown in the following picture:
- Download Bootstrap: Click on Download Bootstrap link, Once download is complete, unzip the file and we will get a folder named simply “bootstrap” which includes compiled CSS and JS and minified CSS and JS and fonts from glyphicons are included and they will have the following file structure:
- Download Source: Click on Download Bootstrap Source link, Once download is complete, unzip the file and we will get less, js and fonts files which source code for Bootstrap CSS, JS and fonts respectively. The docs folder contains assets, layouts, data, examples etc which are useful for Bootstrap documentation. The dist folder includes js, fonts and css which are defined in the download section above. It has following file structure as shown below:
- Download Sass: It is Sass powered version of Bootstrap. Sass is stable, powerful CSS extension language which is compatible with all versions of CSS. Bootstrap is ported from Less to Sass which provides support for Rails, Compass or Sass only projects.
Developers can access Bootstrap CDN’s complete CSS with the following:
<link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”> <link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css”>
Here is a simple example for how to import the bootstrap for your project. This example doesn’t implement any other logic, but just shows how to start using the bootstrap.
<!DOCTYPE html> <head> <title>Bootstrap Basic Example</title> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <h2>Hello...Welcome to Bootstrap!!!</h2> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- As shown in above code, we have used meta tag which provides information of data. It will not be display on the page, but will be machine parsable. The meta tag always goes inside head tag. It contains attributes such as name which defines name for the metadata, content which gives value associated with name attribute which in turn contains device-width property to set width of the device screen and initial-scale attribute describes the initial zoom when visiting the page. 1.0 does not zoom.
- The next line contains CDN link <strong>bootstrap.min.css</strong> which provides support for Bootstrap’s CSS.
Responsive Design using Bootstrap
When we use the word “Responsive” in the context of website, first thing comes to our mind that it should be compatible with all kinds and sizes of the devices. It has become an essential technique in which every web designer must be conversant with. The responsive design is a concept which leads to design a website or app in such a way that the same design can be rendered across various devices of different screens and provides the users with the best possible user experience.
It provides functional built in components which are easy to customize and also provides web based customization. The Bootstrap’s responsive design adjusts to Desktops Tablets and mobiles. There is demand to make every web site responsive for better readability of the online contents in different environments.
Bootstrap is supported by all popular browsers. The following list shows on which platforms browsers supports the Bootstrap.
- Windows: Google Chrome, Mozilla Firefox, Internet Explorer, Opera and Safari.
- Mac OS: Google Chrome, Mozilla Firefox, Opera and Safari.
- iOS: Google Chrome, Safari.
- Android: Google Chrome.