Question

I’m a newbie with HTML5 and Twitter Bootstrap, but – since I’ve been looking at some of the pre-built examples – I have a few questions…

Let’s take this piece of code as an example (from the Fluid Layout Example ):

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <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="#">Project name</a>
      <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Username
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Could somebody tell me :

• What’s the significance of those data-toggle and data-target parameters?
• What’s the point of these 3 empty icon-bar span instances (or the empty caret span, for that matter) ?

Answer 1

The documentation explains that those empty <i></i> tags create icons. It’s a similar story with the empty spans. They have styling associated with that particular class name which turn them into lovely things you can use. If you removed the class, they would just be empty, meaningless elements.

The data-toggle="dropdown" part is involved with turning that element into a dropdown menu, which is an optional Bootstrap javascript plugin.

The idea behind Bootstrap is to give you a whole bunch of elegant styling and functionality without having to do all the work yourself. Kudos to Mark Otto and Jacob Thornton for doing such a splendid job.