Задать вопрос
  • Yii2 и bootstrap 4, как обновить компоненты yiisoft/yii2-bootstrap до bootstrap4?

    @grozzzny
    Люблю кодить
    Подключите расширение через композер:
    composer require grozzzny/depends "dev-master"

    Затем в assets добавьте

    class AppAsset extends AssetBundle
    {
        public $depends = [
            'yii\web\YiiAsset',
            'grozzzny\depends\bootstrap4\Bootstrap4Asset',
            'grozzzny\depends\bootstrap4\Bootstrap4PluginAsset',
        ];
    }


    Класс Bootstrap4Asset при инициализации подписывается на события View и при возможности удаляет bootsrap 3
    class Bootstrap4Asset extends AssetBundle
    {
        public $sourcePath = '@vendor/twbs/bootstrap/dist';
        public $css = [
            'css/bootstrap.css',
        ];
    
        public function init()
        {
            parent::init(); // TODO: Change the autogenerated stub
            Yii::$app->view->on(View::EVENT_AFTER_RENDER, function (){
                unset(Yii::$app->view->assetBundles['yii\bootstrap\BootstrapAsset']);
            });
            Yii::$app->view->on(View::EVENT_BEGIN_BODY, function (){
                unset(Yii::$app->view->assetBundles['yii\bootstrap\BootstrapAsset']);
            });
        }
    }


    Таким образом можно играться с layouts.. Например админка может спокойно работать на bootstrap 3, а фронтенд на bootstrap 4.

    Но это еще не все.. Есть нюансы..
    С модальным окном пришлось унаследоваться от модального класса bootstrap 3
    С валидацией инпутов, перенаследовал миксины bootstrapa 4 и дописал в миксин реализацию от bootsrapa 3. (SCSS)
    Виджет меню стал примерно таким:
    <?= Nav::widget([
        'options' => ['class' => 'navbar-nav d-flex justify-content-between w-100'],
        'items' => [
            [
                'label' => ''Услуги,
                'options' => ['class' => 'nav-item'],
                'linkOptions' => ['class' => 'nav-link'],
                'url' => ['services'],
                'active' => Yii::$app->controller->id == 'services'
            ],
     ....
            [
                'label' => 'Контакты',
                'options' => ['class' => 'nav-item'],
                'linkOptions' => ['class' => 'nav-link'],
                'active' => Yii::$app->controller->id == 'contacts',
                'url' => ['/contacts']
            ]
        ]
    ]);?>

    Хлебные крошки:
    <nav aria-label="breadcrumb" class="mb-3">
        <?= Breadcrumbs::widget([
            'links' => $this->params['breadcrumbs'],
            'options' => ['class' => 'breadcrumb'],
            'tag' => 'ol',
            'itemTemplate' => "<li class='breadcrumb-item'>{link}</li>\n",
            'activeItemTemplate' => "<li class=\"breadcrumb-item active\" aria-current=\"page\">{link}</li>\n",
        ])?>
    </nav>

    Пагинация:
    <nav aria-label="Page navigation">
                <?= LinkPager::widget([
                    'pagination' => $provider->pagination,
                    'linkContainerOptions' => ['class' => 'page-item'],
                    'linkOptions' => ['class' => 'page-link'],
                    'disabledListItemSubTagOptions' => ['tag' => 'a', 'class' => 'page-link']
                ]) ?>
            </nav>


    Alerts:
    <?= Alert::widget([
                'options' => ['class' => 'alert alert-danger show', 'role' => 'alert'],
                'body' => $message,
            ]) ?>


    В общем в этой сборке cms от easyiicms, с которой можно спокойно работать с bootstrap 4. Там смеси от less и scss. CMS чисто шаблонная и измененная.. для себя писал, но решать вам
    composer create-project --prefer-dist --stability=dev grozzzny/yiicms www dev-master


    Вот еще надстройка Material Design for Bootstrap 4 с модулями от https://mdbootstrap.com:

    class AppAsset extends AssetBundle
    {
        public $depends = [
            ..
            //Material Design for Bootstrap 4
            'grozzzny\depends\mdbootstrap\MDBootstrapAsset',
            'grozzzny\depends\mdbootstrap\MDBootstrapPluginAsset',
            ..
       ];
    }


    В assetManager в главной конфигурации можно указать надстройки:
    'assetManager' => [
                'bundles' => [
                    // Если решили переопределить scss:
                    'grozzzny\depends\mdbootstrap\MDBootstrapAsset' => [
                        'basePath' => '@webroot',
                        'baseUrl' => '@web',
                        'css' => ['css/mdbootstrap/mdb.css'], 
                    ],
                    // Если решили подключить доступные модули в коллекции MDB:
                    'grozzzny\depends\mdbootstrap\MDBootstrapPluginAsset' => [
                        'chart' => true,
                        'enhancedModals' => true,
                        'formsFree' => true,
                        'jqueryEasing' => true,
                        'scrollingNavbar' => true,
                        'velocity' => true,
                        'waves' => true,
                        'wow' => true,
                    ],
                ],
            ],


    Создам нормальный лаяулт под Bootstrap 4 со всеми примерами и объяснениями, если данный ответ наберет лайки
    Ответ написан
    Комментировать