boostrap框架下的导航栏切换

Bootstrap 导航栏

        导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

基本的标签页

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

基本圆角标签页

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

不可用状态

在任何的导航组件(标签, 圆角或列表)添加 .disabled, 链接将变成灰色, 且没有停悬效果. 但是链接仍然保持可点击, 除非删除了href属性. 或者你也可用JavaScript来防止点击.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Home</a></li>
  ...
</ul>

叠放式导航 竖直排放标签和圆角链接

默认情况下标签和圆角链接是水平排放的，使用 .nav-stacked 就可以将其变成竖直叠放。

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

下拉菜单 改良的导航组件

添加下拉菜单需要添加一些额外的HTML代码和下拉菜单的JavaScript插件.

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul

导航列表 构建简单的叠放式导航，适用于侧边栏

导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。

导航列表例子

对存放一组链接的列表使用 class="nav nav-list" :

<ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  ...
</ul

水平分隔符

添加一个水平分隔符, 只需在空列表项添加.divider

标签页切换导航 通过javascript让标签生动起来

我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。应用时只需修改很少的标记。

标签页切换的例子

让标签可切换, 需在.tab-content里创建.tab-pane, 并对每个标签设置一个唯一的ID.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

淡入

要让内容淡入, 需在每个.tab-pane添加.fade .

各个方向的标签

底部

反转HTML的顺序，用 .tabs-below 将标签居底。

左边

，用 .tabs-left 将标签居底。

右边

使用 .tabs-right 将标签居右。