luyadev / luya-bootstrap4
Bootstrap4 Assets and Helper classes like ActiveForm for LUYA and Yii2.
Installs: 38 756
Dependents: 2
Suggesters: 0
Security: 0
Stars: 19
Watchers: 7
Forks: 13
Open Issues: 0
Type:luya-extension
Requires
- luyadev/luya-core: >=1.6
Requires (Dev)
- luyadev/luya-testsuite: ^2.0
README
Bootstrap 4
Wrapper classes for new Bootstrap 4 CSS Framework for Yii and/or LUYA.
As of Bootstrap 4, the grid is completely written in FLEX. Check the Browser Support to decide if you want to use Bootstrap 4 for your project.
This package contains the following components:
- Widgets
- ActiveForm Widget (Yii ActiveForm Widget matching the Bootstrap 4 form styles)
- Breadcrumbs
- LinkPager
- ActiveField Widget
- Grid View / Action Column
- Tags
- Tooltips
- CMS Blocks
- Image
- Carousel
- Asset File (contains precompiled bootstrap4 css and js files via cdn)
Installation
Add the package to your project via composer
composer require luyadev/luya-bootstrap4:^1.0
Assets Bundle
To use the css and js files of bootstrap just register the Bootstrap4Asset
into your layout file with the following code of your layout.php file:
luya\bootstrap4\Bootstrap4Asset::register($this)
At the top section of your layout file. This will include all required css and js files to use bootstrap 4 and set the right depenecy with jquery.
Active Form
A common way to build forms is the use thy Yii ActiveForm widget, to match all bootstrap4 components use it like following:
<?php use luya\bootstrap4\ActiveForm; use yii\helpers\Html; /* @var $this luya\web\View */ /* @var $form luya\bootstrap4\ActiveForm */ ?> <h1>Bootstrap 4 ActiveForm</h1> <?php $form = ActiveForm::begin() ?> <?= $form->field($model, 'username') ?> <?= $form->field($model, 'password')->passwordInput() ?> <?= Html::submitButton('Login', ['class' => 'btn btn-primary-outline']) ?> <?php ActiveForm::end() ?>
Tip: In order to style required fields with asterisks, you can use the following CSS:
div.required label.control-label:after { content: " *"; color: red; }