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>

这里写图片描述

posted @ 2017-10-07 17:20  wood2012  阅读(164)  评论(0编辑  收藏  举报