Bootstrap 5 表单主题

编辑此页

Symfony 提供了几种将 Bootstrap 集成到应用程序中的方法。最直接的方法是在您的模板中添加所需的 <link> 和 <script> 元素（通常您只将它们包含在主布局模板中，其他模板从该模板扩展）

1
2
3
4
5
6
7
8
9
{# templates/base.html.twig #}

{# beware that the blocks in your template may be named different #}
{% block stylesheets %}
    <!-- Copy CSS from https://bootstrap.ac.cn/docs/5.0/getting-started/introduction/#css -->
{% endblock %}
{% block javascripts %}
    <!-- Copy JavaScript from https://bootstrap.ac.cn/docs/5.0/getting-started/introduction/#js -->
{% endblock %}

如果您的应用程序使用现代前端实践，则最好使用 Webpack Encore 并按照 本教程 将 Bootstrap 的源文件导入到您的 SCSS 和 JavaScript 文件中。

下一步是配置 Symfony 应用程序，以便在渲染表单时使用 Bootstrap 5 样式。如果您想将它们应用于所有表单，请定义此配置

1
2
3
# config/packages/twig.yaml
twig:
    form_themes: ['bootstrap_5_layout.html.twig']

如果您希望在表单的基础上应用 Bootstrap 样式，请在这些表单使用的模板中包含 form_theme 标签

1
2
3
4
5
6
7
8
{# ... #}
{# this tag only applies to the forms defined in this template #}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block body %}
    <h1>User Sign Up:</h1>
    {{ form(form) }}
{% endblock %}

注意

默认情况下，所有输入都使用容器上的 mb-3 类进行渲染。如果您覆盖 row_attr 类选项，则 mb-3 也将被覆盖，您将需要显式添加它。

错误消息

与 Bootstrap 4 主题 不同，错误是在 input 元素之后渲染的。但是，这仍然使错误与其 <input> 之间建立牢固的联系，这是 WCAG 2.0 标准的要求。

复选框和单选按钮

对于复选框/单选按钮字段，调用 form_label() 不会渲染任何内容。由于 Bootstrap 内部机制，标签已由 form_widget() 渲染。

内联复选框和单选按钮

如果您想以 内联方式渲染复选框或单选按钮字段，您可以将 checkbox-inline 或 radio-inline 类（取决于您的 Symfony 表单类型或 ChoiceType 配置）添加到标签类。

1
2
3
4
5
6
7
8
9
10
11
$builder
    ->add('myCheckbox', CheckboxType::class, [
        'label_attr' => [
            'class' => 'checkbox-inline',
        ],
    ])
    ->add('myRadio', RadioType::class, [
        'label_attr' => [
            'class' => 'radio-inline',
        ],
    ]);

开关

Bootstrap 5 允许将复选框渲染为 开关。您可以通过将 checkbox-switch 类添加到标签来在 Symfony 表单 CheckboxType 上启用此功能

1
2
3
4
5
$builder->add('myCheckbox', CheckboxType::class, [
    'label_attr' => [
        'class' => 'checkbox-switch',
    ],
]);

提示

您还可以通过简单地在 label_attr 选项上添加 checkbox-inline 类来以内联方式渲染开关

1
2
3
4
5
// ...
'label_attr' => [
    'class' => 'checkbox-inline checkbox-switch',
],
// ...

警告

开关仅适用于复选框。

输入组

要在 Symfony 表单中创建 输入组，只需将 input-group 类添加到 row_attr 选项。

1
2
3
4
5
6
$builder->add('email', EmailType::class, [
    'label' => '@',
    'row_attr' => [
        'class' => 'input-group',
    ],
]);

警告

如果您填写表单的 help 选项，它也将作为组的一部分渲染。

浮动标签

要使用 浮动标签渲染输入字段，您必须添加 label、placeholder 和 form-floating 类到表单类型的 row_attr 选项。

1
2
3
4
5
6
7
8
9
$builder->add('name', TextType::class, [
    'label' => 'Name',
    'attr' => [
        'placeholder' => 'Name',
    ],
    'row_attr' => [
        'class' => 'form-floating',
    ],
]);

警告

您必须提供 label 和 placeholder 才能使浮动标签正常工作。

可访问性

Bootstrap 5 框架在使其可访问性方面做得很好，适用于功能变体，如视力障碍和认知能力。Symfony 更进一步，以确保表单主题符合 WCAG 2.0 标准。

这并不意味着您的整个网站自动符合完整标准，但这确实意味着您在为所有用户创建设计方面已经取得了很大进展。

这项工作，包括代码示例，根据 Creative Commons BY-SA 3.0 许可获得许可。
目录
    版本