3.6 Bootstrap Navigation Elements

---

Bootstrap Navigation Elements

This article will explain some of the options that Bootstrap provides for defining navigation elements. They use the same markup and base class .nav. Bootstrap also provides a helper class for sharing markup and state. You can switch between different styles by changing the modified class.

Table Navigation or Tabs

Create a tabbed navigation menu:

• Start with an unordered list with class .nav.
• Add class .nav-tabs.

The following example demonstrates this:

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

Capsule Navigation Menu

Basic Capsule Navigation Menu

If you need to change the label into a capsule style, just use class .nav-pills instead of .nav-tabs, and the other steps are the same as above.

The following example demonstrates this:

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

Vertical Capsule Navigation Menu

You can use class .nav-stacked along with class .nav, .nav-pills to make capsules stack vertically.

The following example demonstrates this:

<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

Justified Navigation

You can make a tabbed or capsule nav menu the same width as the parent element when the screen width is greater than 768px by using the class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills respectively . On smaller screens, the navigation links are stacked.

The following example demonstrates this:

<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

disable link

For each .nav class, if the .disabled class is added, a gray link will be created and the :hover state of the link will be disabled, as shown in the following example:

<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

Note: This class only changes the appearance of <a>, not its functionality. Here, you need to use custom JavaScript to disable the link.

Drop-down menu

Navigation menus use a similar syntax to drop-down menus. By default, list item anchors work with some data attributes to trigger an unordered list with the .dropdown-menu class.

label with dropdown menu

The steps to add a dropdown menu to a label are as follows:

• Start with an unordered list with class .nav.
• Add class .nav-tabs.
• Add unordered list with .dropdown-menu class.

<p>带有下拉菜单的标签</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

Capsule with drop down menu

The steps are the same as creating tabs with drop-down menus, just change the .nav-tabs class to .nav-pills, as shown in the following example:

<p>带有下拉菜单的胶囊</p>
  <ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

Tabs and Capsule Tabs

kind	describe
.nav nav-tabs	Bookmark page
.nav nav-pills	Capsule tab
.nav nav-pills nav-stacked	Capsule tabs are stacked vertically
.nav-justified	For tabs justified at both ends, on screens larger than 768px, the .nav-justified class can easily make the tabs or capsules display the same width. On small screens, the navigation links are stacked.
.disabled	disabled tabs
Label Add Dropdown
Capsule tabs with dropdown menus
.tab-content	Used together with .tab-pane and data-toggle="tab" (data-toggle="pill"), set the content corresponding to the tab page to change when the tab is switched
.tab-pane	Used together with .tab-content and data-toggle="tab" (data-toggle="pill"), set the content corresponding to the tab page to change with the switching of the tab