不能直接使用Bootstrap的CSS和JS。小程序运行环境不支持CSS变量、媒体查询、DOM操作等Bootstrap依赖特性，JS组件因缺乏浏览器API完全不可用；推荐使用weui-wxss、nutui-miniprogram等专为小程序设计的UI库。
Bootstrap 的 CSS 能不能直接用在小程序里
不能直接用。小程序的视图层运行在封闭的 WebView 或自研渲染引擎中，不支持 document、window、CSS 全局选择器（如 body、html）、@import 外部 CSS、或依赖 DOM 操作的 JS 插件——而 Bootstrap 5 的 CSS 依赖 :root 变量、prefers-reduced-motion 媒体查询，JS 部分强依赖 querySelector 和事件委托，这些在小程序里要么被忽略，要么报错。
实操建议：
- 可手动提取 Bootstrap 的部分工具类（如
.d-flex、.text-center）CSS 规则，转成小程序支持的 class 写法（注意去掉伪类、媒体查询嵌套、CSS 变量引用） - 避免引入
bootstrap.min.css整包——它会触发小程序构建警告，且大量规则无效（比如.btn:focus在小程序无 focus 状态） - 微信小程序的
style属性不支持 calc() 与自定义属性，所以像width: calc(100% - var(--bs-gutter-x))这类写法必须硬编码替换
Bootstrap 的 JS 组件（Modal / Dropdown）能不能调用
完全不能。小程序没有 addEventListener('click') 的全局捕获能力，也没有 new Popover() 这类构造函数执行环境；所有 Bootstrap JS 都基于浏览器 DOM API，而小程序使用的是 WXML + WXSS + 自定义组件生命周期，两者不可桥接。
常见错误现象：
- 在
onLoad中执行new bootstrap.Modal(...)→ 控制台报错bootstrap is not defined或Cannot read property 'Modal' of undefined - 试图用
require('bootstrap')引入 → 构建失败，因为模块依赖popper.js和浏览器全局对象 - 把 Bootstrap 的 data-* 属性（如
data-bs-toggle="modal"）写进 WXML → 完全无响应，小程序不解析这类指令
有没有轻量替代方案：类 Bootstrap 的小程序 UI 库
有，而且更合适。小程序生态里已有成熟、轻量、专为 WXML 设计的 UI 方案，它们不模拟 Bootstrap，而是适配小程序原生机制。
推荐选型逻辑：
- 微信小程序优先用
weui-wxss（官方基础样式库）或miniprogram-ui（社区维护，含完整组件和 TS 支持） - uni-app 项目可用
@dcloudio/uni-ui，它提供uni-badge、uni-collapse等组件，API 风格接近 Vue，但底层是跨端原生渲染 - 若坚持“类 Bootstrap”语义，可用
nutui的小程序版（@nutui/nutui-taro或@nutui/nutui-miniprogram），它提供nut-button、nut-grid等，类名前缀统一为nut-，不冲突也不需 hack
如果已有 Bootstrap 项目要迁移到小程序，怎么最小化重写
核心原则：放弃「复用 CSS 文件」，转向「复用设计系统」。颜色、间距、圆角、字体层级这些可以保留，但实现方式必须重写。
实操步骤：
- 用 Figma 或设计稿提取
--bs-primary、--bs-spacer等变量值，写成小程序app.wxss里的常量（如@primary-color: #0d6efd;） - 将 Bootstrap 的栅格系统（
.row/.col）转为 Flex 布局 +flex-basis百分比，例如.col-6→class="col-6"对应.col-6 { flex: 0 0 50%; } - 交互组件（如 Tab、Toast）不要尝试封装 Bootstrap JS，直接用小程序原生
wx.showToast或自定义组件，传参风格模仿 Bootstrap（如showToast({ title: '成功', icon: 'success' })）即可
真正难的不是样式还原，而是状态管理迁移：Bootstrap 依赖 class 切换（.show / .active），小程序得靠 data + setData 驱动，这个思维切换最容易卡住。
