Bootstrap 4 表单主题

编辑此页

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 head_css %}
    <!-- Copy CSS from https://bootstrap.ac.cn/docs/4.4/getting-started/introduction/#css -->
{% endblock %}
{% block head_js %}
    <!-- Copy JavaScript from https://bootstrap.ac.cn/docs/4.4/getting-started/introduction/#js -->
{% endblock %}
    

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

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

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

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        <!-- config/packages/twig.xml -->
<?xml version="1.0" encoding="UTF-8" ?>
<container xmlns="https://symfony.ac.cn/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:twig="https://symfony.ac.cn/schema/dic/twig"
    xsi:schemaLocation="https://symfony.ac.cn/schema/dic/services
        https://symfony.ac.cn/schema/dic/services/services-1.0.xsd
        https://symfony.ac.cn/schema/dic/twig
        https://symfony.ac.cn/schema/dic/twig/twig-1.0.xsd">

    <twig:config>
        <twig:form-theme>bootstrap_4_layout.html.twig</twig:form-theme>
        <!-- ... -->
    </twig:config>
</container>
    

        1
2
3
4
5
6
7
8
        // config/packages/twig.php
use Symfony\Config\TwigConfig;

return static function (TwigConfig $twig): void {
    $twig->formThemes(['bootstrap_4_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_4_layout.html.twig' %}

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

错误消息

表单错误呈现在内部 <label> 元素，以确保错误及其 <input> 之间有很强的关联，这是 WCAG 2.0 标准要求的。为了实现这一点，form_errors() 在内部由 form_label() 调用。如果您在模板中调用 form_errors()，您将获得两次显示的错误消息。

提示

由于表单错误呈现在 <label> 内部，因此您不能使用 CSS :after 将星号附加到标签，因为它会在错误消息之后显示。请改用 label 或 label_html 选项。

对于自定义单选按钮，使用 radio-custom；
对于自定义复选框，使用 checkbox-custom；
为了使用开关而不是复选框，请使用 switch-custom。

        1
2
3
        {{ form_row(form.myRadio, {label_attr: {class: 'radio-custom'} }) }}
{{ form_row(form.myCheckbox, {label_attr: {class: 'checkbox-custom'} }) }}
{{ form_row(form.myCheckbox, {label_attr: {class: 'switch-custom'} }) }}
    

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

版本

Bootstrap 4 表单主题

错误消息

复选框和单选按钮

文件输入

可访问性

自定义表单

成为 Symfony 贡献者