正文

学会Bootstrap：轻松打造响应式导航菜单，从UL和LI开始

/0 浏览量
0419

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式网站。在这个教程中，我们将一起学习如何使用 Bootstrap 创建一个基本的响应式导航菜单。我们将从 HTML 的 <ul> 和 <li> 标签开始，逐步构建一个美观且功能齐全的导航菜单。

基础结构

首先，我们需要一个基本的 HTML 结构。一个典型的导航菜单由一个无序列表 <ul> 组成，其中包含多个列表项 <li>，每个列表项可以包含一个链接 <a>。

<ul class="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>

添加 Bootstrap 类

为了让这个导航菜单变得响应式，我们需要给它添加一些 Bootstrap 的类。首先，确保你的页面中已经包含了 Bootstrap 的 CSS 文件。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

然后，我们将 <ul> 元素添加 nav 类，将每个 <li> 元素添加 nav-item 类，以及将每个 <a> 元素添加 nav-link 类。

<ul class="nav nav-tabs">
  <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>

在这个例子中，我们还使用了 nav-tabs 类，这使得菜单项在水平布局时看起来像一组标签。

响应式导航菜单

Bootstrap 提供了两种响应式导航菜单的样式：水平导航和垂直导航。默认情况下，导航菜单是水平的。如果你想要在屏幕尺寸较小时显示为垂直菜单，可以使用 navbar-collapse 和 collapse 类。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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="#">首页 <span class="sr-only">(current)</span></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>
</nav>

在这个例子中，我们使用了 navbar-expand-lg 类来确保在大型屏幕上导航菜单是展开的，而在小屏幕上则是折叠的。navbar-toggler 和 navbar-collapse 元素用于控制导航菜单的折叠和展开。

总结

通过这个教程，我们学习了如何使用 Bootstrap 创建一个基本的响应式导航菜单。我们从 HTML 的 <ul> 和 <li> 标签开始，逐步添加 Bootstrap 类，并使用了一些额外的 Bootstrap 功能来创建一个响应式的导航菜单。现在，你可以在你的项目中应用这些知识，打造出既美观又实用的导航菜单。

-- 展开阅读全文 --