bootstrapv5菜鸟教程

很多人第一次接触前端框架，菜鸟是教程从Bootstrap开始的。v5这个版本，菜鸟跟v4比，教程变化不小。菜鸟最直接的教程一点：jQuery彻底没了。以前你写个下拉菜单，菜鸟得先引jQuery，教程再引popper，菜鸟最后才到bootstrap.js。教程现在？菜鸟只要一个bundle文件，原生JavaScript搞定。教程我上周帮朋友改一个后台页面，菜鸟他还在用v4的教程写法，一堆$(...).dropdown()，菜鸟我直接换成v5的data-bs-toggle属性，代码少了三分之一。

先别急着下载。v5的栅格系统还是12列，但断点变多了。默认有六个：xs、sm、md、lg、xl、xxl。你写col-6 col-md-4，意思是在手机上一半宽，平板及以上占三分之一。注意，v5不再默认使用col-xs-*，xs就是不加任何前缀的col-*。这个坑我踩过——把v4项目迁移到v5时，所有col-xs-12都得改成col-12，不然样式全乱。

容器和间距，别再用错

容器有.container、.container-fluid，还有.container-{ breakpoint}。比如.container-md表示在md断点之前是流式宽度，到了md就变成固定最大宽度。这个在v4里没有，挺实用。间距工具m-*和p-*还是老样子，但v5新增了gap工具类，配合flex用起来很顺手。我习惯在卡片列表的父元素上加d-flex gap-3，子元素之间自动有间距，不用再给每个卡片加margin。

按钮样式变化不大，但.btn-close替代了原来的.close。以前写关闭按钮是<button class="close"><span>×</span></button>，现在直接<button class="btn-close"></button>，连×符号都不用打。不过注意，这个按钮默认是黑色的，放在深色背景上得加btn-close-white。

JavaScript组件，数据属性是核心

v5的JS组件几乎都通过data-bs-*属性驱动。比如模态框：

<button data-bs-toggle="modal" data-bs-target="#myModal">打开</button> <div class="modal fade" id="myModal">...</div>

不需要写一行JS。如果你要动态控制，可以用new bootstrap.Modal(element)。但有个细节：v5的模态框默认点击背景不会关闭，得加data-bs-backdrop="static"或者data-bs-keyboard="false"。我见过有人抱怨“为什么点外面关不掉”，其实就是没看文档。

工具提示（tooltip）和弹出框（popover）需要手动初始化。官方文档明确写了：出于性能考虑，它们不是自动的。你得像这样：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) tooltipTriggerList.map(function (el) {  return new bootstrap.Tooltip(el) })

这段代码我背下来了，因为每个项目都要用。v5的tooltip还支持自定义HTML内容，但记得设置html: true，否则标签会被转义。

自定义和暗色模式

v5用Sass变量，但如果你不想编译，直接覆盖CSS变量也行。比如改主色：:root { --bs-primary: #ff6b6b; }。不过要注意，按钮的hover、active状态用的是计算后的颜色，只改一个变量可能不够。我一般还是走Sass路线，在_variables.scss里改$primary，然后重新编译。

暗色模式在v5.3里正式支持了。给<html>加data-bs-theme="dark"，整个页面自动切换。但你的自定义颜色得用var(--bs-body-bg)这类变量，不然暗色下会瞎眼。我试过把背景写死#fff，结果暗色模式一开，白底黑字，非常突兀。

最后说个实在的：v5的文档比v4好读，但例子太多，容易看花眼。我的建议是，先拿一个现成的starter模板，改改栅格和按钮，跑起来再说。别一上来就啃Sass源码——那是给自己找不痛快。Bootstrap本来就是为了快，别把它用成负担。