五、JavaScript插件
5.1 插件初始化
Bootstrap 5使用原生JavaScript，所有插件都可通过data-bs-*属性声明式初始化，也支持JavaScript API调用：
// 通过JavaScript初始化模态框
var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();
// 通过JavaScript初始化提示框
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// 通过JavaScript初始化弹出框
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
5.2 下拉菜单
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
下拉菜单
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">操作一</a></li>
<li><a class="dropdown-item" href="#">操作二</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">操作三</a></li>
</ul>
</div>
5.3 折叠面板
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample" aria-expanded="false"
aria-controls="collapseExample">
带折叠效果的按钮
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
这是折叠区域的内容。点击按钮可以显示/隐藏。
</div>
</div>
六、定制与主题
6.1 使用Sass定制
Bootstrap 5强制使用Dart Sass编译，不再支持LibSass。定制主要包含以下步骤：
覆盖默认变量：创建_default-variable-overrides.scss文件
使用现有变量定义新值：创建_variable-value-using-variable.scss文件
通过工具API生成自定义工具类：创建_utilities.scss文件
添加自定义样式：创建_custom-styles.scss文件
自定义主色调示例：
// _default-variable-overrides.scss
$primary: #0464a1; // 自定义主色调
$border-radius: .5rem; // 自定义圆角
$enable-shadows: true; // 启用阴影效果
// _utilities.scss - 自定义工具类
$utilities: (
"custom-width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
)
);
6.2 使用CSS变量
Bootstrap 5使用--bs-*变量实现运行时样式覆盖：
<style>
.custom-theme {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #28a745;
}
</style>
<div class="custom-theme">
<button class="btn btn-primary">自定义主题按钮</button>
</div>
七、可访问性
Bootstrap 5对可访问性（WCAG 2.1）的支持有了显著提升：
关键可访问性特性：
ARIA属性完善：模态框包含aria-modal="true"，下拉菜单包含正确的aria-expanded状态
焦点管理：模态框打开时自动捕获焦点，关闭时返回到触发元素
键盘导航：所有交互组件都支持键盘操作
屏幕阅读器支持：使用.visually-hidden类（替代v4的.sr-only）提供额外说明
<!-- 为屏幕阅读器提供额外内容 -->
<span class="visually-hidden">屏幕阅读器可见的隐藏文本</span>
<!-- 使用visually-hidden-focusable让键盘焦点时可读 -->
<a href="#" class="visually-hidden-focusable">跳转到主要内容</a>
八、性能优化建议
针对企业级项目的最佳实践：
按需引入：只导入需要的组件，减少CSS体积
使用PurgeCSS：构建时移除未使用的CSS，可将体积从120KB压缩至18KB
关键CSS内联：首屏样式直接嵌入HTML，减少渲染阻塞
CDN加速：使用官方CDN或自建CDN加速静态资源分发
懒加载组件：非首屏JavaScript组件按需初始化
// 按需导入组件
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// 只导入需要的组件
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/navbar";
// 不导入不需要的组件
Bootstrap 5代表了前端框架发展的一个重要里程碑——通过彻底移除jQuery依赖、全面拥抱Flexbox、增强可访问性和定制能力，它已经进化为一个更现代、更高效、更灵活的前端开发工具。
来源：
https://zlpow.cn/
