luyadev/luya-bootstrap4

Bootstrap4 Assets and Helper classes like ActiveForm for LUYA and Yii2.

Installs: 15 960

Dependents: 2

Suggesters: 0

Security: 0

Stars: 17

Watchers: 6

Forks: 8

Open Issues: 1

Type:luya-extension

1.0.3 2019-10-22 10:25 UTC

This package is auto-updated.

Last update: 2020-03-22 12:05:48 UTC


README

LUYA Logo

Bootstrap 4

LUYA Build Status Test Coverage Latest Stable Version Total Downloads Slack Support

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;
}