但问题也在这儿。Bootstrap的栅格是12列制，你写`col-md-4`就是占三分之一。听起来合理，实际用起来经常别扭。比如那个烘焙网站，产品图想做成三列，每列宽度相等，但图片尺寸不统一，有的横有的竖。用栅格硬套，竖图上下留白一大截，横图又挤得慌。后来我干脆把那一块改成flex布局，自己写了几行CSS才顺眼。

还有导航栏。Bootstrap的navbar组件确实省事，`navbar-expand-lg`一加，响应式折叠菜单自动就有了。可默认样式太“Bootstrap”了——圆角、阴影、那个标志性的汉堡图标。你如果不改，别人一眼就能看出来：“哦，这网站用Bootstrap做的。”我见过不少小企业站，导航栏长得一模一样，就颜色换了下。省事是省事，但少了点自己的味道。

说到响应式，Bootstrap的断点设计挺实用。`sm`、`md`、`lg`、`xl`、`xxl`，对应不同屏幕宽度。你写`col-12 col-md-6 col-lg-4`，手机上一列，平板两列，桌面三列。这个逻辑清晰，新手也能很快上手。不过实际项目里，断点值不一定合适。Bootstrap默认`md`是768px，但有些设计在700px左右就需要变布局。你得去改Sass变量重新编译，或者写媒体查询覆盖。这时候就有点麻烦——本来图省事，结果还得折腾。

我自己的博客用过一段时间Bootstrap。刚开始觉得挺爽，后来发现CSS文件里一堆用不上的类。Bootstrap完整版压缩后也有几十KB，里面很多组件我根本没碰。虽然可以定制，只勾选需要的部分，但那个定制页面加载慢，选来选去也费时间。后来我换成了纯手写CSS，文件小了一半，加载快了不少。当然，这是我个人选择，不代表Bootstrap不好。

有个细节值得说：Bootstrap 5去掉了jQuery依赖。以前用Bootstrap 4，想做个模态框或者下拉菜单，得先引入jQuery，再引Bootstrap的JS。现在纯原生JS，体积小了，也不用担心jQuery版本冲突。这个改动挺实在。我试过用Bootstrap 5的modal组件，写个`data-bs-toggle="modal"`就能触发，确实方便。

不过，用Bootstrap做网站，最容易犯的错是“堆类名”。一个`