<div class="navbar navbar-default" role="navigation">  
  <div class="navbar-header">       
   <a href="##" class="navbar-brand">慕课网</a>   
  </div>   
  <ul class="nav navbar-nav">       
    <li><a href="##">网站首页</a></li>       
    <li class="active"><a href="##">名师介绍</a></li>       
    <li><a href="##">成功案例</a></li>        
    <li class="dropdown">           
       <a href="##" class="dropdown-toggle" data-toggle="dropdown">
       关于我们<span class="caret"></span></a>         
       <ul class="dropdown-menu">              
        <li><a href="##">公司简介</a></li>              
        <li><a href="##">企业文化</a></li>             
        <li><a href="##">组织结构</a></li>           
        <li><a href="##">客服服务</a></li>            
       </ul>       
     </li>    
  </ul>     
</div>

为导航条添加标题、二级菜单及状态

面包屑式导航

使用方式就很简单，为ol加入breadcrumb类：

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

导航加下拉菜单（二级导航）

Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul

自适应导航

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用

胶囊型导航

只需要把类名“nav-tabs”换成“nav-pills

导航（标签形tab导航)

标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名

<ul class="nav nav-tabs">

为当前选中项，只需要在其标签上添加类名“class="active"”

导航

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类

按钮的向下向上三角形

按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">

<span class="caret"></span>

</button>

下拉菜单会向上弹起（接下来一个小节会介绍），这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名

<div class="btn-group dropup"》

按钮（等分按钮）

等分按钮的效果在移动端上特别的实用.

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

例子

<div class="btn-wrap">

<div class="btn-group btn-group-justified">

按钮（垂直分组）

只需要把水平分组的“btn-group”类名换成“btn-group-vertical”

按钮（嵌套分组）
实现类似于导航菜单的效果，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级

<div class="btn-group">

    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">

<span class="caret"></span>

</button>

</div>

利用按钮嵌套分组

<div class="btn-group">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>   <ul class="dropdown-menu">
         <li><a href="##">公司简介</a></li>
         <li><a href="##">企业文化</a></li>
         <li><a href="##">组织结构</a></li>
         <li><a href="##">客服服务</a></li>    </ul></div>
</div>

么Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，类似于word中最上面的那个菜单栏

按钮组大小的设置

    .btn-group-lg:大按钮组

    .btn-group-sm:小按钮组

    .btn-group-xs:超小按钮组

只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组

按钮-按钮组

按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。

使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。

除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”

下拉菜单（菜单项状态）

悬浮状态（:hover）和焦点状态（:focus）：还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：