Advertisement
HTML/CSS

Twitter Bootstrap 101: The Navbar

by

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!

Related Posts
  • Web Design
    CMS
    Adding a Twitter Timeline to a Tumblr ThemeTumblr 28 retina
    Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter timeline into our theme; a slightly more complex process since Twitter updated their API to v1.1.Read More…
  • Web Design
    CMS
    Adding Media Queries to Our Tumblr ThemeTumblr 18 retina
    In this video, we'll be rounding off our responsive CSS by adding some Media Queries. We'll be talking about defensive coding, being sure that we make allowances for various usage scenarios, such as unusually long blog titles.Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    Creating the Tumblr Post Footer and Notes Tumblr 12 retina
    Let's kick off this tutorial by reviewing the Tumblr theme markup we've built already. Once that's done, we can continue by sorting out the footer and "Post Notes".Read More…
  • Web Design
    CMS
    Tumblr Theme Operators and VariablesTumblr 3 retina
    In this tutorial we'll be taking a detailed look at how Tumblr's theme operators and variables slot content into your theme markup.Read More…
  • Web Design
    CMS
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…