Twitter Bootstrap 101: The Navbar

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.

David Cochran is Associate Professor of Communication at Oklahoma Wesleyan University. He and his students have designed and manage a number of websites, including DeclaringAmerica.com, OKWUeagle.com, and aLittleCode.com.