jjsub/Bootstrap

## Bootstrap
Lets get our hands dirty with Bootstrap!


1) Create a project folder with any name you wish.


2) Download bootstrap from www.getbootstrap.com or do a $ bower install bootstrap


3) Extract the - /css - /fonts - /js  files in to your bootstrap demo.


4) Create a index.html with this code in it:

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>My First Bootstrap Application</title>
 </head>
 <body>
 </body>
</html>

This is a simple HTML structure for our first Bootstrap app

Note: on your project directory should now have the index.html - /css - /font -/js


5) Now letʼs include Bootstrap inside our HTML file

  I. First, we need to include Bootstrapʼs - /CSS file Place the following inside the <head> tag and below the <title> tag:

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">


  II. Bootstrap requires jQuery for its JavaScript components to work. Go to http://jquery.com/ and download jQuery v.1

        Next jquery.js file, paste it into the /js folder of your projectdirectory.

        Link it into our index.html using the following code:

           <script src="js/jquery.js"></script>

          Note: It is recommended that you insert jQuery just inside the <body> tag instead of the <head> tag. This is so                   that jQuery is loaded after all the HTML contents are loaded, reducing the pageʼs loading time.

             Now we have to include Bootstrapʼs JavaScript file:

               <script src="js/bootstrap.js"></script>


6) To to make Bootstrap compatible with every kind of device, we need to include some necessary meta tags.

  I.  This tell  the browsers that our website contains characters from the Unicode character set

       <meta charset="utf-8">

  II. Using the following code snippet would force IE to use the latest rendering engine to render our website.

       <meta http-equiv="X-UA-Compatible" content="IE=edge">

   III.  Next, weʼll make our site consume all the space available inside the browser window, whether itʼs a tablet or a      mobile or even a desktop screen. We tell the browser to scale our application to the size of window space available

       <meta name="viewport" content="width=device-width, initial-scale=1">


How index.html should look like this:

<!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">

 <title>My First Bootstrap Application</title>

 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

 </head>

 <body>

 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.js"></script>

 </body>
</html>


Note: Add some scripts that will only be called into action when the Up, Close, and Personal with Bootstrap 13
www.it-ebooks.infowebsite is opened in IE8, bringing support for HTML5 and CSS3 in it. These scripts
are html5shiv.js and respond.js:

<!--[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.4.2/respond.min.js"></script>
 <![endif]-->


 Now add a <h1>Hello World!</h1> inside the body and we will be ready to go.
	Lets get our hands dirty with Bootstrap!


	1) Create a project folder with any name you wish.


	2) Download bootstrap from www.getbootstrap.com or do a $ bower install bootstrap


	3) Extract the - /css - /fonts - /js files in to your bootstrap demo.


	4) Create a index.html with this code in it:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>My First Bootstrap Application</title>
	</head>
	<body>
	</body>
	</html>

	This is a simple HTML structure for our first Bootstrap app

	Note: on your project directory should now have the index.html - /css - /font -/js


	5) Now letʼs include Bootstrap inside our HTML file

	I. First, we need to include Bootstrapʼs - /CSS file Place the following inside the <head> tag and below the <title> tag:

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">


	II. Bootstrap requires jQuery for its JavaScript components to work. Go to http://jquery.com/ and download jQuery v.1

	Next jquery.js file, paste it into the /js folder of your projectdirectory.

	Link it into our index.html using the following code:

	<script src="js/jquery.js"></script>

	Note: It is recommended that you insert jQuery just inside the <body> tag instead of the <head> tag. This is so that jQuery is loaded after all the HTML contents are loaded, reducing the pageʼs loading time.

	Now we have to include Bootstrapʼs JavaScript file:

	<script src="js/bootstrap.js"></script>


	6) To to make Bootstrap compatible with every kind of device, we need to include some necessary meta tags.

	I. This tell the browsers that our website contains characters from the Unicode character set

	<meta charset="utf-8">

	II. Using the following code snippet would force IE to use the latest rendering engine to render our website.

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	III. Next, weʼll make our site consume all the space available inside the browser window, whether itʼs a tablet or a mobile or even a desktop screen. We tell the browser to scale our application to the size of window space available

	<meta name="viewport" content="width=device-width, initial-scale=1">


	How index.html should look like this:

	<!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">

	<title>My First Bootstrap Application</title>

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

	</head>

	<body>

	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>

	</body>
	</html>



	Note: Add some scripts that will only be called into action when the Up, Close, and Personal with Bootstrap 13
	www.it-ebooks.infowebsite is opened in IE8, bringing support for HTML5 and CSS3 in it. These scripts
	are html5shiv.js and respond.js:

	<!--[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.4.2/respond.min.js"></script>
	<![endif]-->


	Now add a <h1>Hello World!</h1> inside the body and we will be ready to go.