bootstrap5菜鸟教程

Bootstrap 5 在 2021 年正式发布，菜程最大的鸟教变化是彻底甩掉了 jQuery。我当时的菜程项目还在用 4.x，升级那天跑了三遍构建脚本才确认没漏掉依赖。鸟教官方文档里有一句话写得很直白：“Bootstrap 5 不再支持 Internet Explorer。菜程”这意味着你可以放心用 CSS 自定义属性、鸟教Flexbox 和 Grid，菜程不用再为老浏览器写降级代码。鸟教

引入方式有两种。菜程CDN 最省事，鸟教把下面两行扔进 <head> 就行：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> 

注意那个 bundle 版本，菜程它把 Popper.js 也打包进去了，鸟教下拉菜单和提示框才能正常工作。菜程如果你用 npm，鸟教那就 npm i bootstrap@5.3.3，菜程然后在入口文件里 import 'bootstrap/dist/css/bootstrap.min.css'。我习惯把 JS 放在 </body> 前，避免阻塞渲染。

栅格系统：从 .row 和 .col 开始

Bootstrap 5 的栅格还是 12 列，但断点名称变了。col-md-6 表示在中等屏幕（≥768px）上占一半宽度。小屏幕默认堆叠，不需要额外写 col-12。我见过有人把 row 直接塞进 container 里，结果左右留白没了——row 自带负 margin，必须放在 container 或 container-fluid 内部。

一个常见的三栏布局：

<div class="container"> <div class="row"> <div class="col-md-4">左侧</div> <div class="col-md-4">中间</div> <div class="col-md-4">右侧</div> </div> </div> 

如果你想要不等宽，用 col-md-3、col-md-6、col-md-3 就行。栅格还能嵌套，在 col 里再放一个 row，内层会按外层宽度重新分 12 份。我调试响应式时习惯打开浏览器开发者工具，直接拖拽视口宽度，看断点切换是否顺滑。

组件：按钮、卡片和导航栏

按钮的类名从 btn-default 改成了 btn-secondary，btn-primary 还是蓝色。加 btn-outline-* 得到描边样式。我常用 btn-lg 和 btn-sm 控制尺寸，但别在同一个按钮上同时用，会打架。

卡片组件在 5.x 里去掉了 card-block，统一用 card-body。下面这个结构我至少写过五十遍：

<div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">标题</h5> <p class="card-text">一些描述文字。</p> <a href="#" class="btn btn-primary">点我</a> </div> </div> 

导航栏需要 navbar、navbar-expand-lg 和 navbar-light（或 navbar-dark）三个类配合。折叠按钮的 data-bs-toggle="collapse" 和 data-bs-target 必须指向同一个选择器。我见过有人把 data-bs- 写成 data-，结果点击没反应——Bootstrap 5 把所有 data 属性都加了 bs 前缀。

工具类：边距、颜色和显示控制

m-3 是 margin 1rem，p-3 是 padding 1rem。mt-5 表示 margin-top 3rem。这些工具类在快速原型阶段特别顺手，但别滥用。我接手过一个项目，整个页面全是 mt-2 mb-4 px-5，后来改设计时差点把键盘砸了。

颜色方面，text-primary、bg-success 这些语义类直接可用。想自定义？在 CSS 里覆盖 --bs-primary 变量就行，不用重新编译 Sass。显示控制用 d-none、d-md-block 这类组合，比写媒体查询快得多。

最后说个坑：Bootstrap 5 的 container 默认有左右 padding，如果你在 row 里直接放内容而不加 col，会看到奇怪的溢出。记住栅格三件套——container、row、col——缺一不可。官方示例里那些整齐的布局，都是按这个规矩来的。