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

简介

在网页开发中，导航栏是一个重要的组件，它能帮助用户快速找到所需信息。本文将介绍如何使用原版 HTML CSS 和 Bootstrap 分别创建导航栏。

使用原版 HTML CSS 创建导航栏

HTML 代码示例：

<nav>
  <ul>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>

CSS 代码示例：

nav {
  width: 100%;
  background-color: #333;
  overflow: auto;
}

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

nav li {
  float: left;
}

nav li a {
  display: block;
  padding: 1em;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

nav li a:hover {
  background-color: #444;
}

以上代码将创建一个简单的水平导航栏，其中 nav 元素包含一个无序列表 ul，列表中的每个元素 li 包含一个链接 a。通过设置 float 属性，使得 li 元素在同一行排列。设置 nav 元素的 overflow 属性，可以在列表项折行时出现滚动条。

使用 Bootstrap 创建导航栏

Bootstrap 是一个广泛使用的前端框架，其中包含了丰富的组件库。下面的示例将演示如何使用 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="collapse 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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

通过添加适当的类名，可以轻松地创建具有不同样式的导航栏。在 Bootstrap 中，导航栏通常包含一个 nav 元素和一个具有多个 nav-item 的 ul 元素。通过使用 navbar-expand-lg 类名，可以在窄屏幕上折叠导航栏。在 navbar-toggler 元素上添加 data-toggle 和 data-target 属性，可以在单击时切换折叠状态。

总结

本文介绍了如何使用原版 HTML CSS 和 Bootstrap 创建导航栏。HTML CSS 提供了基础的样式设计，而 Bootstrap 则提供了更丰富的组件库，使得开发工作更加高效。开发者可以根据需要选择适当的工具来创建自己的导航栏。