Bootstrap Tutorial v3 (Part 1)

Mar 14, 2013 by eaw in Responsive

Make a Responsive Website quickly and easily

1. Download Bootstrap

http://getbootstrap.com/getting-started/

Click on “Download Bootstrap” button (The first button of the three)
Unzip file

Note that there are three folders:

css
fonts
js

2. Create Basic Template

http://getbootstrap.com/getting-started/#template

Copy code from the above page and paste it into a new HTML page.
Save page as index.html and save to your folder with the css, fonts, and js folders

3. Note that the Basic Template includes the following:

Viewport meta tag

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

This tells the browser to set the viewport to the width of the device with an initial scale of 1.

Link to Bootstrap CSS file

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

HTML shiv

HTML shim for IE – Enables styling of HTML5 elements in versions of Internet Explorer prior to version 9

Add after links to CSS

 <!-- 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/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

Link to jQuery library

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>

4. Voilà! Here it is.

The file should look like this code below.

<!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>Bootstrap 101 Template</title>

 <!-- 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/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1>Hello, world!</h1>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Tagged with: bootstrap

4 thoughts on “Bootstrap Tutorial v3 (Part 1)”

Mark Schmetzer says:
Dec 05, 2013

Hello, the Download Bootstrap link is not correct. Do you have the new link to download the file for Dreamweaver?

Thanks!

1. jamie says:
  Dec 05, 2013
  
  Thanks for the heads up! I changed the link so it is correct now.
  
  1. Mark Schmetzer says:
    Dec 05, 2013
    
    Thank you!
    
sriproperty.net says:
Jan 18, 2014

Nice Article,

Clear and to the point.