Bootstrap 选项卡和胶囊导航


菜单

大多数网页都有某种菜单。

在 HTML 中,菜单通常在无序列表 <ul> 中定义(并在之后设置样式),如下所示:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

如果要创建上面列表的水平菜单,请将 .list-inline 类添加到 <ul>:

<ul class="list-inline">
亲自试一试 »

或者你可以在上面的菜单中显示 Bootstraps 的选项卡和胶囊导航(见下文)。

注释: 请参阅本页最后一个示例,了解如何使选项卡和胶囊导航可动态切换。


选项卡

选项卡是通过 <ul class="nav nav-tabs"> 创建的:

提示: 同时用 <li class="active">标记当前页面。

以下示例创建导航选项卡:

实例

<ul class="nav nav-tabs">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">菜单 1</a></li>
  <li><a href="#">菜单 2</a></li>
  <li><a href="#">菜单 3</a></li>
</ul>
亲自试一试 »

带下拉菜单的选项卡

选项卡还可以设置下拉菜单。

以下示例将下拉菜单添加到 "菜单 1":

实例

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">子菜单 1-1</a></li>
      <li><a href="#">子菜单 1-2</a></li>
      <li><a href="#">子菜单 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单 2</a></li>
  <li><a href="#">菜单 3</a></li>
</ul>
亲自试一试 »


胶囊导航

P<ul class="nav nav-pills"> 可以将导航项设置成胶囊形状。同时用 <li class="active"> 标记当前页面:

实例

<ul class="nav nav-pills">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">菜单 1</a></li>
  <li><a href="#">菜单 2</a></li>
  <li><a href="#">菜单 3</a></li>
</ul>
亲自试一试 »

垂直胶囊导航

胶囊导航也可以垂直显示。只需添加 .nav-stacked 类:

实例

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">菜单 1</a></li>
  <li><a href="#">菜单 2</a></li>
  <li><a href="#">菜单 3</a></li>
</ul>
亲自试一试 »

胶囊导航垂直排列

Text...

Text...

Text...

下面的示例将垂直胶囊导航放置在最后一列中。因此,在大屏幕上,菜单将显示在右侧。但在小屏幕上,内容会自动调整为单列布局:

实例

<div class="col-md-3">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">菜单 1</a></li>
    <li><a href="#">菜单 2</a></li>
    <li><a href="#">菜单 3</a></li>
  </ul>
</div>
亲自试一试 »

胶囊下拉菜单

胶囊也可以设置下拉菜单。

以下示例将下拉菜单添加到 "菜单 1":

实例

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
亲自试一试 »

选项卡和胶囊居中对齐

要居中对齐选项卡和胶囊,请使用 .nav-justified 类。

请注意,在小于 768px 的屏幕上,列表项是堆叠的(内容将保持居中):

实例

<!-- 居中选项卡 -->
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

<!-- 居中胶囊 -->
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
亲自试一试 »

动态选项卡

首页

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-toggle="tab" 属性。 然后为每个选项卡添加一个具有唯一 ID 的 .tab-pane 类,并将它们包装在一个带有 .tab-content 类的 <div> 元素中。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade 类:

实例

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>
亲自试一试 »

胶囊状动态选项卡

胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill":

实例

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>
亲自试一试 »

学习训练

练习题:

添加创建选项卡菜单所需的类。

<ul class="">
  <li><a href="#">Home</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>

开始实验


完整 Bootstrap 导航参考

有关导航的选项、方法和事件完整参考,请转到我们的 Bootstrap JS 导航参考

有关选项卡的选项、方法和事件完整参考,请转到我们的 Bootstrap JS 选项卡参考