一篇文章包含Bootstrap框架的基本用法

Bootstrap 是一个流行的前端框架，用于快速构建响应式、移动优先的网页。它提供了预定义的 CSS 类、JavaScript 插件以及可复用的组件，帮助开发者减少开发时间并提高效率。

1. 引入 Bootstrap

方法 1：使用 CDN（推荐）

通过 CDN 引入 Bootstrap，无需下载文件，直接在 HTML 文件中添加以下代码：

• CSS 引入：

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

• JavaScript 引入（可选，用于交互组件）：

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

方法 2：本地安装

如果需要离线开发，可以下载 Bootstrap 文件：

1. 从 Bootstrap 官网 下载。

2. 或者使用 npm 安装：

npm install bootstrap

3. 在项目中引用下载的 CSS 和 JS 文件。

<link rel="stylesheet" href="/path/to/bootstrap.min.css">

2. Bootstrap 的核心概念

2.1. 栅格系统（Grid System）

Bootstrap 使用 12 列的栅格系统，用于响应式布局设计。

• 基本用法：

<div class="container">
  <div class="row">
    <div class="col">列 1&