Bootstrap5 安装使用（详细教程）

Bootstrap5 安装使用：从零开始构建响应式网页

在当今的网页开发中，前端框架的重要性不言而喻。而 Bootstrap 作为最流行的前端 UI 框架之一，已经成为许多开发者构建美观、响应式网站的首选工具。尤其随着 Bootstrap 5 的发布，它彻底移除了对 jQuery 的依赖，变得更加轻量、灵活和现代化。如果你正在学习前端开发，或者想快速搭建一个适配手机、平板、桌面的网页，那么掌握 Bootstrap5 的安装与使用，就是迈向专业开发的第一步。

这篇文章将带你一步步完成 Bootstrap5 的安装与基本使用，无论你是编程初学者，还是已有一定经验的中级开发者，都能从中获得实用的知识和动手经验。我们不会讲太多理论，而是通过真实代码和案例，让你“边学边写”。

为什么选择 Bootstrap5？

在动手之前，先来聊聊为什么 Bootstrap5 值得你花时间学习。

想象你正在设计一个网站，需要在手机上显示正常，在电脑上布局合理。如果手动写 CSS 媒体查询，可能要写上百行代码，还容易出错。而 Bootstrap5 提供了一套完整的响应式网格系统，就像搭积木一样，你只需要按规则摆放元素，就能自动适配不同屏幕。

更重要的是，Bootstrap5 内置了大量可复用的组件：按钮、导航栏、卡片、模态框、表单等。这些组件都经过精心设计，不仅外观统一，还具备良好的交互体验。你可以把它们当作“预制零件”，直接组合使用，极大提升开发效率。

而且，Bootstrap5 的核心代码是纯 CSS 和 JavaScript，不再依赖 jQuery，这意味着加载更快、兼容性更强，特别适合现代 Web 项目。

通过 CDN 快速引入 Bootstrap5

最简单、最快上手的方式，就是通过 CDN（内容分发网络）引入 Bootstrap5 的 CSS 和 JS 文件。这种方式特别适合初学者练习和小型项目。

打开你的 HTML 文件，在 <head> 标签中添加以下代码：

<!-- 引入 Bootstrap5 的 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap5 的 JS 文件（包含所有组件） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

📌 注释说明：

cdn.jsdelivr.net 是一个全球可用的 CDN 服务，加载速度快。

bootstrap@5.3.0 是当前稳定版本，你可以根据需要替换为最新版本。

bootstrap.min.css 是压缩后的 CSS 文件，体积小，加载快。

bootstrap.bundle.min.js 包含了所有 Bootstrap 组件（如模态框、下拉菜单等）的 JS 逻辑，无需额外引入。

加入这两行代码后，你的页面就可以使用 Bootstrap 的所有功能了。接下来我们写一个简单的示例。

构建第一个响应式页面：导航栏 + 卡片布局

我们来做一个简单的网页，包含一个导航栏和三张卡片，展示不同产品的信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap5 示例</title>
    <!-- 引入 Bootstrap5 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">我的网站</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" 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>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <div class="container my-5">
        <h2 class="text-center mb-4">热门产品推荐</h2>

        <div class="row g-4">
            <!-- 卡片 1 -->
            <div class="col-md-4">
                <div class="card h-100 shadow-sm">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="产品1">
                    <div class="card-body">
                        <h5 class="card-title">智能手表</h5>
                        <p class="card-text">支持心率监测、睡眠分析，续航长达 7 天。</p>
                        <a href="#" class="btn btn-primary">立即购买</a>
                    </div>
                </div>
            </div>

            <!-- 卡片 2 -->
            <div class="col-md-4">
                <div class="card h-100 shadow-sm">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="产品2">
                    <div class="card-body">
                        <h5 class="card-title">无线耳机</h5>
                        <p class="card-text">降噪功能强大，音质清晰，支持快充。</p>
                        <a href="#" class="btn btn-primary">立即购买</a>
                    </div>
                </div>
            </div>

            <!-- 卡片 3 -->
            <div class="col-md-4">
                <div class="card h-100 shadow-sm">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="产品3">
                    <div class="card-body">
                        <h5 class="card-title">便携充电宝</h5>
                        <p class="card-text">20000mAh 大容量，支持快充，轻巧易携带。</p>
                        <a href="#" class="btn btn-primary">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap5 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

