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 结构上将固定导航条都放在页面内容前面——

  ...


  ...

页面内容

在 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. 放置窄屏所需的汉堡图标样式（固定写法）：

  Toggle Navigation
  
  
  

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. 示例——

  

    
    
      Toggle Navigation
      
      
      
    
    
    慕课网
  
  
  

    

      
网站首页
      
系列教程
      
名师介绍
      
成功案例
      
关于我们
    
  

---

2.7. 反色导航条

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

• div.navbar.navbar-inverse

---

2.8. 分页器

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

页码分页器

页码分页器效果示例

• ul.pagination>li>a

  
«
  
1
  
2
  
3
  
4
  
5
  
»

页码分页器尺寸

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

翻页分页器

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

• ul.pager>li>a

  
«上一页
  
下一页»

翻页分页器对齐样式

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

  
«上一页
  
下一页»

---