Тема формы Bootstrap 4

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

Тема формы Bootstrap 4

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
{# ... #}
{# этот так применяется тоьлко к формам, определенным в этом шаблоне #}
{% 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() в вашем шаблоне, то вы получите дважды отображенные сообщения об ошибке.

Чекбоксы и кнопки выбора

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

Вводы файла

Вводы файла отображаются с использованием класса Bootstrap "custom-file", который скрывает название выбранного файла. Чтобы исправить это, используйте плагин JavaScript bs-custom-file-input, как рекомендуется в документации Формы Bootstrap.

Доступность

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

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

Пользовательские формы

Bootstrap 4 имеет функцию под названием "`custom forms`_". Вы можете включить ее в вашей Форме Symfony RadioType и CheckboxType добавив некоторые классы к ярлыку:

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'} }) }}