📌 注释说明：

navbar-expand-lg 表示在大屏幕（≥992px）下展开导航栏，小屏幕时折叠。

navbar-toggler 是移动端的“汉堡菜单”按钮。

container 是 Bootstrap 的容器类，限制内容宽度，保证布局居中。

row 和 col-md-4 构成响应式网格系统：在中等及以上屏幕下，每行显示 3 列。

g-4 表示列间距为 1.5rem，提升视觉舒适度。

shadow-sm 为卡片添加轻微阴影，增强立体感。

h-100 让卡片高度填满父容器，保持对齐。

这个例子展示了 Bootstrap5 如何用最少的代码实现复杂的响应式布局。你甚至不需要写一行 CSS，就能得到一个美观、适配多设备的页面。

深入理解 Bootstrap5 的响应式网格系统

Bootstrap5 的网格系统是它的核心之一。你可以把它想象成一个“万能网格”，就像乐高积木的底板，所有内容都按行和列排列。

网格系统基于 12 列布局，每个容器最多可容纳 12 列。通过 col-* 类来控制列宽。

屏幕尺寸	类名前缀	说明
超小屏幕（<576px）	`col`	默认列宽，适用于手机
小屏幕（≥576px）	`col-sm`	在小屏及以上生效
中等屏幕（≥768px）	`col-md`	在中屏及以上生效
大屏幕（≥992px）	`col-lg`	在大屏及以上生效
超大屏幕（≥1200px）	`col-xl`	在超大屏及以上生效

例如，col-md-6 表示在中等屏幕及以上，该元素占据 6 列（即一半宽度）。在手机上，它会自动占满整行。

你可以组合使用多个类，实现更精细的控制。比如：

<div class="row">
    <div class="col-12 col-md-6 col-lg-4">内容 1</div>
    <div class="col-12 col-md-6 col-lg-4">内容 2</div>
    <div class="col-12 col-md-6 col-lg-4">内容 3</div>
</div>

这个结构在手机上每行显示 1 个，在平板上显示 2 个，在电脑上显示 3 个，完美实现响应式布局。

使用 Bootstrap5 的组件：模态框与表单

Bootstrap5 提供了丰富的交互组件。我们来做一个“添加用户”的表单，并用模态框（Modal）弹出。

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addUserModal">
    添加新用户
</button>

<!-- 模态框 -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserModalLabel">添加用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

📌 注释说明：

data-bs-toggle="modal" 和 data-bs-target="#addUserModal" 是 Bootstrap5 的触发机制，点击按钮即弹出模态框。

modal fade 是模态框的基本类，fade 实现淡入淡出动画。

btn-close 是关闭按钮，data-bs-dismiss="modal" 用于关闭模态框。

form-control 是 Bootstrap 提供的表单输入框样式，自动适配不同屏幕。

这个例子展示了如何快速创建一个带验证功能的弹窗表单，无需额外 JS 代码，Bootstrap 已经帮你处理了交互逻辑。

本地安装 Bootstrap5：适合项目开发

虽然 CDN 方式适合学习和测试，但在实际项目中，建议本地安装 Bootstrap5，这样可以离线开发，避免依赖外部网络，也便于版本控制。

使用 npm 安装：

npm install bootstrap@5.3.0

安装完成后，在你的项目中引入：

// 在主 JS 文件中引入
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

或者在 HTML 中直接引用本地文件：

<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

这种方式更可控，也更适合团队协作和生产环境部署。

总结与下一步建议

通过这篇文章，你已经掌握了 Bootstrap5 的安装与使用方法。从 CDN 引入到本地安装，从基础布局到交互组件，Bootstrap5 为前端开发提供了强大而简洁的工具集。

如果你是初学者，建议从 CDN 方式入手，快速搭建几个页面，感受响应式布局的魅力。如果你是中级开发者，可以尝试将 Bootstrap5 集成到你的项目中，结合 Vue、React 等框架使用，进一步提升开发效率。

记住，学习框架不是为了“用它”，而是为了“更快地实现想法”。Bootstrap5 就是你通往高效前端开发的一把钥匙。

现在，打开你的编辑器，动手写一个属于自己的网页吧！Bootstrap5 安装使用，从这一行代码开始。