Bootstrap Notes
Twitter Bootstrap Home

Setup Notes

PLEASE NOTE: The examples given here depend upon and cannot replace Twitter Bootstrap's own excellent documentation.

Page contents:

Sample Document Head

Based on Twitter Bootstrap's examples, online here, with occasional variations based on the also-excellent HTML5 Boilerplate.

Note the CSS sequence

This CSS configuration is needed to make the nav work responsively:

  1. bootstrap.css, followed by ...
  2. embedded styles for navbar-top-fixed
  3. followed by bootstrap-responsive.css

This is noted in Bootstrap 2.0's documentation under "Fixed navbar."

A possible alternative approach is noted below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample Site</title>
    
  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">

  <!-- Styles -->
  <link href="css/bootstrap.css" rel="stylesheet">
  <style>
    body {
    padding-top: 60px; /* When using the navbar-top-fixed */
    }
  </style>
  <link href="css/bootstrap-responsive.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
    <!-- OR remove these lines and place icons directly
        in the site root folder mathiasbynens.be/notes/touch-icons -->
  <link rel="shortcut icon" href="img/favicon.ico">
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

</head>

Alternate CSS Option

If your workflow includes inlining and minifying your CSS before publication, you might choose to use CSS imports to pull bootstrap.css and bootstrap-responsive.css into a single stylesheet, then add your own custom styles.

In the Markup

Link to a single parent CSS file.

<!-- Main stylesheet imports bootstrap css and adds custom -->
<link href="css/style.css" rel="stylesheet">

Main Stylesheet

Import bootstrap stylesheets, and then adjust for the navbar-top-fixed, if needed.

/* Main Stylesheet */
/* Import Bootstrap styles and Responsive styles */
@import url('bootstrap.css');
@import url('bootstrap-responsive.css');

/* Add top padding for navbar-top-fixed */
body {
  padding-top: 60px;
  padding-bottom: 40px;
  }
/* Remove top padding when top navbar goes static in narrow viewports */
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
}

JavaScript Setup

Link up your JavaScript files at the bottom of the document, just before the closing body tag.

This example includes:

  • jQuery from Google API with local fallback, a la the HTML5 Boilerplate
  • Twitter Bootstrap's entire compiled and minified plugin bundle.
  • An example of an additional plugin: Google Prettify for code prettifying (used in this sample site).
  • Sample lines used to initialize scripts in this page.
<!-- Link jQuery via Google + local fallback, see h5bp.com -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<!-- Bootstrap JS, the minified bundle -->
<script src="js/bootstrap.min.js"></script>

<!-- Sample Plugin: Prettify -->
<script src="js/prettify/prettify.js"></script>

<!-- If needed, initialize scripts on this page -->
<script>

  // Activate Google Prettify for pretty-printing code
  addEventListener('load', prettyPrint, false);

  $(document).ready(function(){

    // Add prettyprint class to pre elements
    $('pre').addClass('prettyprint');

    // Initialize tabs and pills
    $('.note-tabs').tab();
		
  });
</script>
</body>
</html>