Bootstrap 5 文件结构与 API 使用指南
一、文件结构
Bootstrap 5 的文件结构与 Bootstrap 4 相比有一些重要变化，主要区别在于不再依赖 jQuery，并改进了 JavaScript 插件架构：
bootstrap/
├── dist/
│ ├── css/
│ │ ├── bootstrap.css
│ │ ├── bootstrap.min.css
│ │ ├── bootstrap-grid.css
│ │ ├── bootstrap-grid.min.css
│ │ ├── bootstrap-utilities.css
│ │ └── bootstrap-utilities.min.css
│ └── js/
│ ├── bootstrap.bundle.js
│ ├── bootstrap.bundle.min.js
│ ├── bootstrap.js
│ └── bootstrap.min.js
├── js/
│ └── src/ (所有插件源文件)
└── scss/ (所有 Sass 源文件)文件说明
-
CSS 文件：
bootstrap.css：完整 CSS（包含网格系统、组件和工具类）bootstrap-grid.css：仅包含网格系统bootstrap-utilities.css：仅包含工具类.min.css为对应的压缩版本
-
JS 文件：
bootstrap.js：所有插件（不包含 Popper）bootstrap.bundle.js：包含所有插件和 Popper.min.js为对应的压缩版本
-
图标系统：
- Bootstrap 5 不包含内置图标
- 推荐使用 Bootstrap Icons（需单独引入）
二、基本 API 使用
1. 引入 Bootstrap 5
Bootstrap 5
三、主要组件 API（Bootstrap 5 更新）
1. 导航栏 (Navbar) - 更新语法
2. 卡片 (Card) - 增强功能
...
...
...
3. 模态框 (Modal) - 更新 API
4. 轮播 (Carousel) - 增强控制
四、JavaScript API 方法（Bootstrap 5 更新）
1. 初始化插件
// 工具提示
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
// 弹出框
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
// 模态框
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})2. 事件监听
// 模态框事件
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('show.bs.modal', function (event) {
// 在模态框显示前触发
})
// 标签页切换事件
var tabEls = document.querySelectorAll('a[data-bs-toggle="tab"]')
tabEls.forEach(function(tabEl) {
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // 新激活的标签页
event.relatedTarget // 之前激活的标签页
})
})
// 轮播事件
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function (event) {
console.log('滑动开始', event.direction)
})3. 方法调用
// 模态框方法
var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal'))
myModal.show() // 显示
myModal.hide() // 隐藏
myModal.toggle() // 切换
myModal.handleUpdate() // 重新计算位置
// 标签页方法
var triggerTabList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
// 工具提示方法
var tooltip = bootstrap.Tooltip.getInstance(document.querySelector('[data-bs-toggle="tooltip"]'))
tooltip.show()
tooltip.hide()
tooltip.toggle()
tooltip.dispose()五、实用工具类（Bootstrap 5 新增）
1. 间距工具增强
上下左右间距2. 边框工具增强
带边框的圆角元素3. 颜色工具增强
蓝色文本，75%透明度的深色背景
4. Flexbox 工具增强
Flex item 1
Flex item 2
Flex item 3
六、自定义 Bootstrap 5
1. 使用 Sass 变量
// 修改主色调
$primary: #0074d9;
$danger: #ff4136;
// 修改字体
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
// 修改网格断点
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
// 导入 Bootstrap
@import "bootstrap";2. 选择性引入模块
// 只引入需要的 Bootstrap 模块
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/grid";
@import "bootstrap/buttons";
@import "bootstrap/utilities";七、Bootstrap 5 与 4 的主要区别
- 不再依赖 jQuery：所有插件使用纯 JavaScript 重写
- 改进的网格系统：新增
xxl断点 (1400px) - 新的实用工具类：如
gap、border-{width}等 - 表单控件重写：更一致的表单样式和验证
- 文档改进：更清晰的文档结构和搜索功能
- RTL 支持：内置从右到左布局支持
- 自定义属性：使用 CSS 自定义属性实现主题
八、常见问题解决
-
JavaScript 插件不工作：
- 确保使用
data-bs-*属性而不是data-* - 检查是否正确引入了 Popper.js（或使用 bundle 版本）
- 确保使用
-
样式问题：
- 确保使用了正确的文档类型
- 检查是否正确引入了
bootstrap-reboot.css
- 确保使用了正确的文档类型
-
图标不显示：
- 确保已引入 Bootstrap Icons 或其他图标库
- 检查网络连接是否正常
-
响应式问题：
- 确保 viewport meta 标签正确：
- 确保 viewport meta 标签正确：
-
浏览器兼容性问题：
- Bootstrap 5 放弃了对 Internet Explorer 的支持
- 确保使用现代浏览器（Chrome、Firefox、Edge、Safari 等）
Bootstrap 5 提供了更现代的 Web 开发体验，是构建响应式、移动优先网站的强大工具。