Bootstrap 手册 06 - 导航篇

1. 导航

1.1. 基本导航

• .nav
• .nav 本身不提供任何导航样式；

1.2. 标签导航

即选项卡导航，特别是在很多内容分块显示时，使用这种选项卡来分组十分适合。

• ul.nav.nav-tabs
• li.active：选中状态；
• li.active.disabled：禁用状态；

1.3. 胶囊导航

• ul.nav.nav-pills

1.4. 垂直堆叠导航

与胶囊导航相比，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距。

• ul.nav.nav-pills.nav-stacked
• 可使用 li.nav-divider 作分割线；
• ul.nav.nav-tabs.nav-stacked 在 v2.x 版本有效，但 v3.x 版本无效；

1.5. 自适应导航

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。

• ul.nav.nav-justified.nav-tabs / ul.nav.nav-justified.nav-pills

1.6. 二级导航（下拉菜单）

• ul.nav.nav-*>li.dropdown>ul.nav.nav-*

1.7. 面包屑式导航

面包屑 (Breadcrumb) 一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置），以斜杠 / 作分隔符。

• ol.breadcrumb
• Bootstrap 使用 li+li::before 实现 li 元素之间的分隔符，IE 低版本不兼容；

2. 导航条

2.1. 基础导航条

相比导航 .nav，导航条 .navbar 包含一个背景色，且可以是纯链接（类似导航），或者表单，或者导航和表单相结合等多种形式。在实际使用中导航条要复杂得多。

.navbar 样式的主要功能就是设置左右 padding 和圆角等效果，但不包括任何和颜色相关的样式设置。

• div.navbar.navbar-default>ul.nav.navbar-nav>li

2.2. 导航条标题

• div.navbar-header>a.navbar-brand

2.3. 导航条表单

Bootstrap 提供了 .navbar-form 使导航条中带有搜索表单。

• div.navbar.navbar-default.navbar-form
• navbar-left 类可使元素左浮动，navbar-right 类可使元素靠右浮动；（浮动对齐只有当渲染视界宽度大于 768px 生效）；

2.4. 导航条按钮、文本和链接

• .navbar-btn：导航条中的按钮；
• .navbar-text：导航条中的文本；
• .navbar-link：导航条中的链接；
• 这三种样式在框架中使用时受到一定的限制，需要和 .navbar-brand、.navbar-nav 配合使用。且数量也有一定限制，一般情况不超过两个。

2.5. 固定导航条

Bootstrap 提供了固定在浏览器窗口顶部、底部这两种方式的导航条。

• div.navbar.navbar-fixed-top：固定顶部；
• div.navbar.navbar-fixed-bottom：固定底部；
• 为避免固定导航条遮盖内容，还需做一些处理：
  • 固定导航条默认高度 50px，在 body 样式上设置 padding——

body {
  padding-top: 70px; /* 有顶部固定导航条时设置 */
  padding-bottom: 70px; /* 有底部固定导航条时设置 */
}

• 在 HTML 结构上将固定导航条都放在页面内容前面——

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  ...
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  ...
</div>
<div class="content">页面内容</div>

在 CSS 中撑开 .content 的距离——

.navbar-fixed-top ~ .content {
  padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
  padding-bottom: 70px;
}

---

2.6. 响应式导航条

宽屏效果 中屏效果 窄屏效果

1. 将窄屏所需的折叠内容放置在 div.collapse.navbar-collapse 之中，为该容器自定义类名或 ID；
2. 放置窄屏所需的汉堡图标样式（固定写法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

3. 确保汉堡按钮的 data-target 属性与容器类名或 ID 对应，例如：div.collapse.navbar-collapse.foo>(ul.nav.navbar-nav+button.navbar-toggle[data-target=".foo" type="button" data-toggle="collapse"])
4. 示例——

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <!-- .navbar-toggle 用于 toggle 收缩的内容，即 .nav-collapse.collapse
 元素 -->
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <!-- 确保无论是宽屏还是窄屏，.navbar-brand 都显示 -->
    <a href="##" class="navbar-brand">慕课网</a>
  </div>
  <!-- 屏幕宽度小于 768px 时，.navbar-responsive-collapse 容器里的内容都会隐藏，显示 .icon-bar；当点击 .icon-bar 时，再展开。屏幕大于 768px 时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
      <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>

---

2.7. 反色导航条

Bootstrap 提供了除 .navbar-default 外的第二种风格的导航条，其变化只是导航条的背景色和文本做了修改。

• div.navbar.navbar-inverse

---

2.8. 分页器

Bootstrap 提供了两种分页器作导航：带页码的分页器和带翻页的分页器。

页码分页器

页码分页器效果示例

• ul.pagination>li>a

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

页码分页器尺寸

• ul.pagination.pagination-lg：大一号页码分页器；
• ul.pagination.pagination-sm：小一号页码分页器；

翻页分页器

翻页分页器没有具体的页码，只提供「上一页」和「下一页」两个按钮。

• ul.pager>li>a

<ul class="pager">
  <li><a href="#">&laquo;上一页</a></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>

翻页分页器对齐样式

• 默认情况之下，翻页分页器居中显示；
• .previous：一般使「上一步」按钮居左；
• .next：一般使「下一步」按钮居右；

<ul class="pager">
  <li class="previous"><a href="#">&laquo;上一页</a></li>
  <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

---