README

Bootstrap 4

为Bootstrap 4 CSS框架提供包装类，用于Yii和/或LUYA。

自Bootstrap 4以来，网格完全使用FLEX编写。检查浏览器支持以决定是否要在项目中使用Bootstrap 4。

本包包含以下组件

小部件
- ActiveForm小部件（与Bootstrap 4表单样式匹配的Yii ActiveForm小部件）
- 面包屑
- 链接分页器
- ActiveField小部件
- 网格视图/操作列
标签
- 工具提示
CMS块
- 图片
- 轮播图
资产文件（包含通过cdn预编译的bootstrap4 css和js文件）

安装

通过composer将包添加到您的项目中

composer require luyadev/luya-bootstrap4:^1.0

资产包

要使用Bootstrap的css和js文件，只需将以下代码注册到您的布局文件中

luya\bootstrap4\Bootstrap4Asset::register($this)

在布局文件的顶部部分。这将包含使用Bootstrap 4所需的所有css和js文件，并设置正确的依赖关系，即jQuery。

Active Form

构建表单的常用方法是使用Yii ActiveForm小部件，要匹配所有Bootstrap 4组件，可以像以下这样使用它

<?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() ?>

提示：为了用星号样式设置必填字段，您可以使用以下CSS

div.required label.control-label:after {
   content: " *";
   color: red;
}

luyadev / luya-bootstrap4

维护者

详细信息

README

Bootstrap 4

安装

资产包

Active Form