Waterfall

Introduction to Twitter Bootstrap

In this session we will build a responsive webpage using the Twitter Bootstrap Framework. Let’s take a look at the finished project so we have something to work towards.

EAST Project Demo Site

Getting Started

  1. Download the Project Resources 
  2. Extract the file to a folder on your desktop

What’s Inside?

  bootstrap/
  ├── css/
  │   ├── style.css (Contains All of your Custom Styles)
  │   ├── bootstrap.min.css (Adds Bootstrap CSS)
  │   ├── bootstrap-responsive.css (Adds Bootstrap Responsive CSS)
  ├── js/
  │   ├── scripts.js (Your Custom JavaScript)
  │   ├── bootstrap.min.js (Bootstrap Javascript)
  │   ├── jquery-1.9.1.main.js (Current Jquery)
  │   ├── html5shiv.js (Adds HTML5 Support for Older Browsers)
  └── img/ 
      ├── hero-mars.jpg (Main Header Image)
      ├── reentry.jpg
      ├── team.jpg
      ├── rover.jpg
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Adding the Bootstrap Resources to your Page

  1. Open Dreamweaver and browse to and open the index.html file.
  2. We need to view the source code of the document so click Code button in the top left of the document window. This is the html that you should use whenever you start a project using Bootstrap. Let’s look through this line by line so we can learn a bit more about how it works.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>EAST Conference 2013</title>

    <!-- The Viewport Metatag allows the page to scale properly to fit a mobile device -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This text should describe the purpose of the site">
    <meta name="author" content="EAST Student Name">

    <!-- Stylesheets - The order of these files is important -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- This allows us to load in fonts's that might not be on the system of the user. -->
    <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->

    <!-- Favicon and touch icons for different device types -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="images/ico/favicon.png">
</head>

  <body>

    <!-- JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery-1.9.1.min.js"></script>
    <!-- If you prefer to use a CDN for Jquery Delete the line above and remove the comment from the line below -->
    <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>--> 
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>

  </body>
</html>

Now that we have all of the behind the scenes work out of the way let’s take a look at few of the elements we hope to implement in our design. Go to the next module…Using  Bootstrap Components.