基本用法

.nav 直接包含 a.btn 作为导航条目即可。

导航的选中项目标记为 .active

当导航的水平方向无法显示完所有导航条目时,则允许在水平滚动浏览所有导航条目。

<nav class="nav">
  <a><i class="icon-home"></i></a>
  <a>产品</a>
  ...
</nav>
固定导航

导航作为应用全局导航条,通常需要固定在页面顶部或底部。在 <body>.page 上使用辅助类 .with-nav-top.with-nav-bottom,并在 .nav 上使用辅助类 .affix.dock-top.affix.dock-bottom

// 固定在顶部
<body class="with-nav-top">
  <nav class="nav affix dock-top">
    ...
  </nav>
</body>
// 固定在底部
<body class="with-nav-bottom">
  <nav class="nav affix dock-bottom">
    ...
  </nav>
</body>

在同一个页面可以同时将两个应用导航条分别固定顶部和底部。

// 固定在顶部和底部
<body class="with-nav-top with-nav-bottom">
  <nav class="nav affix dock-top">
    ...
  </nav>
  ...
  <nav class="nav affix dock-bottom">
    ...
  </nav>
</body>

当应用导航条固定时,可以为 .nav.affix 使用 .dock-auto 来让固定的应用导航条响应页面滚动事件并在合适的时候自动隐藏和显示。

// 固定在顶部和底部并自动显示或隐藏
<body class="with-nav-top with-nav-bottom">
  <nav class="nav affix dock-top dock-auto">
    ...
  </nav>
  ...
  <nav class="nav affix dock-bottom dock-auto">
    ...
  </nav>
</body>
着色

使用外观选项的着色辅助类为导航着色。

.nav.primary

.nav.gray

.nav.dark

次要导航

使用 .nav-secondary,为一个着色后的导航应用次要导航外观。

自适应

使用 .justified,让导航为项目自动分配空间。

轮廓外观

使用 .outline,为一个着色后的导航应用轮廓外观。

大小

使用 .nav-lg,使得导航更高。

使用 .nav-sm,使得导航更高。