引导4形式主题

编辑本页

引导4形式主题

ob娱乐下载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应用程序,以便在呈现表单时使用Bootstob娱乐下载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插件,推荐由引导表单文档欧宝官网下载app

可访问性

Bootstrap 4框架做得很好,使它可以用于视力受损和认知能力受损等功能变化。ob娱乐下载Symfony进一步确保表单主题符合WCAG 2.0标准

这并不意味着你的整个网站自动符合完整的标准,但它确实意味着你已经在你的工作中创造了一个设计所有用户。

自定义表单

Bootstrap 4有一个叫做“自定义表单_”的特性。您可以在Symfony Form上启用该功能ob娱乐下载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'}})}}
此工作,包括代码示例,是根据创作共用BY-SA 3.0许可证。
ob娱乐下载Symfony 6.0支持通过SensioLabs