Тема форми Bootstrap 4

Дата оновлення перекладу 2022-05-13

Тема форми 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']
    

        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_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) {
    $twig->formThemes(['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() у вашому шаблоні, то ви отримаєте подвійно відображені повідомлення про помилку.

Для користувацької селективної кнопки, використовуйте 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'} }) }}
    

Тема форми Bootstrap 4

Тема форми Bootstrap 4

Повідомлення про помилку

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

Введення файлу

Доступність

Користувацькі форми