Bootstrap4 导航

导航菜单

如果您想创建一个简单的水平菜单，请添加.nav类到一个<ul>元素，然后是.nav-item对于每个<li>并添加.nav-link类到他们的链接：

示例

<ul class="nav">
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

亲自试一试 »

对齐导航

添加.justify-content-center类将导航居中，并且.justify-content-end类以右对齐导航。

示例

<ul class="nav justify-content-center">


<ul class="nav justify-content-end">

亲自试一试 »

垂直导航

添加.flex-column类来创建垂直导航：

示例

亲自试一试 »

选项卡

将导航菜单变成导航选项卡.nav-tabs类。添加.active类到活动/当前链接。如果您希望选项卡可切换，请参阅本页的最后一个示例。

示例

<ul class="nav nav-tabs">
<li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

亲自试一试 »

药丸

将导航菜单变成导航丸.nav-pills类。如果您希望药丸可切换，请参阅本页的最后一个示例。

示例

<ul class="nav nav-pills">
<li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

亲自试一试 »

合理的药片/药丸

调整药片/药丸的位置.nav-justified类（等宽）：

示例

亲自试一试 »

带下拉菜单的药丸

示例

<ul class="nav nav-pills">
<li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

亲自试一试 »

带有下拉菜单的选项卡

示例

<ul class="nav nav-tabs">
<li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

亲自试一试 »

可切换/动态选项卡

家

Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。

菜单1

Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

菜单2

Sed ut perspiciatis unde omnis iste natus error sat voluptatem Accusantium doloremque laudantium, totam rem aperiam.

要使选项卡可切换，请添加data-toggle="tab"每个链接的属性。然后添加一个.tab-pane类为每个选项卡都有一个唯一的 ID，并将它们包装在<div>具有类的元素.tab-content。

如果您希望选项卡在单击时淡入和淡出，请添加 .fade上课到.tab-pane:

示例

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


<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>

亲自试一试 »

可切换/动态药丸

家

Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。

菜单1

Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

菜单2

Sed ut perspiciatis unde omnis iste natus error sat voluptatem Accusantium doloremque laudantium, totam rem aperiam.

相同的代码适用于药丸；只需将 data-toggle 属性更改为data-toggle="pill":

示例

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


<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>

亲自试一试 »

完整的 Bootstrap 4 导航参考

有关所有选项卡选项、方法和事件的完整参考，请访问我们的Bootstrap 4 JS 选项卡参考。