如何将现有Angular应用升级至Bootstrap 4.0.0

嘿，我帮你整理了一套规范的Angular应用升级到Bootstrap 4.0.0的流程，尽量帮你避开那些Stack Overflow上提到的常见坑，毕竟稳定版也难免有一些已知问题需要提前留意：

• 先给项目做个备份！不管升级看起来多简单，要么用Git打个版本标签（git tag pre-bootstrap4-upgrade），要么直接复制整个项目文件夹，出问题能快速回滚，别偷懒~
• 确认你的Angular版本兼容性：Bootstrap 4.0.0要求Angular 4及以上版本，运行ng version就能查看当前版本，如果低于Angular 4，得先把Angular升级到兼容版本再处理Bootstrap的升级。
• 梳理现有依赖：检查项目里有没有Bootstrap相关的包（比如旧版bootstrap）、依赖库（比如popper.js），还有第三方Angular Bootstrap组件库（比如ng-bootstrap），记下来它们的当前版本，避免冲突。

• 先卸载旧版Bootstrap（如果项目里已经安装了）：

  npm uninstall bootstrap
  # 或者用yarn的话：
  yarn remove bootstrap
  

• 安装Bootstrap 4.0.0和必需的依赖：Bootstrap 4.0.0依赖旧版Popper.js（注意是popper.js，不是新版的@popperjs/core，4.0.0不兼容新版），运行下面的命令：

  npm install bootstrap@4.0.0 popper.js@1.16.1 --save
  # yarn版本：
  yarn add bootstrap@4.0.0 popper.js@1.16.1
  

• 配置Angular CLI（如果用的是CLI项目）：打开angular.json，在styles数组里添加Bootstrap的CSS文件，在scripts数组里添加Popper.js和Bootstrap的JS文件，注意顺序：Popper.js必须放在Bootstrap.js前面：

  "styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]
  

Bootstrap 4和3的差异不小，这里列最容易踩坑的适配点：

• 网格系统调整：
  • 移除了col-xs-*类，换成col-*来表示超小屏幕的列
  • 原有的pull-*/push-*列偏移类被替换成order-*，或者直接用Flexbox相关的类来控制顺序
  • 网格间距（gutter）从15px改成了1rem，如果需要保留旧的间距，得自定义CSS或者Sass变量
• 组件类名变更：
  • 默认按钮类btn-default换成btn-secondary
  • 面板组件（panel/panel-heading/panel-body）被移除，改用卡片组件card/card-header/card-body
  • 导航栏navbar-default换成navbar-light或navbar-dark，配合bg-light/bg-dark设置背景色
  • 表单里的form-control-static换成form-control-plaintext，表单行布局用form-row替代旧的form-inline
• JS组件行为变化：
  • 模态框的show()/hide()方法现在返回Promise，如果你在Angular里用代码控制模态框，要注意异步逻辑
  • 下拉菜单的触发逻辑依赖Popper.js的正确加载，要是遇到下拉没反应，先检查Popper的配置
• 自定义样式适配：如果项目里有基于Bootstrap 3的自定义CSS或Sass，要检查有没有依赖旧的变量名（比如$brand-primary换成了$primary）或类名，避免样式失效。

升级后一定要做全面测试，别漏了这些点：

• 布局测试：检查所有页面的网格布局、响应式表现，特别是不同屏幕尺寸下有没有错位、元素溢出的情况
• 交互测试：逐个测试模态框、下拉菜单、折叠面板、轮播这些JS驱动的组件，看有没有弹窗不显示、点击无响应的问题
• 样式细节：检查按钮颜色、表单样式、卡片内边距这些细节，确保符合预期
• 控制台检查：打开浏览器开发者工具的控制台，看有没有Popper.js或Bootstrap.js的加载报错，以及Angular的变更检测错误

Stack Overflow上很多人提到过4.0.0的这些坑，提前预防：

• 模态框页面滚动问题：打开模态框后页面依然能滚动，添加自定义CSS修复：

  .modal-open {
    overflow: hidden;
  }
  

• 移动端下拉菜单无响应：确保加载的是Popper.js的umd版本（也就是我们安装的popper.js@1.16.1里的dist/umd/popper.min.js），不要用其他版本
• 卡片内边距过大：如果觉得Bootstrap 4的卡片内边距比3的面板大，可以自定义Sass变量：

  $card-spacer-y: 15px; // 原默认是1.25rem
  $card-spacer-x: 15px; // 原默认是1.25rem
  

• 表单验证样式冲突：4.0.0的is-valid/is-invalid类可能和旧项目的自定义验证样式冲突，检查CSS优先级，必要时调整自定义样式的选择器

内容的提问来源于stack exchange，提问作者Aakash Kumar