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 :

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

download bootstrap

  1. When user clicks on Download Bootstrap then we have complete precompiled version of files.
  2. 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>