watson / bootstrap-form
Laravel 5 的 Bootstrap 3 表单包装器。
Requires
- php: ^8.0
- illuminate/config: ~8.0|^9.0
- illuminate/session: ~8.0|^9.0
- illuminate/support: ~8.0|^9.0
- laravelcollective/html: ~6.0
Requires (Dev)
- mockery/mockery: ~1.4.1
- phpunit/phpunit: ~9.5
- dev-master
- 2.4.0
- 2.3.0
- 2.2.0
- 2.1.0
- 2.0.0
- 1.4.0
- 1.3.0
- 1.2.2
- 1.2.1
- 1.2.0
- 1.1.18
- 1.1.17
- 1.1.16
- 1.1.15
- 1.1.14
- 1.1.13
- 1.1.12
- 1.1.11
- 1.1.10
- 1.1.9
- 1.1.8
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.20
- 1.0.19
- 1.0.18
- 1.0.17
- 1.0.16
- 1.0.15
- 1.0.14
- 1.0.13
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 0.9.6
- 0.9.5
- 0.9.4
- 0.9.3
- 0.9.2
- 0.9.1
- 0.9.0
- 0.8.x-dev
- 0.8.6
- 0.8.5
- 0.8.4
- 0.8.3
- 0.8.2
- 0.8.1
- 0.8.0
This package is auto-updated.
Last update: 2022-08-09 03:05:20 UTC
README
这是一个用于在 Laravel 5 中简单地创建 Bootstrap 3 风格表单组的软件包。它扩展了正常的表单构建器,为您提供带有标签、错误消息和适当类使用的水平表单组。
简介
当您想要生成 Bootstrap 3 表单组时,只需在 BootstrapForm
门面处使用 Form
门面。
BootForm::text('username');
然后您将获得以下结果
<div class="form-group"> <label for="username" class="control-label col-md-2">Username</label> <div class="col-md-10"> <input type="text" name="username" class="form-control" /> </div> </div>
当然,如果该字段有错误,它甚至还会填充它们。
<div class="form-group has-error"> <label for="username" class="control-label col-md-2">Username</label> <div class="col-md-10"> <input type="text" name="username" class="form-control" /> <span class="help-block">The username field is required.</span> </div> </div>
安装
首先,使用 Composer 需求该软件包。
composer require watson/bootstrap-form
现在,将这些服务提供者添加到您的 config/app.php
文件中(如果您已经添加了 HtmlServiceProvider
,则不要添加)。
Collective\Html\HtmlServiceProvider::class, Watson\BootstrapForm\BootstrapFormServiceProvider::class,
最后,将这些添加到别名数组中(注意:Form 和 Html 必须在 BootstrapForm 之前列出)
'Form' => Collective\Html\FormFacade::class, 'HTML' => Collective\Html\HtmlFacade::class, 'BootForm' => Watson\BootstrapForm\Facades\BootstrapForm::class,
如果您喜欢更短的别名,可以自由地使用不同的别名来表示 BootstrapForm。
配置
BootstrapForm 有许多配置选项可用。运行以下 Artisan 命令以将配置选项发布到您的 config
目录
php artisan vendor:publish
水平表单大小
当使用水平表单时,您可以在以下位置指定左右列的默认大小。注意,您可以为每个列指定任意多的类以改善移动响应性,例如
col-md-3 col-sm-6 col-xs-12
显示错误
默认情况下,此软件包将仅显示每个字段的第一个验证错误。如果您想列出字段的全部验证错误,只需将此配置选项设置为 true。
使用
打开表单
BootstrapForm 改善了打开表单的过程,包括提供 Bootstrap 类以及管理基于模型的表单的模型。
// Passing an existing, persisted model will trigger a model // binded form. $user = User::whereEmail('example@example.com')->first(); // Named routes BootForm::open(['model' => $user, 'store' => 'users.store', 'update' => 'users.update']); // Controller actions BootForm::open(['model' => $user, 'store' => 'UsersController@store', 'update' => 'UsersController@update']);
如果将模型传递给 open 方法,则它将配置为使用 update
路由和 PUT
方法。否则它将指向 store
方法作为 POST
请求。这样,您可以使用相同的打开标签处理创建和保存。
// Passing a model that hasn't been saved or a null value as the // model value will trigger a `store` form. $user = new User; BootForm::open()
带有参数的路由
如果路由包含参数,您可以通过替换路由或操作名称字符串为数组来传递它们。第一个条目是路由名称的字符串,然后是您像传递给 route
函数一样传递的参数。
BootForm::open(['update' => ['posts.comments.create', $post]])
表单变体
有一些助手函数用于打开不同类型的Bootstrap表单。默认情况下,open()
将使用您在配置文件中设置的表单样式。这些助手函数与open()
方法接受相同的输入。
// Open a vertical Bootstrap form. BootForm::vertical(); // Open an inline Bootstrap form. BootForm::inline(); // Open a horizontal Bootstrap form. BootForm::horizontal();
如果您想更改表单的列,以偏离配置文件中的设置,您也可以通过$options
数组来设置它们。
BootForm::open(['left_column_class' => 'col-md-2', 'left_column_offset_class' => 'col-md-offset-2', 'right_column_class' => 'col-md-10']);
文本输入
以下是文本输入的各种方法。请注意,方法签名与Laravel表单构建器提供的方法签名相对接近,但需要一个表单标签参数。
// The label will be inferred as 'Username'. BootForm::text('username'); // The field name by default is 'email'. BootForm::email(); BootForm::textarea('profile'); // The field name by default is 'password'. BootForm::password();
复选框和单选按钮输入
复选框和单选按钮略有不同,并生成不同的标记。
查看配置选项的方法签名。
// A checked checkbox. BootForm::checkbox('interests[]', 'Laravel', 'laravel', true);
对于单选输入也是如此。
BootForm::radio('gender', 'Male', 'male');
多个复选框和单选按钮
通过简单地传递一个值/标签对的数组,您可以轻松生成一组复选框或单选按钮。
$label = 'this is just a label'; $interests = [ 'laravel' => 'Laravel', 'rails' => 'Rails', 'ie6' => 'Internet Explorer 6' ]; // Checkbox inputs with Laravel and Rails selected. BootForm::checkboxes('interests[]', $label, $interests, ['laravel', 'rails']); $genders = [ 'male' => 'Male', 'female' => 'Female' ]; // Gender inputs inline, 'Gender' label inferred. BootForm::radios('gender', null, $genders, null, true); // Gender inputs with female selected. BootForm::radios('gender', 'Gender', $genders, 'female');
提交按钮
// Pretty simple. BootForm::submit('Login');
关闭表单
// Pretty simple. BootForm::close();
标签
隐藏标签
您可以通过将值设置为false
来隐藏元素的标签。
// An input with no label. BootForm::text('username', false);
带HTML的标签
在标签内包含HTML代码
// A label with HTML code using array notation BootForm::text('username', ['html' => 'Username <span class="required">*</span>']); // A label with HTML code using HtmlString object BootForm::text('username', new Illuminate\Support\HtmlString('Username <span class="required">*</span>'));
帮助文本
您可以将help_text
选项传递给任何字段,以在渲染的表单组中附加Bootstrap帮助文本。
表单输入组(后缀和前缀)
为任何输入添加前缀和/或后缀 - 您可以添加文本、图标和按钮。
// Suffix button with 'Call' as label and success class to button {!! BootForm::text('tel', 'Phone', null, ['suffix' => BootForm::addonButton('Call', ['class' => 'btn-success'])] ) !!} // Prefix button with 'Call' as label and success class to button {!! BootForm::text('tel', 'Phone', null, ['prefix' => BootForm::addonButton('Call', ['class' => 'btn-success'])] ) !!} // Prefix icon (I put second parameter after <i class="fa fa-SECOND_PARAMETER"></i>) with 'dollar' as icon {!! BootForm::text('tel', 'Phone', null, ['prefix' => BootForm::addonIcon('dollar')] ) !!} // Prefix and suffix as text {!! BootForm::text('tel', 'Phone', null, ['prefix' => BootForm::addonText('1-'), 'suffix' => BootForm::addonIcon('phone')] ) !!} // Prefix and suffix with button {!! BootForm::text('tel', 'Phone', null, ['suffix' => BootForm::addonButton('Boom!', ['class' => 'btn-danger']), 'prefix' => BootForm::addonButton('Call', ['class' => 'btn-success'])] ) !!}