Stefan Seelmann

Twitter Bootstrap

This page describes how to use Twitter Boostrap to prettify a website.

Resources to include

Use resources hosted at twitter.github.com

Add the following markup into the <html><head> section:

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style>
  body { padding-top: 60px; }
</style>

To active responsive design additionally add the following markup:

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>

Advantage:

Disadvantage:

Self-host resources

Download latest version of Twitter Bootstrap:

$ wget http://twitter.github.com/bootstrap/assets/bootstrap.zip

Extract minimized versions of bootstrap.min.css, bootstrap-responsive.min.css and bootrap.min.js and add the version number to the files.

Also download the latest version of jQuery:

$ wget http://code.jquery.com/jquery-1.7.2.min.js

Then add the following markup into the <html><head> section:

<link href="/path/to/bootstrap-2.0.2.min.css" rel="stylesheet">
<style>
  body { padding-top: 60px; }
</style>

To active responsive design additionally add the following markup:

<link href="/path/to/bootstrap-responsive-2.0.2.min.css" rel="stylesheet">
<script src="/path/to/jquery-1.7.2.min.js"></script>
<script src="/path/to/bootstrap-2.0.2.min.js"></script>

Markup

<nav class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">Example.com</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li><a href="/about">About/a></li>
          ...
        </ul>
      </div>
    </div>
  </div>

Content

<article class="container">
  ...
</article>

or

<div class="container">
  ...
</div>

Sources: