Tuesday, 24 October 2017

Setting up Bootstrap

Setting up bootstrap
To download bootstrap, navigate to getbootstrap.com and click on Download Bootstrap button.
They are three variations available for download.
1.       Compiled and minified version
2.       Source code version
3.       Sass version
Click download button on compile and minified version to get a single zip folder named bootstrap-3.3.7-dist.
Extract the Zip folder to get the 3 sub folders.
1.       CSS  folder
2.       Fonts  folder
3.       JS  folder

Contents inside CSS folder
 bootstrap.css: This is the core css for the bootstrap which defines all the styles for various controls and components
bootstrap.css.map: When debugging the minified code, the line numbers do not refer to the original file. The file which has the .map extensions is called as source map file fixes this problem by allowing the web debuggers to refer to the original context from where the code was generated. This file is useful during development.
bootstrap.min.css: It is the compressed version meaning white spaces, line breaks, comments and other extra characters have been removed. As a result, the size of the minified version is smaller than the non-minified file. Minified version is often used on a production server for efficient download whereas the non-minified version is used in development environment as it is more readable and easy to debug if there are issues.
bootstrap.min.css.map: It is the minified version of the bootstrap.css.map file.
bootstrap-theme.css: As the name suggests, it’s the theme for the bootstrap.  The theme file is optional and is usually used for efficiently enhanced experience like 3D effects, gradients, shadow, etc.
bootstrap-theme.css.map:  It’s  the source map file for bootstrap-theme.css .
bootstrap-theme.min.css: It’s  the minified version of the bootstrap-theme.css  file.
bootstrap-theme.min.css.map: It’s  the minified version of the bootstrap theme source map file.

Contents inside Fonts folder
The font’s folder got 5 different files from glyphicons. These files represent 5 different formats of the glyphicon fonts to support different browsers.
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2

Contents inside JS folder
 bootstrap.js
 bootstrap.min.js
npm.js: it’s the file from node.js and it is useful for npm installing bootstrap.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Template</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
</head>
<body>
    <h1 class="text-primary">Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>


Note: Viewport meta tag ensures proper rendering and touch zooming on a mobile device.