如何自定义Bootstrap 5以仅使用网格、按钮及表单组件？

方案1：通过Bootstrap官方自定义构建工具裁剪 #

直接在Bootstrap的自定义构建界面，只勾选你需要的核心组件及必要依赖：

• 必选基础：Reboot（重置浏览器默认样式，组件依赖它）、Grid system
• 目标组件：Buttons（含按钮核心样式、变体）、Forms（可按需勾选表单控件、表单布局等子项）
• 可选补充：如果需要组件的间距、对齐等辅助样式，勾选Utilities下的对应子项（比如Spacing、Display）
  完成选择后下载定制后的CSS文件，体积会远小于完整的bootstrap.min.css。

方案2：基于Sass源码按需导入（适合前端工程化项目） #

如果你的项目用了Sass，可以直接引入Bootstrap源码的指定模块，精准控制打包内容：

1. 先安装Bootstrap：

npm install bootstrap

2. 在你的自定义Sass文件中，只导入必要的依赖和目标组件：

// 导入Bootstrap核心工具（函数、变量、混合宏）
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/reboot";

// 导入需要的组件
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";
// 若需要按钮变体，可追加导入
// @import "../node_modules/bootstrap/scss/buttons-outline";
@import "../node_modules/bootstrap/scss/forms";
// 按需追加表单子组件，比如复选框、输入组等
// @import "../node_modules/bootstrap/scss/form-check";
// @import "../node_modules/bootstrap/scss/input-group";

3. 编译该Sass文件为CSS，最终产出的文件只包含你选中的组件样式，体积可控。

注意事项 #

• 不要忽略Reboot，很多组件的默认样式依赖它来消除浏览器差异，缺失会导致组件显示异常。
• 如果使用方案2，确保你的构建工具（比如Webpack、Vite）配置了Sass编译能力。

内容的提问来源于stack exchange，提问作者Nikita Gupta