css-在bootstrap4中正确使用nav-item类

在Bootstrap 4中，nav-item类是用于创建导航菜单项的类。正确使用nav-item类可以使导航菜单更加美观和易于使用。本文将介绍在Bootstrap 4中正确使用nav-item类的完整攻略，包括基本用法、高级用法和示例说明。

基本用法

在Bootstrap 4中，使用nav-item类创建导航菜单项的基本用法如下：

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
</ul>

在上面的代码中，ul元素使用nav类创建导航菜单，li元素使用nav-item类创建导航菜单项，a元素使用nav-link类创建导航链接。通过这种方式，可以创建一个简单的导航菜单。

高级用法

在Bootstrap 4中，nav-item类还有一些高级用法，可以使导航菜单更加灵活和多样化。下面是一些常用的高级用法：

• 垂直导航菜单：使用flex-column类创建垂直导航菜单。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>
  </div>
</div>

• 水平导航菜单：使用justify-content-center类创建水平导航菜单。

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
</ul>

• 下拉菜单：使用dropdown类创建下拉菜单。

<ul class="nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action 1</a>
      <a class="dropdown-item" href="#">Action 2</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Action 3</a>
    </div>
  </li>
</ul>

在上面的代码中，li元素使用dropdown类创建下拉菜单，a元素使用dropdown-toggle类创建下拉菜单的触发器，div元素使用dropdown-menu类创建下拉菜单的内容。通过这种方式，可以创建一个带有下拉菜单的导航菜单。

示例说明

下面给出两个在Bootstrap 4中正确使用nav-item类的示例说明。

示例1：创建水平导航菜单

下面是一个创建水平导航菜单的示例代码：

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

该示例代码创建了一个水平导航菜单，其中每个菜单项都使用nav-item类创建，每个链接都使用nav-link类创建。通过使用justify-content-center类，可以使导航菜单居中显示。

示例2：创建下拉菜单

下面是一个创建下拉菜单的示例代码：

<ul class="nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action 1</a>
      <a class="dropdown-item" href="#">Action 2</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Action 3</a>
    </div>
  </li>
</ul>

该示例代码创建了一个带有下拉菜单的导航菜单，其中下拉菜单使用dropdown类创建。通过使用dropdown-toggle类，可以创建下拉菜单的触发器。下拉菜单的内容使用dropdown-menu类创建。