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类以右对齐导航。

示例

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

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
亲自试一试 »

垂直导航

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

示例

<ul class="nav 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 nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
亲自试一试 »

带下拉菜单的药丸

示例

<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。

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

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

示例

<!-- Nav tabs -->
<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>

<!-- Tab panes -->
<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。

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

示例

<!-- Nav pills -->
<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>

<!-- Tab panes -->
<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 选项卡参考