Bootstrap 5 表單主題
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 stylesheets %}
<!-- Copy CSS from https://bootstrap.dev.org.tw/docs/5.0/getting-started/introduction/#css -->
{% endblock %}
{% block javascripts %}
<!-- Copy JavaScript from https://bootstrap.dev.org.tw/docs/5.0/getting-started/introduction/#js -->
{% endblock %}如果您的應用程式使用現代化的前端實務，最好使用 Webpack Encore 並遵循 本教學課程，將 Bootstrap 的原始碼匯入您的 SCSS 和 JavaScript 檔案中。
下一步是設定 Symfony 應用程式在呈現表單時使用 Bootstrap 5 樣式。如果您想將其應用於所有表單，請定義此設定
1 2 3
# config/packages/twig.yaml
twig:
form_themes: ['bootstrap_5_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_5_layout.html.twig' %}
{% block body %}
<h1>User Sign Up:</h1>
{{ form(form) }}
{% endblock %}注意
預設情況下，所有輸入都會在其容器上以 mb-3 類別呈現。如果您覆寫 row_attr 類別選項，mb-3 也會被覆寫，您需要明確地加入它。
錯誤訊息
與Bootstrap 4 主題不同，錯誤是在 input 元素 之後 呈現。然而，這仍然在錯誤及其 <input> 之間建立了強烈的連結，如同 WCAG 2.0 標準所要求。
核取方塊和選項按鈕
對於核取方塊/選項按鈕欄位，呼叫 form_label() 不會呈現任何內容。由於 Bootstrap 內部機制，標籤已經由 form_widget() 呈現。
行內核取方塊和選項按鈕
如果您想以行內方式呈現核取方塊或選項按鈕欄位，您可以將 checkbox-inline 或 radio-inline 類別 (取決於您的 Symfony Form 類型或 ChoiceType 設定) 加入標籤類別。
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',
],
]);開關
Bootstrap 5 允許將核取方塊呈現為開關。您可以在 Symfony Form CheckboxType 上透過將 checkbox-switch 類別加入標籤來啟用此功能
1 2 3 4 5
$builder->add('myCheckbox', CheckboxType::class, [
'label_attr' => [
'class' => 'checkbox-switch',
],
]);提示
您也可以透過在 label_attr 選項上簡單地加入 checkbox-inline 類別，以行內方式呈現您的開關
1 2 3 4 5
// ...
'label_attr' => [
'class' => 'checkbox-inline checkbox-switch',
],
// ...警告
開關僅適用於 **核取方塊**。
輸入群組
若要在您的 Symfony Form 中建立輸入群組，只需將 input-group 類別加入 row_attr 選項。
1 2 3 4 5 6
$builder->add('email', EmailType::class, [
'label' => '@',
'row_attr' => [
'class' => 'input-group',
],
]);警告
如果您填寫表單的 help 選項，它也會被呈現為群組的一部分。
浮動標籤
若要使用浮動標籤呈現輸入欄位，您必須在表單類型的 row_attr 選項中加入 label、placeholder 和 form-floating 類別。
1 2 3 4 5 6 7 8 9
$builder->add('name', TextType::class, [
'label' => 'Name',
'attr' => [
'placeholder' => 'Name',
],
'row_attr' => [
'class' => 'form-floating',
],
]);警告
您 **必須** 提供 label 和 placeholder 才能讓浮動標籤正常運作。
無障礙功能
Bootstrap 5 框架在使其對於功能性變異 (如視力障礙和認知能力) 更容易存取方面做得很好。Symfony 更進一步確保表單主題符合 WCAG 2.0 標準。
這並不表示您的整個網站會自動符合完整標準，但這確實表示您在為 **所有** 使用者建立設計方面已取得長足進展。