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

Прописываю в composer.json
"yiisoft/yii2-bootstrap": "~2.1.0@dev",
"yiisoft/yii2-swiftmailer": "~2.0.0",
"bower-asset/bootstrap": "4.0.0",
"bower-asset/font-awesome": "4.*",


Далее: "composer update --prefer-dist"

Скачиваются все файлы. В консоли обратил внимание на:
- Updating bower-asset/bootstrap (v3.3.7 => v4.0.0): Downloading (100%)
- Updating yiisoft/yii2-bootstrap (2.0.8 => 2.0.0-beta): Downloading (100%)

чёё?????

Все JS и CSS файлы у меня обновились до bootstrap4, но вот компоненты в vendor/yiisoft/yii2-bootstrap остались старые. В итоге при выводе меню или форм, html код остаётся для bootstrap3, а стили от bootstrap4 из-за чего не корректная верстка на страницах.

Если кто не понял о чем я, вот пример:
У форм в bootstrap4 сообщение об ошибке под input`ом имеет класс invalid-feedback, а в v3 help-block. И таких различий очень много.

Кто-нибудь может подсказать, можно как-то обновить компоненты до bootstrap4?
  • Вопрос задан
  • 864 просмотра
Пригласить эксперта
Ответы на вопрос 2
webinar
@webinar
Учим yii2: https://youtu.be/-WRMlGHLgRg
yiisoft/yii2-bootstrap - не заточен под 4-й bootstrap в принципе. Так что пока даже не пытайтесь.
Ответ написан
@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 со всеми примерами и объяснениями, если данный ответ наберет лайки
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
JobHelp.Center Санкт-Петербург
от 80 000 руб.
JobHelp.Center Санкт-Петербург
от 120 000 руб.
15 авг. 2018, в 23:38
300 руб./за проект
15 авг. 2018, в 22:39
60000 руб./за проект
15 авг. 2018, в 21:18
30000 руб./за проект