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.dev.org.tw/docs/4.4/getting-started/introduction/#css -->
{% endblock %}
{% block head_js %}
    <!-- Copy JavaScript from https://bootstrap.dev.org.tw/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.dev.org.tw/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:twig="https://symfony.dev.org.tw/schema/dic/twig"
    xsi:schemaLocation="https://symfony.dev.org.tw/schema/dic/services
        https://symfony.dev.org.tw/schema/dic/services/services-1.0.xsd
        https://symfony.dev.org.tw/schema/dic/twig
        https://symfony.dev.org.tw/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 貢獻者