Дата обновления перевода 2021-08-11

Тема формы Bootstrap 5

New in version 5.3: Тема форма Bootstrap 5 была представлена в Symfony 5.3.

Symfony предоставляет несколько способов интеграции Bootstrap в ваше приложение. Самый простой способ - добавить обязательные элементы <link> и <script> в ваши шаблоны (обычно вы добавляете их только в главный шаблон разметки, из которого расширяются другие шаблоны):

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

{# имейте в виду, что блоки в вашем шаблоне могут называться по-другому #}
{% block stylesheets %}
    <!-- Скопируйте CSS из https://getbootstrap.com/docs/5.0/getting-started/introduction/#css -->
{% endblock %}
{% block javascripts %}
    <!-- Скопируйте JavaScript из https://getbootstrap.com/docs/5.0/getting-started/introduction/#js -->
{% endblock %}

Если ваше приложение использует современные практики фронтенда, лучше использовать Webpack Encore и следовать этому туториалу, чтобы импортировать источники Bootstrap в ваши файлы SCSS и JavaScript.

Следующий шаг - сокнфигурировать приложение Symfony так, чтобы оно использовало стили Bootstrap 5 при отображении форм. Если вы хотите применить их ко всем формам, определите это в конфигурации:

  • YAML
    1
    2
    3
    # config/packages/twig.yaml
    twig:
        form_themes: ['bootstrap_5_layout.html.twig']
    
  • XML
     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="http://symfony.com/schema/dic/services"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:twig="http://symfony.com/schema/dic/twig"
        xsi:schemaLocation="http://symfony.com/schema/dic/services
            https://symfony.com/schema/dic/services/services-1.0.xsd
            http://symfony.com/schema/dic/twig
            https://symfony.com/schema/dic/twig/twig-1.0.xsd">
    
        <twig:config>
            <twig:form-theme>bootstrap_5_layout.html.twig</twig:form-theme>
            <!-- ... -->
        </twig:config>
    </container>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    8
    // config/packages/twig.php
    use Symfony\Config\TwigConfig;
    
    return static function(TwigConfig $twig) {
        $twig->formThemes(['bootstrap_5_layout.html.twig']);
    
        // ...
    };
    

Если вы предпочитаете применять стили Bootstrap к каждой форме отдельно, добавьте тег form_theme в шаблоны, где используются эти формы:

1
2
3
4
5
6
7
8
{# ... #}
{# этот тег применим только к формам, определенным в данном шаблоне #}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

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

Note

По умолчанию, весь ввод отображается с классом mb-3 в контейнере. Если вы переопределите опцию класса row_attr, mb-3 будет тоже переопределено и вам понадобится его ясно добавить.

Сообщения об ошибках

В отличие от темы Bootstrap 4, ошибки отображаются после элемента input. Однако, это все еще создает прочную связь между ошибкой и ее <input>, как того требует стандарт WCAG 2.0.

Чекбоксы и селективный выбор

Для чекбокса/селективного поля, вызов form_label() не отобразит ничего. В связи со внутренней работой Bootstrap, ярлык уже отображается form_widget().

Встраиваемые чекбоксы и селективный

Если вы хотите отображать свои чекбоксы или кнопки селективного выбора inline, вы можете добавить класс checkbox-inline или radio-inline, в зависимости от вашего типа Формы Symfony или конфигурации ChoiceType, к классу ярлыка.

  • PHP
     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',
            ],
        ]);
    
  • Twig
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    {{ form_row(form.myCheckbox, {
        label_attr: {
            class: 'checkbox-inline'
        }
    }) }}
    
    {{ form_row(form.myRadio, {
        label_attr: {
            class: 'radio-inline'
        }
    }) }}
    

Переключатели

Bootstrap 5 позволяет вам отображать чекбоксы как switches. Вы можете включить эту фнукцию в вашей Форме Symfony CheckboxType, добавив к ярлыку класс checkbox-switch:

  • PHP
    1
    2
    3
    4
    5
    $builder->add('myCheckbox', CheckboxType::class, [
        'label_attr' => [
            'class' => 'checkbox-switch',
        ],
    ]);
    
  • Twig
    1
    2
    3
    4
    5
    {{ form_row(form.myCheckbox, {
        label_attr: {
            class: 'checkbox-switch'
        }
    }) }}
    

Tip

Вы также можете отобразить ваши переключатели встроенными, просто добавив класс checkbox-inline к опции label_attr:

// ...
'label_attr' => [
    'class' => 'checkbox-inline checkbox-switch',
],
// ...

Caution

Переключатели работают только с чекбоксами.

Группа ввода

Чтобы создать группу ввода в вашей Форме Symfony, просто добавьте класс input-group к опции row_attr.

  • PHP
    1
    2
    3
    4
    5
    6
    $builder->add('email', EmailType::class, [
        'label' => '@',
        'row_attr' => [
            'class' => 'input-group',
        ],
    ]);
    
  • Twig
    1
    2
    3
    4
    5
    6
    {{ form_row(form.email, {
        label: '@',
        row_attr: {
            class: 'input-group'
        }
    }) }}
    

Caution

Если вы заполните опцию help в вашей форме, она также будет отображена, как часть группы.

Плавающие ярлыки

Чтобы отобразить поле ввода как плавающий ярлык, вы должны добавить label, placeholder и класс form-floating к опции row_attr вашего типа формы.

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

Caution

Вы должны предоставить label и placeholder, чтобы плавающие ярлыки работали корректно.

Доступность

Фреймворк Bootstrap 5 проделал хорошую работу для того, чтобы быть доступным функциональным вариациям вроде нарушений зрений или когнитивных способностей. Symfony пошла дальше, чтобы убедиться в том, что тема формы соответствует `стандарту WCAG 2.0`_.

Это не означает, что весь ваш сайт автоматически соответствует полному стандарту, но означает, что вы многое сделали для того, чтобы ваш проект был доступен всем пользователям.

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.