seeds-std/bootstrap-form

此包已被废弃,不再维护。未建议替代包。

Laravel 5 的 Bootstrap 3 表单包装器。

1.3.0 2019-10-21 10:27 UTC

README

Build Status Circle CI Total Downloads Latest Stable Version Latest Unstable Version License

这是一个用于在 Laravel 5 中简单地创建 Bootstrap 3 风格表单组的包。它扩展了正常的表单构建器,为您提供带有标签、错误信息和适当类使用的水平表单组。

简介

当您想要生成 Bootstrap 3 表单组时,只需在 Form 门面处使用 BootstrapForm 门面即可。

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.json 中,用 seeds-std/bootstrap-form 替换 watson/bootstrap-form。

{
    "repositories": {
        "watson/bootstrap-form": {
            "type": "vcs",
            "url": "https://github.com/seeds-std/bootstrap-form"
        }
    }
}

然后,使用 Composer 需求此包。

composer require watson/bootstrap-form:dev-master

现在,将这些服务提供者添加到您的 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 方法传递了模型,则它将配置为使用带有 PUT 方法的 update 路由。否则,它将指向作为 POST 请求的 store 方法。这样,您可以使用相同的打开标签来处理创建和保存。

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

表单变体

有一些辅助工具用于打开不同类型的 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'])] ) !!}