上一节:
下一节:

  Bootstrap 导航

  • 定义和使用

    如果要创建简单的水平菜单导航，请将 .nav 类添加到 <ul> 元素，然后为每个 <li> 添加 .nav-item 并将 .nav-link 类添加到其链接： 
    <div class="container">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">导航1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用导航</a>
    </li>
  </ul>
</div>
    尝试一下

    对齐导航

    添加 .justify-content-center 类以使导航居中，并添加 .justify-content-end 类以使导航右对齐。 
    <div class="container">
  //justify-content-center居中对应的导航
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">导航1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用导航</a>
    </li>
  </ul>
  //justify-content-end右对齐的导航
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="#">导航1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用导航</a>
    </li>
  </ul>
</div>
    尝试一下

    垂直导航

    添加 .flex-column 类以创建垂直导航： 
    <div class="container">
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">导航1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用导航</a>
    </li>
  </ul>
</div>
    尝试一下

  • 导航选项卡

    使用 .nav-tabs 类将导航菜单转换为导航选项卡；将 .active 类添加到活动/当前链接。 
    <div class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">导航1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用导航</a>
    </li>
  </ul>
</div>
    尝试一下
    使用 .nav-pills 类将导航菜单转换为导航丸 
    <div class="container">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">导航1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用导航</a>
    </li>
  </ul>
</div>
    尝试一下
    用 .nav-justified 类（相等的宽度）对齐导航选项卡/导航丸： 
    <div class="container">
  <ul class="nav nav-pills nav-justified">...</ul>
  <ul class="nav nav-tabs nav-justified">...</ul>
</div>
    尝试一下

  • 带下拉菜单的导航

    下面示例演示了带有下拉菜单的导航丸： 
    <div class="container">
 <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">激活项</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉菜单</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="#">导航</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用项</a>
    </li> 
  </ul>
</div>
    尝试一下
    下面示例演示了带有下拉菜单的导航选项卡： 
    <div class="container">
 <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">激活项</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉菜单</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="#">导航</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">禁用项</a>
    </li> 
  </ul>
</div>
    尝试一下

  • 可切换的导航

    要使选项卡可切换，请将 data-toggle="tab" 属性添加到每个链接；然后为每个选项卡添加一个具有唯一ID的 .tab-pane 类，并将它们包装在具有 .tab-content 类的 <div> 元素中。
    如果要在单击时淡入淡出选项卡，请将 .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>
    尝试一下
    相同的代码适用于导航药丸；仅将 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>
    尝试一下

  • 相关页面

上一节:
下一节: