Bootstrap5 安装使用学习笔记

什么是Bootstrap5？

Bootstrap是一个流行的前端开发框架，它提供了一系列的CSS和JavaScript组件，能够快速地构建现代化的响应式(Web、移动端)用户界面。Bootstrap5是Bootstrap的最新版本，它进行了许多重大的更新与改进。

安装Bootstrap5

安装Bootstrap5非常简单。您可以选择使用CDN链接或者下载本地文件。

使用CDN链接：

htmlCopy Code
<!-- CSS链接 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">

<!-- JavaScript链接 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

下载本地文件：

您可以从Bootstrap的官方网站(https://getbootstrap.com/docs/5.0/getting-started/download/)下载Bootstrap5压缩包，并解压到项目目录中。在HTML文件中引入CSS和JavaScript文件：

htmlCopy Code
<!-- CSS链接 -->
<link rel="stylesheet" href="./bootstrap-5.0.1-dist/css/bootstrap.min.css">

<!-- JavaScript链接 -->
<script src="./bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>

实例

接下来我们将演示一个简单的实例，如何使用Bootstrap5创建一个响应式的导航栏。

htmlCopy Code
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Bootstrap Navigation Bar</title>

  <!-- CSS链接 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">

  <!-- JavaScript链接 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>

<body>

  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <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 active" aria-current="page" 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 disabled">关于我们</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</body>

</html>

说明：

导航栏被包含在<nav>标签中。
Bootstrap提供了许多内置的CSS样式类以及JavaScript组件，我们可以使用它们来创建一个响应式的导航栏。
导航栏的内容位于<ul>标签中，每个导航项目使用<li>标签定义。
在小屏设备上，导航栏会自动折叠，出现汉堡菜单。