Table of Content

Bootstrap Introduction
Bootstrap Setting up

Bootstrap with CSS

Bootstrap Setting up

It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup Bootstrap. It will also discuss the Bootstrap file structure, and demonstrate its usage with an example

Downloading Bootstrap :

We need to download latest version of Bootstrap from http://getbootstrap.com/. You will see following window -

When user clicks on Download Bootstrap then we have complete precompiled version of files.
If user selects Bootstrap source then we need to compile then manually.

Download Method	Download Bootstrap	Download Source
What you get ?	CSS and JS with fonts	Latest Bootstrap LESS and JS
Precompiled Files	Yes	No
Minified Files	Yes	No

Precompile Bootstrap :

If you download the compiled version of the bootstrap then we will get following directory structure.

bootstrap/
+-- css/
¦   +-- bootstrap.css
¦   +-- bootstrap.min.css
¦   +-- bootstrap-theme.css
¦   +-- bootstrap-theme.min.css
+-- js/
¦   +-- bootstrap.js
¦   +-- bootstrap.min.js
+-- fonts/
    +-- glyphicons-halflings-regular.eot
    +-- glyphicons-halflings-regular.svg
    +-- glyphicons-halflings-regular.ttf
    +-- glyphicons-halflings-regular.woff

Bootstrap Source :

If we download the complete source code then we will have following directory structure.

bootstrap/
+-- less/
+-- js/
+-- fonts/
+-- dist/
¦   +-- css/
¦   +-- js/
¦   +-- fonts/
+-- docs-assets/
+-- examples/
+-- *.html

Bootstrap Basic template :

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, 
			initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5
			elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if 
			you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/
		html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/
		respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <h1>Hello, world!</h1>
    <!-- jQuery (for Bootstrap's JS plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or 
	include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>