关于引入Bootstrap的三个技术问题：组件、布局与样式覆盖

嘿，这些都是引入Bootstrap时非常典型的入门疑惑，我来给你逐一拆解清楚：

1. 引入Bootstrap后，未使用组件的部分会保持原有状态吗？ #

答案是不会完全保持。因为Bootstrap默认会引入一套全局基础样式（包含类似normalize.css的重置规则，加上它自己定义的基础元素样式），比如会修改body的默认margin、链接的默认颜色、列表的padding、标题的间距等等。这些全局样式会覆盖浏览器默认样式，同时也可能和你之前写的自定义基础样式产生冲突。

如果想尽量减少对原有样式的影响，你可以：

• 使用Bootstrap的自定义构建工具，只勾选需要的组件，取消「Reboot」（全局基础样式）选项
• 在引入Bootstrap的CSS文件之后，加载你自己的全局样式，用更高优先级的选择器覆盖Bootstrap的全局设置

2. 能不能只用Bootstrap组件，不用它的栅格系统？ #

当然可以！Bootstrap的组件（按钮、模态框、卡片、下拉菜单等）和栅格系统是完全解耦的。你完全可以只使用需要的组件样式，而不写任何栅格相关的类（比如container、row、col-*）。

甚至为了减少文件体积，你可以通过Bootstrap的自定义构建功能，只打包你需要的组件代码，把栅格相关的选项全部取消，这样加载的CSS文件会更轻量化。

3. 可以用普通CSS覆盖Bootstrap样式吗？必须用LESS吗？ #

绝对可以用普通CSS覆盖，完全不需要用LESS！Bootstrap的样式遵循常规的CSS优先级规则，只要你满足两个条件：

• 你的自定义CSS文件在Bootstrap的CSS文件之后引入
• 你的选择器优先级足够高（比如直接用组件类名加上父元素选择器，或者避免和Bootstrap的选择器优先级完全相同）

举个例子，如果你想修改Bootstrap按钮的圆角：

/* 这段代码放在Bootstrap CSS之后 */
.btn {
  border-radius: 8px; /* 替换Bootstrap默认的圆角值 */
}

如果觉得优先级不好控制，也可以用Bootstrap提供的CSS变量来修改，比如：

:root {
  --bs-btn-border-radius: 8px; /* 直接修改按钮圆角的全局变量 */
}

这种方式更优雅，不需要写覆盖样式，也不需要了解LESS。

内容的提问来源于stack exchange，提问作者Paul Taylor