引导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-inline或radio-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标准．
这并不意味着你的整个网站自动符合完整的标准，但它确实意味着你已经在你的工作中创造了一个设计所有用户。
