Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Twitter Bootstrap 101: The Navbar

by
This post is part of a series called Twitter Bootstrap 101.
Twitter Bootstrap 101: Introducing 2.0
Twitter Bootstrap 101: Tabs and Pills

One of the great features of Twitter Bootstrap 2.0 is its excellent responsive navbar. In this brief tutorial, we'll tackle a number of things including the navbar documentation, updating our sample files and looking at the necessary JavaScript.

In these screencasts we'll cover the following:

  • We'll check out some recent updates to Twitter Bootstrap's online documentation -- I recommend following the Changelog, which is updated frequently!
  • We'll unpack the sample files and go to work on the navbar markup, adding a dropdown nav and search field.
  • We'll setup the JavaScript that's needed for the dropdown and the collapsing responsive navbar.
  • Finally, in the sample files I've included some notes and examples you may find helpful for customizing the navbar to fit alternative layouts, including a full-width static navbar (not fixed to the top), and a navbar that's constrained to the width of your site contents.

Navbar Documentation

Following the documentation is turning out to be pretty important, as it is updated frequently. In this case, recent updates have impacted some of the examples I've provided in our sample files.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Navbar Markup

Let's unpack the sample files and go to work on the navbar markup, adding a dropdown nav, floating it right, and adding a search field.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!


Navbar JavaScript

The dropdowns and collapsible responsive menu don't work without the JavaScript, so let's set that up!

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Links and Downloads

Have fun!

Advertisement