引导5形式主题

编辑本页

引导5形式主题

5.3

在Symfony 5.3中引入了Bootstrap 5窗体主题。ob娱乐下载

ob娱乐下载Symfony提供了几种将Bootstrap集成到应用程序中的方法。最直接的方法是添加所需的内容<链接>而且< >脚本你的模板中的元素(通常你只在其他模板扩展的主布局模板中包含它们):

1 2 3 4 5 6 7 8 9
{/ base.html #模板。树枝#}{#注意模板中的块可能命名不同#}{%样式表%}<!——从https://getbootstrap.com/docs/5.0/getting-started/introduction/#css复制CSS——>{%endblock%}{%javascripts %}<!——从https://getbootstrap.com/docs/5.0/getting-started/introduction/#js复制JavaScript——>{%endblock%}

如果您的应用程序使用现代前端实践,那么最好使用它Webpack安可并遵循本教程将Bootstrap的源代码导入到SCSS和JavaScript文件中。

下一步是配置Symfony应用程序,以便在呈现表单时使用Bootstob娱乐下载rap 5样式。如果你想将它们应用到所有表单,定义以下配置:

  • YAML
  • XML
  • PHP
1 2 3
#配置/包/ twig.yaml枝:form_themes:(“bootstrap_5_layout.html.twig”)

如果希望在表单到表单的基础上应用引导样式,请包含form_theme在使用这些表单的模板中标记:

1 2 3 4 5 6 7 8
{#……#}{#这个标签只适用于这个模板中定义的表单#}{%form_theme“bootstrap_5_layout.html形式。嫩枝' %}{%身体%}<h1>用户注册:h1>{{form(form)}}{%endblock%}

请注意

默认情况下,所有输入都使用mb-3在容器上初始化。如果你重写row_attr类选项,则mb-3也将被覆盖,您需要显式地添加它。

错误消息

不像Bootstrap 4主题时,会呈现错误。输入元素。然而,这仍然使错误和它之间有很强的联系<输入>的规定WCAG 2.0标准

复选框和无线电

对于复选框/无线电字段,调用了form_label ()不会渲染任何东西。由于Bootstrap内部程序,标签已经由form_widget ()

内联复选框和无线电

如果你想呈现你的复选框或无线字段内联,可以添加checkbox-inlineradio-inline类(取决于您的Symfony Form类型或ob娱乐下载ChoiceType配置)到标签类。

  • PHP
  • 嫩枝
1 2 3 4 5 6 7 8 9 10 11
构建器->add (“myCheckbox”, CheckboxType::类,“label_attr”= > [“类”=>“checkbox-inline”,],])->add (“myRadio”, RadioType::类,“label_attr”= > [“类”=>“radio-inline”,],]);

开关

引导5允许将复选框渲染为开关.您可以在Symfony Form上启用此功能ob娱乐下载CheckboxType通过添加checkbox-switch类转换为标签:

  • PHP
  • 嫩枝
1 2 3 4 5
构建器->add (“myCheckbox”, CheckboxType::类,“label_attr”= > [“类”=>“checkbox-switch”,],]);

提示

控件也可以内联呈现开关checkbox-inline类的label_attr选择:

1 2 3 4 5
/ /……“label_attr”= > [“类”=>“checkbox-inline checkbox-switch”),/ /……

谨慎

开关仅适用于复选框

输入组

创建输入组在Symfonyob娱乐下载 Form中,只需添加input-group类的row_attr选择。

  • PHP
  • 嫩枝
1 2 3 4 5 6
构建器->add (“电子邮件”, EmailType::类,“标签”=>“@”“row_attr”= > [“类”=>“input-group”,],]);

谨慎

如果你填写帮助选项,它也将作为组的一部分呈现。

浮动标签

来呈现输入字段浮动标签,你必须加一个标签,一个占位符漂浮着类的row_attr选择您的表单类型。

  • PHP
  • 嫩枝
1 2 3 4 5 6 7 8 9
构建器->add (“名字”, TextType::类,“标签”=>“名字”“attr”= > [“占位符”=>“名字”),“row_attr”= > [“类”=>漂浮着的,],]);

谨慎

必须提供一个标签和一个占位符使浮动标签正常工作。

可访问性

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

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

此工作,包括代码示例,是根据创作共用BY-SA 3.0许可证。
ob娱乐下载Symfony 5.4支持通过私人Packagist