Some options provided by Bootstrap for defining navigation elements use the same markup and base class .nav. Bootstrap also provides a helper class for sharing markup and state. Change the decorated class to switch between different styles.

1 Table Navigation or Tabs

Create a tabbed navigation menu:

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

<ul class="nav nav-tabs">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">人文</a></li>
</ul>

2 Capsule-style navigation menus

2.1 Basic Capsule Type

<ul class="nav nav-pills">
    ...
</ul>

2.2 Vertical capsule

You can use class .nav-stacked alongside class .nav, .nav-pills to have the capsules stacked vertically.

The following example demonstrates this:

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">人文</a></li>
</ul>

3 Justified Navigation

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

The following example demonstrates this:

<ul class="nav nav-pills nav-justified">
    ...
</ul>
<p></p>
<ul class="nav nav-tabs nav-justified">
    ...
</ul>

Stacking effect on small screens:

4 Disable links

For each .nav class, adding a .disabled class creates a greyed out link and disables the link's :hover state, as shown in the following example:

<ul class="nav nav-pills">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">科技</a></li>
    <li class="disabled"><a href="#">人文</a></li>
</ul>
<p></p>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">科技</a></li>
    <li class="disabled"><a href="#">人文</a></li>
</ul>

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

5 Drop-down menu

Navigation menus use a similar syntax to dropdown menus. By default, the list item's anchor cooperates with some data attributes to trigger an unordered list with the .dropdown-menu class.

5.1 Labels with drop-down menus

The steps to add a drop-down 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.

<ul class="nav nav-tabs">
    <li class="active"><a href="#">主页</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">科普
        <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">建筑</a></li>
            <li><a href="#">医学</a></li>
            <li><a href="#">互联网</a></li>
        </ul>
    </li>
    <li><a href="#">人文</a></li>
</ul>

5.2 Capsule Navigation with Dropdown Menus

The steps are the same as creating a tab with a drop-down menu, except that you need to change the .nav-tabs class to .nav-pills, as shown in the following example:

<ul class="nav nav-pills">
    ...
</ul>

Class 6 Description

Class	illustrate
.nav nav-tabs	Bookmark page
.no nav-pills	Capsule Tabs
.no-pills not-stacked	Capsule tabs are stacked vertically
.nav-justified	For justified tabs, on screens larger than 768px, the .nav-justified class can easily make tabs or capsules the same width. On small screens, the navigation links appear stacked.
.disabled	Disabled tabs
.tab-content	Used together with .tab-pane and data-toggle=”tab” (data-toggle=”pill” ), set the corresponding content of the tab page to change with the switch of the tab
.tab-pane	Used together with .tab-content and data-toggle=”tab” (data-toggle=”pill”) to set the content of the tab page to change with the switch of the tab

.tab-content and .tab-content example:

<div class="tab-content">
    <div id="home" class="tab-pane active">
        <p>这是首页</p>
    </div>
    <div id="menu1" class="tab-pane">
        <p>科技范</p>
    </div>
    <div id="menu2" class="tab-pane">
        <p>博大精深</p>
    </div>
</div>

Bootstrap Navigation Elements