Bootstrap5应用
前言
Bootstrap 5 是构建响应式、现代化网页的高效前端框架，适合快速开发与原型设计。
-
纯 CSS/JS 实现，无 jQuery 依赖：Bootstrap 5 移除了对 jQuery 的依赖，完全使用原生 JavaScript 编写组件，提升性能与兼容性，更适应现代前端开发。
-
响应式设计，移动优先：基于强大的 12 列响应式网格系统，自动适配手机、平板、桌面等不同设备，确保网站在各种屏幕尺寸下良好显示。
-
丰富的预设组件：提供按钮、导航栏、卡片、模态框、轮播图等 20+ 个可复用 UI 组件，开箱即用，大幅加快开发速度。
-
支持现代浏览器与工具：兼容 Chrome、Firefox、Safari 等主流浏览器，支持 Sass 预处理器，便于自定义主题与样式。
-
灵活的工具类（Utilities）：提供大量辅助类（如边距、颜色、文本对齐），无需写 CSS 即可快速布局和样式调整。
-
支持暗黑模式与表单优化：新增对暗色主题的支持，重构表单控件，提升可访问性与用户体验。
-
模块化与可扩展：可通过 npm 安装或 CDN 引入，支持按需引入 SCSS 或 JS 模块，适用于 Vue、React 等现代框架。
使用Bootstrap5
1、通过 CDN导入
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Bootstrap5示例</title><!-- 引入 Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container mt-5"><h1 class="text-primary">Hello Bootstrap 5</h1><button class="btn btn-success">Bootstrap 按钮</button></div><!-- 引入 Bootstrap 5 JavaScript（用于模态框、下拉菜单等交互） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>2、通过下载 Bootstrap 的编译文件（即已打包好的 CSS 和 JS）来搭建网站
- 打开官网：https://getbootstrap.com
- 点击导航栏的 "Download"
- 下载 "Compiled CSS and JS" 版本（如
bootstrap-5.3.2-dist.zip）
| 优势 | 说明 |
|---|---|
| 🌐 离线可用 | 不依赖网络，适合内网、演示或断网环境 |
| ⚡ 加载更快 | 本地文件加载速度通常比 CDN 更快（尤其网络差时） |
| 🔐 安全可控 | 不依赖第三方 CDN，避免资源被篡改或不可用 |
| 📦 自定义修改 | 可以修改 CSS/JS（但不推荐直接改 Bootstrap 源码） |
注意事项
- ✅
bootstrap.bundle.min.js包含了 Popper（用于 Tooltip、Popover 等），不需要单独引入 Popper - ✅ JS 文件必须放在
</body>前，确保 DOM 加载完成 - ✅ 如果你使用自己的 JS，也应放在 Bootstrap JS 之后
- ❌ 不要使用
bootstrap.min.js（不包含 Popper），否则下拉菜单等会失效
成果展示
代码源地址：
https://gitee.com/weijiandan/bootstrap5.git
https://gitee.com/weijiandan/bootstrap5.git
一键三连带走源码，感谢支持！