创建导航栏 | 原版 HTML CSS 与 Bootstrap

在web开发中，导航栏是一个经常使用的组件，用于在网站上导航不同页面或部分。本文将介绍如何使用原版的HTML和CSS以及Bootstrap来创建导航栏。

原版 HTML CSS

使用原版的HTML和CSS创建导航栏相对较为繁琐，但可以更好地理解导航栏的实现原理。

首先，我们需要一个HTML结构来定义导航栏的元素。例如：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

上述代码创建了一个简单的导航栏，并包含了四个链接。接下来，我们可以使用CSS来样式化导航栏。例如：

nav {
  background-color: #333;
  color: #fff;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
}

通过上述CSS代码，我们设置了导航栏的背景颜色、文字颜色和链接样式。可以根据需要进行相应的调整。

使用 Bootstrap

Bootstrap是一个流行的前端框架，提供了很多强大的组件和样式库。使用Bootstrap可以更快速地创建导航栏。

首先，我们需要在HTML文件中导入Bootstrap的CSS和JavaScript文件。例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

导入完成后，我们可以使用Bootstrap提供的导航栏组件。例如：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
        <li class="nav-item">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">服务</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">联系我们</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

在上述代码中，我们使用了Bootstrap提供的 navbar 类和相应的样式类来创建导航栏。可以根据需要进一步自定义样式。

总结

以上是使用原版HTML CSS和Bootstrap创建导航栏的方法。通过原版HTML CSS可以更好地理解导航栏的实现原理，而使用Bootstrap可以快速创建具有各种样式和功能的导航栏。根据项目需求选择适合的方法来实现导航栏。