Подключите расширение через композер:
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 со всеми примерами и объяснениями, если данный ответ наберет лайки
Средний
