根本原因是开发者惯性套用默认类且定制不彻底，而非Bootstrap本身缺陷；真正差异在于打破默认层级、重写核心变量、删减冗余CSS并重构视觉层。
为什么用 Bootstrap 的网站看起来都差不多
根本原因不是 Bootstrap 本身“丑”，而是大量项目直接套用 .btn-primary、.card、container-fluid 这类默认类，又没动 $primary 颜色变量或重写 .navbar 的 box-shadow 和圆角。视觉趋同是使用惯性，不是框架宿命。
- 默认配色（蓝主色 + 灰文字 + 白背景）和间距比例（
$spacer: 1rem）被广泛复用，用户大脑会快速识别出“这是 Bootstrap 站” - 组件结构高度标准化：
<div class="alert alert-warning">渲染出的边框、内边距、图标位置几乎一致，设计差异空间被压缩 - 栅格系统强制使用
.row > .col-*嵌套，导致页面区块宽度节奏雷同，尤其在首页 hero section 和 features grid 中特别明显
定制化到底卡在哪几个地方
改得不彻底，反而更难看。真正拉开差距的不是“换颜色”，而是打破默认层级和语义约束。
- 覆盖样式时别只改
color或background，要动border-radius（默认.25rem）、transition（默认多数无动效）、font-weight（默认400/600切换生硬） - 删掉没用的 CSS：用
bootstrap/scss/bootstrap.scss源码时，注释掉不用的@import "components/alert"或"utilities/shadows"，否则白占体积还干扰调试 - 别在 HTML 里堆 class 应对样式不足，比如写
class="btn btn-lg btn-outline-secondary rounded-pill shadow-sm"—— 这种组合暴露的是缺乏原子类抽象，后期维护成本飙升
哪些场景下 Bootstrap 的设计局限会直接翻车
不是所有项目都适合“开箱即用”。当设计语言强调不对称、留白呼吸感、手绘质感或动态渐变时，Bootstrap 默认输出就是反向阻力。
- 品牌 VI 要求严格：比如金融类站点需深蓝+金+细线描边，而 Bootstrap 的
$blue: #0d6efd和默认border: 1px solid无法匹配，强行覆盖后易漏掉.form-select:focus或.dropdown-menu的细节 - 内容型长页面（如文档站、博客）：默认排版行高
$line-height: 1.5、段间距margin-bottom: 1rem在大段文字中显得拥挤，且缺少hyphens、text-wrap: balance等现代排版控制 - 需要深度动效的交互模块：比如 hover 时卡片上浮 + 内容淡入 + 图标旋转三阶联动，Bootstrap 的
.shadow-sm和.fade类颗粒度太粗，必须脱离 utility class 体系手写 CSS
要不要为“避免千篇一律”放弃 Bootstrap
没必要二选一。关键看团队是否愿意把 Bootstrap 当作“底盘”而非“皮肤”——用它的栅格和工具类打底，但把视觉层完全抽离出来重写。
- 保留
.container、.row、.col控制布局结构，删掉所有.btn-*、.card-*、.nav-*的默认样式，自己定义button { ... }和[role="tab"] { ... } - 用 Sass 变量接管一切可配置项：
$enable-shadows: false、$enable-rounded: true、$headings-font-weight: 700，而不是靠!important覆盖 - 警惕“Bootstrap 快速搭建”话术背后的代价：省下的 2 天开发时间，可能换来 3 周反复调整
.modal-backdropz-index 和.toast定位逻辑
