引导4形式主题

警告:你浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 4.2,不再维护。

读这个页面的更新版本Symf欧宝娱乐app下载地址ony 6.2(当前的稳定版本)。

可访问性
自定义表单
标签和错误

引导4形式主题

欧宝娱乐app下载地址Symfony提供了几种方法将引导集成到您的应用程序。最简单的方法是添加所需的<链接>和<脚本>元素在你的模板(通常只包括在其他模板扩展的主要布局模板):

              1 2 3 4 5 6 7 8 9
              {/ base.html #模板。树枝#}{#小心的块模板可能命名不同#}{%块head_css %}< !——从https://getbootstrap.com/docs/4.1/getting-started/introduction/复制CSS CSS - - >{%endblock%}{%块head_js %}< !——复制JavaScript从https://getbootstrap.com/docs/4.1/getting-started/introduction/ js - - >{%endblock%}
             

如果您的应用程序使用现代前端实践,更好的使用Webpack安可并遵循本教程引导的来源导入SCSS和JavaScript文件。

下一步是配置Symfony应用程序时使用引导4风格呈现形式。欧宝娱乐app下载地址如果你想将它们应用于所有形式,定义这个配置:

YAML
XML
PHP

                1 2 3
                #配置/包/ twig.yaml枝:form_themes:(“bootstrap_4_layout.html.twig”)
               

                1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
                < !——配置/包/树枝。xml - - >< ?xml version = " 1.0 " encoding = " utf - 8 " ? ><容器xmlns=“http://欧宝娱乐app下载地址www.oldmanjams.com/schema/dic/services”xmlns: xsi=“http://www.w3.org/2001/XMLSchema-instance”xmlns:树枝=“http://欧宝娱乐app下载地址www.oldmanjams.com/schema/dic/twig”xsi: schemaLocation=“http://欧宝娱乐app下载地址www.oldmanjams.com/schema/dic/services //www.oldmanjams.com/schema/dic/services/services-1.0.xsd //www.oldmanjams.com/schema/dic/twig //www.oldmanjams.com/schema/dic/twig/twig-1.0.xsd”><枝:配置><枝:form-theme>bootstrap_4_layout.html.twig< /枝:form-theme>< !——……- - >< /枝:配置>< /容器>
               

                1 2 3 4 5 6 7 8
                / /配置/包/ twig.php美元容器- >loadFromExtension (“树枝”,(“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>{{形式(形式)}}{%endblock%}
             

可访问性

引导4框架做了很好的工作使它容易视力下降等功能变化和认知能力。欧宝娱乐app下载地址Symfony了这一步,以确保符合主题WCAG 2.0标准。

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

自定义表单

引导4有一个称为“自定义形式_”的特性。你可以启用,Symfony的形式欧宝娱乐app下载地址RadioType和CheckboxType通过添加一个类调用radio-custom和checkbox-custom分别。

               1 2
               {{form_row(形式。myRadio, {label_attr:{类:‘radio-custom}})}}{{form_row(形式。myCheckbox, {label_attr:{类:‘checkbox-custom}})}}
              