引导5形式主题
编辑该页面引导5形式主题
ob娱乐下载Symfony提供了几种方法将引导集成到您的应用程序。最简单的方法是添加所需的<链接>和<脚本>元素在你的模板(通常只包括在其他模板扩展的主要布局模板):
1 2 3 4 5 6 7 8 9
{/ base.html #模板。树枝#}{#小心的块模板可能命名不同#}{%块样式表%}< !——从https://getbootstrap.com/docs/5.0/getting-started/introduction/复制CSS CSS - - >{%endblock%}{%块javascripts %}< !——复制JavaScript从https://getbootstrap.com/docs/5.0/getting-started/introduction/ js - - >{%endblock%}如果您的应用程序使用现代前端实践,更好的使用Webpack安可并遵循本教程引导的来源导入SCSS和JavaScript文件。
下一步是配置Symfony应用程序时使用引导5风格呈现形式。ob娱乐下载如果你想将它们应用于所有形式,定义这个配置:
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>{{形式(形式)}}{%endblock%}请注意
默认情况下,所有输入的呈现mb-3容器类。如果你覆盖row_attr类选项,mb-3也会被覆盖,你就会需要显式地添加它。
错误消息
不同的是引导4主题、错误呈现后的输入元素。然而,这仍然使一个强大的错误及其之间的联系<输入>所要求的WCAG 2.0标准。
复选框和收音机
复选框/广播领域,称了form_label ()不显示任何东西。由于引导内部,标签已经呈现了form_widget ()。
内联复选框和收音机
如果你想使你的复选框或单选字段内联,你可以添加checkbox-inline或radio-inline类(根据您的Symfony类型或形式ob娱乐下载ChoiceType标签类配置)。
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的形式ob娱乐下载CheckboxType通过添加checkbox-switch标签类:
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娱乐下载的形式,简单的添加input-group类的row_attr选择。
1 2 3 4 5 6
美元构建器- >add (“电子邮件”,EmailType::类,“标签”= >“@”,“row_attr”= > [“类”= >“input-group”、]]);谨慎
如果你填满帮助选择的形式,它也将呈现为集团的一部分。
浮动标签
呈现一个输入字段浮动标签,你必须添加一个标签,一个占位符和漂浮着类的row_attr选择表单类型。
1 2 3 4 5 6 7 8 9
美元构建器- >add (“名字”,TextType::类,“标签”= >“名字”,“attr”= > [“占位符”= >“名字”),“row_attr”= > [“类”= >漂浮着的、]]);谨慎
你必须提供一个标签和一个占位符使浮动标签正常工作。
可访问性
引导5框架做了很好的工作使它容易视力下降等功能变化和认知能力。ob娱乐下载Symfony了这一步,以确保符合主题WCAG 2.0标准。
这并不意味着你的整个网站自动符合标准,但它确实意味着你已经在你的工作来创建一个设计所有用户。
