在网页中我们最常见的就是导航条结构，如果我们需要用HTML、CSS、JS来搭建导航条结构，代码会非常的多，而且结构复杂，还要完善其中一个个的小细节，而使用Bootstrap来搭建，能快速而简单的达到需要的效果，以下我们来见识以下bootstrap的威力，请看以下代码：

<!--导航条-->
<!--第一步：导航标签，声明导航类、导航类样式-->
<nav class="navbar navbar-default">
  <!--第二步：所有内容用一个容器包裹-->
  <div class="container-fluid">
    <!--第三步：声明头部部分-->
      <div class="navbar-header">
      <!--第五步：导航条头部内有导航品牌：一般为图标-->
        <a href="#" class="navbar-brand">自学无敌</a>
      </div>
    <!--第四步：导航条主体部分用一个div包裹-->
    <div>
    <!--第六步：导航条主体部分由ul-li结果组成，且声明为导航条-->
      <ul class="nav navbar-nav">
        <li class="active"><!--active为默认选中-->
          <a href="javascript:void(0)">导航1</a>
        </li>
        <li>
          <a href="javascript:void(0)">导航2</a>
        </li>
        <li>
          <a href="javascript:void(0)">导航3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>