Bootstrap导航组件

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

标签页

注意 .nav-tabs 类依赖 .nav 基类

<ul class="nav nav-tabs">
    <li class="active"><a href="">网站首页</a></li>
    <li><a href="">学校概况</a></li>
    <li><a href="">教学管理</a></li>
    <li><a href="">招生工作</a></li>
    <li><a href="">就业工作</a></li>
  </ul>

---

胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类：

  <ul class="nav nav-pills">
    <li class="active"><a href="">网站首页</a></li>
    <li><a href="">学校概况</a></li>
    <li><a href="">教学管理</a></li>
    <li><a href="">招生工作</a></li>
    <li><a href="">就业工作</a></li>
  </ul>

胶囊式标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

  <div class="row">
      <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="">网站首页</a></li>
          <li><a href="">学校概况</a></li>
          <li><a href="">教学管理</a></li>
          <li><a href="">招生工作</a></li>
          <li><a href="">就业工作</a></li>
        </ul>
      </div>
  </div>

---

禁用的链接

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

        <ul class="nav nav-tabs">
          <li class="active"><a href="">网站首页</a></li>
          <li><a href="">学校概况</a></li>
          <li><a href="">教学管理</a></li>
          <li><a href="">招生工作</a></li>
          <li><a href="">就业工作</a></li>
          <li><a href="">学生入口</a></li>
          <li class="disabled" ><a href="">教师入口</a></li>
        </ul>

---

添加下拉菜单

用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。

       <ul class="nav nav-tabs">
          <li class="active"><a href="">网站首页</a></li>
          <li><a href="">学校概况</a></li>
          <li><a href="">教学管理</a></li>
          <li><a href="">招生工作</a></li>
          <li><a href="">就业工作</a></li>
          <li class="dropdown">
            <a href="" data-toggle="dropdown">教学院系 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="">计算机学院</a></li>
              <li><a href="">外国语学院</a></li>
            </ul>
          </li>
        </ul>