引导4形式主题
编辑本页警告:您正在浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 5.3，现已不再维护。
读本页的更新版本用于Sy欧宝娱乐app下载地址mfony 6.2(当前稳定版本)。
引导4形式主题
欧宝娱乐app下载地址Symfony提供了几种将Bootstrap集成到应用程序中的方法。最直接的方法是添加所需的内容<链接>而且<脚本>你的模板中的元素(通常你只在其他模板扩展的主布局模板中包含它们):
1 2 3 4 5 6 7 8 9
{/ base.html #模板。树枝#}{#注意模板中的块可能命名不同#}{%块head_css %}<！——从https://getbootstrap.com/docs/4.4/getting-started/introduction/#css复制CSS——>{%endblock%}{%块head_js %}<！——从https://getbootstrap.com/docs/4.4/getting-started/introduction/#js复制JavaScript——>{%endblock%}如果您的应用程序使用现代前端实践，那么最好使用它Webpack安可并遵循本教程将Bootstrap的源代码导入到SCSS和JavaScript文件中。
下一步是配置Symfony应用程序，以便在呈现表单时使用Bootst欧宝娱乐app下载地址rap 4样式。如果你想将它们应用到所有表单，定义以下配置:
- YAML
- XML
- PHP
1 2 3
#配置/包/ twig.yaml枝:form_themes:(“bootstrap_4_layout.html.twig”)如果希望在表单到表单的基础上应用引导样式，请包含form_theme在使用这些表单的模板中标记:
1 2 3 4 5 6 7 8
{#……#}{#这个标签只适用于这个模板中定义的表单#}{%form_theme“bootstrap_4_layout.html形式。嫩枝' %}{%块身体%}<h1>用户注册:h1>{{form(form)}}{%endblock%}错误消息
呈现表单错误内部的<标识>元素，以确保错误与其之间存在强连接<输入>的规定WCAG 2.0标准．为了实现这一点，form_errors ()被调用了form_label ()在内部。如果你致电form_errors ()在模板中，将显示错误消息两次．
提示
因为表单错误被呈现内部的<标识>，你不能使用CSS:在将星号附加到标签后，因为它将显示在错误消息之后。使用标签或label_html相反的选项。
复选框和无线电
对于复选框/无线电字段，调用了form_label ()不会渲染任何东西。由于Bootstrap内部程序，标签已经由form_widget ()．
文件输入
文件输入使用Bootstrap“custom-file”类呈现，该类隐藏了所选文件的名称。要修复此问题，请使用bs-custom-file-inputJavaScript插件，推荐由引导表单文档欧宝体育电话．
可访问性
Bootstrap 4框架做得很好，使它可以用于视力受损和认知能力受损等功能变化。欧宝娱乐app下载地址Symfony进一步确保表单主题符合WCAG 2.0标准．
这并不意味着你的整个网站自动符合完整的标准，但它确实意味着你已经在你的工作中创造了一个设计所有用户。
自定义表单
Bootstrap 4有一个叫做“自定义表单_”的特性。您可以在Symfony Form上启用该功能欧宝娱乐app下载地址RadioType而且CheckboxType通过添加一些类到标签:
1 2 3
{{form_row(形式。myRadio， {label_attr: {class: 'radio-custom'}})}}{{form_row(形式。myCheckbox， {label_attr:{类:'checkbox-custom'}})}}{{form_row(形式。myCheckbox， {label_attr: {class: 'switch-custom'}})}}
