在本教程中，我们将学习Bootstrap中的nav。

我们使用.nav类在Bootstrap中创建导航。

简单的导航标签

为了创建一个简单的导航标签，我们使用.nav-tabs类。

对于具有可标签区域的标签，请包含标签JavaScript插件。

<ul class="nav nav-tabs">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

我们可以通过添加.active类来选择一个标签。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

导航胶囊

要创建导航胶囊，我们使用.nav-pills类。

<ul class="nav nav-pills">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

我们也可以添加.active类来选择一个标签。

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

我们甚至可以使用.nav-stacked类来堆叠导航药丸。

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

对齐导航

我们使用.nav-justified类来使制表符和导航胶囊的宽度等于其父级的宽度，以使屏幕尺寸大于768px。
对于较小的屏幕，导航链接被堆叠。

<ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

<ul class="nav nav-pills nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

禁用导航链接

我们可以添加.disabled类来禁用导航链接。

<ul class="nav nav-pills">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation" class="disabled"><a href="#">Contact us</a></li>
</ul>

将下拉菜单添加到导航选项卡和导航胶囊

我们甚至可以在.nav-pills和.nav-tabs中添加.dropdown。

创建下拉菜单时，请使用下拉菜单JavaScript插件。

<ul class="nav nav-pills">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      More Menu <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
</ul>