Тема форми Bootstrap 4

Дата оновлення перекладу 2023-09-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 при відображенні форм. Якщо ви хочете застосувати їх до всіх форм, визначте наступну конфігурацію:

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

Якщо ви хочете застосувати стилі Bootstrap до окремих форм, додайте тег 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() у вашому шаблоні, то ви отримаєте подвійно відображені повідомлення про помилку.

Tip

Так як помилки форм відображаються всередині <label>, ви можете використати CSS :after, щоб додати символ зірочки до ярлика, так як він буде відображений після повідомлення про помилку. Використайте натомість опції label або label_html .

Чекбокси та селективні кнопки

Для поля чекбоксу/кнопки вибору, виклик 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'} }) }}