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>