Bootstrap CSS组件之导航(nav)

Bootstrap是一款流行的前端框架，其中的导航(nav)组件是常用的页面元素之一。下面，我将从以下几个方面详细讲解Bootstrap CSS组件之导航(nav)的完整攻略。

导航(nav)组件的基本结构

一个Bootstrap导航组件的基本结构如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

其中，nav表示导航组件，navabar表示导航栏，navbar-brand表示导航栏上的品牌，navbar-toggler表示展开/收起的按钮，navbar-collapse表示可折叠的内容，navbar-nav表示导航栏的菜单项。具体讲解如下：

• .navbar：导航栏的外部容器，包括.navbar-light或.navbar-dark表示明亮或暗黑主题。
• .navbar-brand：导航栏上的品牌，一般放在最左侧位置。
• .navbar-toggler：展开/收起按钮，一般放在最右侧位置。
• .navbar-collapse：可折叠的内容，通过按钮控制显示或隐藏。
• .navbar-nav：导航栏的菜单项容器，包括.nav-item和.nav-link表示菜单项和菜单链接。

导航(nav)组件的常用属性

在Bootstrap中，导航组件的常用属性有以下几个：

• .active：表示当前菜单项，一般会将其文字加粗或加底色。
• .disabled：表示菜单项被禁用，一般为灰色或半透明。
• .dropdown：表示菜单项包含下拉菜单，可以在内部添加.dropdown-toggle和.dropdown-menu。
• .justify-content-：表示菜单项的排列方式，包括start、center、end和around。
• .align-items-：表示菜单项的对齐方式，包括start、center和end。

导航(nav)组件的实例

下面通过两个实例来讲解导航(nav)组件的使用。

实例1：多级菜单并加入表单元素

下面的代码实现了一个包含两个下拉菜单和一个表单元素的导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown1
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
          <a class="dropdown-item" href="#">Action1</a>
          <a class="dropdown-item" href="#">Action2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Action3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown2
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
          <a class="dropdown-item" href="#">Action1</a>
          <a class="dropdown-item" href="#">Action2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Action3</a>
        </div>
      </li>
    </ul>

     <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
  </div>
</nav>

上面的代码中，通过.dropdown类实现了两个下拉菜单，以及.form-inline和.form-control类实现了一个表单元素。

实例2：右侧对齐的菜单项

下面的代码实现了一个包含靠右对齐的菜单项的导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码中，通过.justify-content-end类实现了菜单项右侧对齐的效果。

至此，Bootstrap CSS组件之导航(nav)的完整攻略讲解完毕。通过了解它的基本结构、常用属性和实例应用，相信大家对Bootstrap导航组件的使用有了更深入的了解。