Подключаем Bootstrap 4 в Yii2

По умолчанию в фреймворк Yii2 встроен клиентский фреймворк Bootstrap 3 - го поколения и большинство web разработчиков стараются front-end обустроить более современными технологиями и дизайном. Для этого разработчики фреймворк Yii2 позаботились и разработали как отдельное дополнение для Yii2 - Bootstrap 4.

В данном примере мы будем использовать фреймворк Yii2 Advanced. На стороне frontend приложения мы будем использовать Bootstrap 4 поколения, а в админской части (backend) мы оставим Bootstrap 3.

Установка Bootstrap 4

В консольной строке выполните следующую команду:

php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4

или в файл composer.json в секцию "require": {…} добавьте запись:

"yiisoft/yii2-bootstrap4": "~2.0.6"

и после в консольной строке выполните следующую команду:

composer update

По завершению установки приступаем к подключению компонента.

Подключение

В файле frontend\assets\AppAsset.php находим и заменяем сроку 'yii\bootstrap\BootstrapAsset', на:

'yii\bootstrap4\BootstrapAsset',

В файле frontend\config\main.php в секцию 'components' => […] необходимо добавить следующий код:

        'assetManager' => [
            'class' => 'yii\web\AssetManager',
            'bundles' => [
				// Отключаем компонент Bootstrap 3 >
                'yii\bootstrap\BootstrapPluginAsset' => false, 
                'yii\bootstrap\BootstrapAsset' => false, 
				// <
				// Подключаем компонент Bootstrap 4 >
                'yii\bootstrap4\BootstrapAsset' => [
                    'css' => [
                        YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
                    ]
                ],
                'yii\web\JqueryAsset' => [
                    'js' => [
                        YII_ENV_DEV ? 'jquery.js' : 'jquery.min.js',
                    ]
                ],
                'yii\bootstrap4\BootstrapPluginAsset' => [
                    'js' => [
                        YII_ENV_DEV ? 'js/bootstrap.bundle.js' : 'js/bootstrap.bundle.min.js',
                    ]
                ],
				// <
            ],
        ],

Подключение frontend выполнено.

Правка основного шаблона

После установки и подключения компонента Bootstrap 4 для корректности отображения шаблона необходимо выполнить его правки. Для этого откроем файл базового шаблона frontend\views\layouts\main.php и внесем в него несколько изменений.

Находим строки:

use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;

Меняем на:

use yii\bootstrap4\Html;
use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;
use yii\bootstrap4\Breadcrumbs;

Находим опцию виджета NavBar и меняем его подключенные классы CSS с:

        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top',
        ],

на:

		'options' => [
            'class' => 'navbar navbar-expand-lg fixed-top navbar-dark bg-dark',
        ],

Далее находим опцию виджета Nav и заменяем:

'options' => ['class' => 'navbar-nav navbar-right'],

на:

'options' => ['class' => 'navbar-nav ml-auto'],

После в секции footer находим строки:

        <p class="pull-left">&copy; <?= Html::encode(Yii::$app->name) ?> <?= date('Y') ?></p>
		
        <p class="pull-right"><?= Yii::powered() ?></p>

и меняем в них классы на:

        <p class="float-left">&copy; <?= Html::encode(Yii::$app->name) ?> <?= date('Y') ?></p>
		
        <p class="float-right"><?= Yii::powered() ?></p>

Далее, необходимо заменить стандартный виджет Alert с базовым Bootstrap 3 на подключенный Bootstrap 4. Для этого оставим существующий виджет и создадим его копию в frontend приложении. Копируем папку widgets с директории common в frontend, а в базовом шаблоне перепишем пространство имен виджета Alert:

use common\widgets\Alert;

на:

use frontend\widgets\Alert;

Таким образом после всех правок код шаблона frontend\views\layouts\main.php должен выглядеть вот так:

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\bootstrap4\Html;
use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;
use yii\bootstrap4\Breadcrumbs;
use frontend\assets\AppAsset;
use frontend\widgets\Alert;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php $this->registerCsrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

<div class="wrap">
    <?php
    NavBar::begin([
        'brandLabel' => Yii::$app->name,
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar navbar-expand-lg fixed-top navbar-dark bg-dark',
        ],
    ]);
    $menuItems = [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
        ['label' => 'Contact', 'url' => ['/site/contact']],
    ];
    if (Yii::$app->user->isGuest) {
        $menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
        $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
    } else {
        $menuItems[] = '<li>'
            . Html::beginForm(['/site/logout'], 'post')
            . Html::submitButton(
                'Logout (' . Yii::$app->user->identity->username . ')',
                ['class' => 'btn btn-link logout']
            )
            . Html::endForm()
            . '</li>';
    }
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav ml-auto'],
        'items' => $menuItems,
    ]);
    NavBar::end();
    ?>

    <div class="container">
        <?= Breadcrumbs::widget([
            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
        ]) ?>
        <?= Alert::widget() ?>
        <?= $content ?>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="float-left">&copy; <?= Html::encode(Yii::$app->name) ?> <?= date('Y') ?></p>

        <p class="float-right"><?= Yii::powered() ?></p>
    </div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

Виджет Alert

В скопированном виджете frontend\widgets\Alert.php внесите правки:

namespace common\widgets;

на:

namespace frontend\widgets;

и замените строку:

echo \yii\bootstrap\Alert::widget([

на:

echo \yii\bootstrap4\Alert::widget([

ActiveForm, Html и т.д.

Необходимо помнить, наше приложение frontend уже переведено на поддержку работы Bootstrap 4, не забывайте менять использование дополнений в ваших приложениях там где присутствуют формы, хелперы и т.д.

Для примера, frontend\views\site\login.php в файле замените:

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

на:

use yii\bootstrap4\Html;
use yii\bootstrap4\ActiveForm;

Результат:

Таким образом мы успешно перевели работу frontend приложения на 4-ю версию Bootstrap, при этом приложение backend успешно осталось работать на 3-й версии.