案例 Container

Bootstrap 案例：我的第一个 Bootstrap 5 网站

从零开始构建一个 Bootstrap 网页

本指南将引导你从零开始构建一个基础的 Bootstrap 5 网页。

我们将从一个最基础的 HTML 结构开始，并逐步添加 Bootstrap 组件来创建一个响应式网页。

让我们从以下基础 HTML 页面开始：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Bootstrap Page</title>
</head>
<body>
  <h1>My First Bootstrap Website!</h1>
  <p>This page will grow as we add more and more components from Bootstrap...</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

添加 Bootstrap CDN 并将元素包裹在容器中

首先，分别在 <head> 中和 </body> 标签闭合之前，通过 CDN 引入 Bootstrap 5 的 CSS 和 JavaScript Bundle（包含 Popper.js）。Bootstrap 5 不需要 jQuery。

接下来，将你的主要内容包裹在一个容器元素内，例如使用 <div class="container"> 创建一个响应式固定宽度容器，或使用 <div class="container-fluid"> 创建一个全宽容器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Case with Container</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-3">
    <h1>My first Bootstrap website!</h1>
    <p>This page will grow as we add more and more components from Bootstrap...</p>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>

  <!-- Bootstrap JS Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

提示：为了让内容横跨整个视口宽度，将 .container 改为 .container-fluid：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Case with Container-Fluid</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container-fluid mt-3">
    <h1>My first Bootstrap website!</h1>
    <p>This page will grow as we add more and more components from Bootstrap...</p>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>

  <!-- Bootstrap JS Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

使用 mt-3（margin-top: 3 个单位）是一个 Bootstrap 间距工具类，用于在容器顶部添加一些空间，以获得更好的视觉效果。