Yii2框架从Bootstrap 4降级至Bootstrap 3的技术咨询

我懂你现在的困扰——尝试切换到Bootstrap 4后，Yii2的yii\bootstrap\Modal组件没法正常工作，想要回退到稳定的Bootstrap 3但还没完成降级。别着急，跟着下面的步骤一步步来就能搞定：

1. 修正Composer依赖配置 #

首先打开项目根目录的composer.json文件，调整Bootstrap相关的依赖项：

• 把原来的"yiisoft/yii2-bootstrap": "~2.1.0@dev"替换为"yiisoft/yii2-bootstrap": "~2.0.0"（这个版本分支专门对应Bootstrap 3）
• 如果你之前直接添加过twbs/bootstrap的依赖，也要把它改成"twbs/bootstrap": "~3.3.0"，确保不会意外拉取Bootstrap 4版本

2. 执行Composer更新命令 #

在项目根目录的终端里运行以下命令，精准更新相关依赖，避免影响其他无关包：

composer update yiisoft/yii2-bootstrap twbs/bootstrap

如果遇到依赖冲突，可以先清除Composer缓存再重试：

composer clear-cache
composer update yiisoft/yii2-bootstrap twbs/bootstrap

要是冲突仍然存在，可以尝试加上--with-all-dependencies参数（注意：这个会更新相关的所有依赖，谨慎使用）。

3. 恢复视图层的Bootstrap 3兼容代码 #

Bootstrap 4和3的组件语法、类名有不少差异，如果你之前为了适配Bootstrap 4修改过视图里的Modal或其他组件代码，需要改回Bootstrap 3的写法。比如Yii2的yii\bootstrap\Modal组件在2.0.x版本下，会自动生成符合Bootstrap 3规范的结构，所以要确保没有手动修改过组件生成的HTML代码。

举个Bootstrap 3标准Modal的结构参考：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal标题</h4>
            </div>
            <div class="modal-body">
                <!-- 内容区域 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

4. 清除应用及浏览器缓存 #

最后一步很关键，避免旧资源残留导致问题：

• 运行Yii2的控制台命令清除应用缓存：

  ./yii cache/flush-all
  

  如果你没有启用控制台访问，也可以通过web路由访问（需要确保路由权限开放）：index.php?r=cache/flush-all
• 清除浏览器的缓存（快捷键一般是Ctrl+Shift+Del），确保加载的是Bootstrap 3的CSS和JS文件。

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