为 yii2 默认模板安装 bootstrap4

Question

尝试使用多个指南为 yii2 基本模板安装 bootstrap4。似乎没有按预期进行。

我做了什么：

1) cmd: composer create-project --prefer-dist yiisoft/yii2-app-basic // 安装 yii2

结果：yii2 基本模板使用 bootstrap3

2.1) cmd: cd yii2-app-basic // 转到 yii2 文件夹

2.2) cmd: composer require --prefer-dist yiisoft/yii2-bootstrap4 // 为 yii2

安装 bootstrap4

2.3) 更新了 \assets\AppAsset.php:

中的依赖项

public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap4\BootstrapAsset',
];

结果：<head> 中有两个 bootstrap <link> (bootstrap3 + bootstrap4)。导航栏看起来很糟糕：

3) 更新了 \views\layouts\main.php:

use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;

结果：small-screen 没有按钮图标的导航栏版本（在所有屏幕尺寸上）：

4) cmd: composer remove yiisoft/yii2-bootstrap // 删除 bootstrap3

结果："Class 'yii\bootstrap\Widget' not found"

5) 将 /yii2-app-basic/

中所有 *.php 文件的 "yii\bootstrap\" 更改为 "yii\bootstrap4\"

结果：同（3）

我做错了什么？

Answer 1

yii2 项目默认视图中的大多数小部件使用 yii\bootstrap\BootstrapAsset (bootstrap 3)。不要指望它会在您调用 yii\bootstrap4\BootstrapAsset.

时神奇地切换

您的步骤 2.3 只是将 bootstrap 4 添加到您使用小部件调用的所有其他库。

你能做什么：

1) 确保您正在调用 yii\bootstrap4\ 小部件而不是调用 yii\bootstrap\BootstrapAsset 或任何依赖于此 class 的资产。示例：

使用yii\bootstrap4\Html;
使用yii\bootstrap4\模态；
使用 yii\bootstrap4\Tabs;
使用yii\bootstrap4\ActiveForm;

2) 请记住，bootstrap 4 与 bootstrap 3 有不同的 classes。因此，如果您将它应用于默认视图，它很可能会中断，因为它没有一些来自其他版本的 classes，或者 js 表现不同。

Answer 2

导航栏的问题似乎是因为这个：

NavBar::begin([
    'brandLabel' => Yii::$app->name,
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse navbar-fixed-top', // THIS LINE
    ],
]);

它强制导航栏呈现为 <nav id="w0" class="navbar-inverse navbar-fixed-top navbar"> 而 bootstrap4 导航栏需要 navbar-expand 和配色方案 class 例如。 navbar-dark

所以我们可以：

1) 删除提到的 'class' 行 >> 导航栏将呈现为 <nav id="w0" class="navbar navbar-expand-lg navbar-light bg-light">

2) 或更新它：'class' => 'fixed-top navbar-expand-lg navbar-dark bg-dark',

同样适用于按钮 classes 等...只需将其更改为 bootstrap4 变体。

Answer 3

可能在项目根目录的 Widgets 文件夹中，在 Alert.php 文件中您需要更改：

class Alert extends \yii\bootstrap\Widget

到

class Alert extends \yii\bootstrap4\Widget

为 yii2 默认模板安装 bootstrap4

install bootstrap4 for yii2 default template

php

yii2

bootstrap-4