HoRain云--Bootstrap5安装使用全攻略

本文详细介绍了Bootstrap5的安装与使用方法。主要内容包括：三种安装方式（CDN、本地文件、npm），核心功能如响应式容器和栅格系统，以及常用组件示例（导航栏、卡片、按钮）。文章还提供了重要注意事项（JavaScript依赖、浏览器兼容性）和开发建议，最后附上一个完整的响应式网页模板。适合前端开发者快速上手Bootstrap5框架。

HoRain 云小助手

33人浏览 · 2026-04-03 10:00:00

HoRain 云小助手 · 2026-04-03 10:00:00 发布

🎬 HoRain 云小助手：个人主页

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

3. npm 安装方式（适合Node.js项目）

根据最新的搜索结果，我为您整理了Bootstrap5的详细安装和使用指南：

Bootstrap5 安装方法

1. CDN 方式（推荐，最简单）

这是最简单快速的安装方式，适合初学者和快速原型开发：

<!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 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 或者使用国内CDN（字节跳动静态资源库） -->
    <!-- <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> -->
</head>
<body>
    <h1 class="text-center text-primary mt-5">Hello Bootstrap5!</h1>
    
    <!-- Bootstrap5 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. 下载文件方式

步骤：

访问官方下载地址：https://getbootstrap.com
下载已编译的CSS和JS文件
解压后将文件夹重命名为bootstrap5（便于管理）
放到项目目录中（如static/bootstrap5/）

HTML引用：

<!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>
    <!-- 本地CSS文件 -->
    <link href="static/bootstrap5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 页面内容 -->
    
    <!-- 本地JS文件（注意顺序） -->
    <script src="static/bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. npm 安装方式（适合Node.js项目）

# 安装Bootstrap5
npm install bootstrap

# 或者使用yarn
yarn add bootstrap

在JavaScript文件中导入：

// 导入Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Bootstrap5 基本使用

1. 响应式容器

<div class="container">
    <!-- 固定宽度容器 -->
</div>

<div class="container-fluid">
    <!-- 全宽容器 -->
</div>

<div class="container-md">
    <!-- 响应式容器 -->
</div>

2. 栅格系统（核心功能）

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="p-3 bg-primary text-white">左侧栏</div>
        </div>
        <div class="col-md-8">
            <div class="p-3 bg-secondary text-white">主内容区</div>
        </div>
    </div>
    
    <!-- 响应式示例 -->
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="p-3 bg-success text-white">手机全屏，平板半屏，桌面1/3屏</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="p-3 bg-warning text-dark">响应式布局示例</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="p-3 bg-info text-white">自动调整布局</div>
        </div>
    </div>
</div>

3. 常用组件示例

导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <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>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

卡片组件：

<div class="card mb-3">
    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">这是卡片的描述文字，Bootstrap5提供了丰富的样式和组件。</p>
        <a href="#" class="btn btn-primary">了解更多</a>
    </div>
</div>

按钮样式：

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-light">浅色按钮</button>
<button class="btn btn-dark">深色按钮</button>

重要注意事项

1. JavaScript 依赖

Bootstrap5 的 JS 组件依赖 bootstrap.bundle.min.js，它包含了 Popper.js，无需单独引入。

2. 浏览器兼容性

Bootstrap5 支持现代浏览器：

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
不再支持 IE 浏览器

3. 最佳实践建议

文件结构建议：

项目根目录/
├── index.html
├── css/
│   ├── bootstrap.min.css
│   └── custom.css (自定义样式)
├── js/
│   ├── bootstrap.bundle.min.js
│   └── custom.js (自定义脚本)
└── static/
    ├── bootstrap5/ (如果本地安装)
    └── images/

自定义样式：

<!-- 先引入Bootstrap，再引入自定义样式 -->
<link href="bootstrap5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

4. 开发工具推荐

编辑器：VS Code（免费且功能强大）
浏览器：Chrome（开发者工具完善）
调试工具：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>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .feature-icon {
            width: 4rem;
            height: 4rem;
            border-radius: .75rem;
        }
        .custom-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">MyApp</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMain">
                <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>
                    <li class="nav-item"><a class="nav-link" href="#">联系</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header class="py-5 custom-bg text-white">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="display-4 fw-bold">Bootstrap5 快速入门</h1>
                    <p class="lead">使用现代前端框架，快速构建响应式网站</p>
                    <button class="btn btn-light btn-lg me-3">开始使用</button>
                    <button class="btn btn-outline-light btn-lg">了解更多</button>
                </div>
                <div class="col-lg-6 mt-5 mt-lg-0">
                    <div class="card shadow-lg">
                        <div class="card-body p-4">
                            <h5 class="card-title">快速示例</h5>
                            <p class="card-text">这是一个使用Bootstrap5创建的响应式卡片组件。</p>
                            <div class="d-grid gap-2">
                                <button class="btn btn-primary">主要操作</button>
                                <button class="btn btn-outline-secondary">次要操作</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 特性区域 -->
    <section class="py-5">
        <div class="container">
            <div class="row text-center mb-5">
                <h2 class="fw-bold">核心特性</h2>
                <p class="lead text-muted">Bootstrap5 提供的强大功能</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="feature-icon bg-primary bg-gradient text-white mx-auto mb-3">
                                <i class="bi bi-grid fs-1"></i>
                            </div>
                            <h3 class="card-title">响应式设计</h3>
                            <p class="card-text">自动适应各种设备屏幕尺寸</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="feature-icon bg-success bg-gradient text-white mx-auto mb-3">
                                <i class="bi bi-gem fs-1"></i>
                            </div>
                            <h3 class="card-title">丰富组件</h3>
                            <p class="card-text">导航栏、卡片、模态框等50+组件</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="feature-icon bg-info bg-gradient text-white mx-auto mb-3">
                                <i class="bi bi-lightning fs-1"></i>
                            </div>
                            <h3 class="card-title">快速开发</h3>
                            <p class="card-text">几分钟内构建专业级界面</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>MyApp</h5>
                    <p>使用Bootstrap5构建的现代Web应用</p>
                </div>
                <div class="col-md-3">
                    <h5>链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white text-decoration-none">首页</a></li>
                        <li><a href="#" class="text-white text-decoration-none">关于</a></li>
                        <li><a href="#" class="text-white text-decoration-none">服务</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>联系方式</h5>
                    <ul class="list-unstyled">
                        <li>Email: info@example.com</li>
                        <li>Phone: +86 123 4567 890</li>
                    </ul>
                </div>
            </div>
            <hr class="my-4 bg-light">
            <div class="text-center">
                <p class="mb-0">&copy; 2026 MyApp. All rights reserved.</p>
            </div>
        </div>
    </footer>

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

Bootstrap5 是一个功能强大且易于学习的前端框架。建议从 CDN 方式开始，熟悉后再尝试其他安装方法。官方文档（https://getbootstrap.com）是最佳的学习资源，包含了所有组件的详细说明和示例代码。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

[特殊字符]OpenClaw（小龙虾）Windows 11 一键安装教程｜内置 490 + 大模型，小白 10 分钟极速部署

2048 AI社区

OpenVINO 综合指南

OpenVINO (Open Visual Inference & Neural Network Optimization) 是 Intel 开发的一个开源工具包，专门用于优化和部署深度学习模型。它提供了跨平台、跨硬件的高性能推理能力，特别适合在 Intel 硬件上部署 AI 模型。核心特性硬件加速优化：充分利用 Intel CPU、GPU、VPU 和 FPGA 等硬件模型格式支持：支持 ONNX