不能在小程序中直接使用Bootstrap 5，因其CSS依赖的@media、:root变量、@import等语法不被WXML渲染层支持，JS组件又因缺失document等DOM API而必然报错，底层架构不兼容导致样式失效与交互崩溃。
Bootstrap 5 CSS 在小程序里根本不会生效
不能靠“引入就完事”。微信小程序的 WXML 渲染层不支持 @media、@import、CSS 变量（:root）、全局选择器（如 html、body），而 Bootstrap 5 的 CSS 正严重依赖这些。哪怕你把 bootstrap.min.css 放进 app.wxss 并用 @import 引入，控制台大概率报 Unknown at rule @import，按钮没圆角、栅格全塌、响应式断点彻底失灵——这不是加载失败，是语法被直接忽略。
强行 import 会触发运行时 JS 错误
Bootstrap 的 JS 组件（比如 Modal、Toast）依赖 document.querySelector 和原生 DOM 操作，但小程序逻辑层（App Service）和视图层（WXML）完全隔离，没有 document 对象。一旦你在页面 JS 中 import 'bootstrap.bundle.min.js' 并尝试 new bootstrap.Modal(...)，立刻抛出 Cannot read property 'querySelector' of undefined —— 这不是配置问题，是底层架构不兼容。
别信“改写 class 名就能用”的说法
有人试过把 .btn 手动改成 .my-btn 再复制规则到 page.wxss，短期看似可用，但很快暴露问题：
微信小程序 TabBar 图标生成技能，使用 Python PIL 绘制简约几何图标（未选中灰、选中绿），自动写入 app.json 配置。适用于“生成 tabBar 图标”、“底部菜单栏图标”、“tab 图标”等指令。
- 所有依赖媒体查询的类（如
.col-md-6）无法响应屏幕宽度变化，因为小程序不执行@media -
.d-none、.text-center等 utility 类在不同平台渲染结果不一致，WXML 的样式作用域和浏览器完全不同 - 一旦升级 Bootstrap 版本，所有手动搬运的 CSS 都得重审，且无法享受官方修复和新特性
Skyline 渲染引擎也不能救 Bootstrap
即使你启用了微信开发者工具的 Skyline 模式（需基础库 ≥2.31.1），它只是提升了 WXML 渲染性能和调试能力，并未开放 document API 或放宽 CSS 限制。Bootstrap 的核心机制仍被阻断。你可能会看到部分静态样式“偶然”显示，但只要涉及 JS 初始化、动态 class 切换或响应式行为，就会立即失效。真正能用的，只有纯 CSS 规则中不带 @ 开头、不依赖伪类/伪元素、不嵌套、不使用变量的极小片段——而这已失去 Bootstrap 的意义。
立即学习“前端免费学习笔记（深入）”；
