博客

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

  • Post category:other

在Bootstrap 4中，nav-item类用于定义导航栏中的每个项目。在本文中，我们将详细介绍如何正确使用nav-item类。

步骤

以下是在Bootstrap 4中正确使用nav-item类的步骤：

  1. 创建一个<ul>元素，并将其类设置为nav。
<ul class="nav">
  <!-- nav items go here -->
</ul>
  1. 在<ul>元素中创建一个或多个<li>元素，并将其类设置为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>

在上面的示例中，我们创建了三个<li>元素，并将它们的类设置为nav-item。每个<li>元素包含一个<a>元素，用于定义导航栏中的链接。<a>元素的类设置为nav-link，以便在Bootstrap 4中正确显示链接样式。

  1. 如果需要，可以在<a>元素中添加其他类，以自定义链接的样式。
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Normal Link</a>
  </li>
</ul>

在上面的示例中，我们添加了active和disabled类，以自定义链接的样式。active类用于突出显示当前选定的链接，而disabled类用于禁用链接。

示例

以下是两个使用nav-item类的示例：

示例1：水平导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" 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="#">Contact</a>
    </li>
  </ul>
</nav>

在此示例中，我们创建了一个水平导航栏，并使用nav-item类定义了每个项目。我们还使用navbar-nav类将项目包装在一个<ul>元素中，并使用mr-auto类将项目向右对齐。

示例2：垂直导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav flex-column">
    <li class="nav-item active">
      <a class="nav-link" 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="#">Contact</a>
    </li>
  </ul>
</nav>

在此示例中，我们创建了一个垂直导航栏，并使用nav-item类定义了每个项目。我们还使用navbar-nav类将项目包装在一个<ul>元素中，并使用flex-column类将项目垂直排列。

Tags: