使用Bootstrap自定义寄存器FOSUserBundle

Question

我在bootstrap文档中创建了一个Form builder.php来构建我的登录表单和我的注册表单,如下所示:http: //bootstrap.braincrafted.com/base-css#forms但接下来我发现了FOSUserBundle,我认为它可能是使用它是一个好主意.问题是:我不能简单地重用之前创建的表单.

我想使用bootstrap来自定义FOSUser模板.特别是对于提交按钮,我想添加所有这些:class ="btn primary large"

我创建了一个覆盖FOSUserBundle的UserBundle.

我在FOSUserBundle中自定义了login.html.twig,将login.html.twig放在UserBundle/Ressources/Views/Security/login.html.twig中

这很简单,因为登录模板只有一个文件.

但是我如何才能为注册部分做这件事呢？

有两个文件:register.html.twig和register_content.html.twig

所以我在UserBundle中创建了一个Registration文件夹,然后我输入了这两个文件.

但是,我用什么来改变提交按钮的样式？

在register.html.twig我让:

{% extends "UserBundle::layout.html.twig" %}

{% block fos_user_content %}
{% include "UserBundle:Registration:register_content.html.twig" %}
{% endblock fos_user_content %}

在register_content.html.twig中:

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">
    {{ form_widget(form) }}
    <div>
        <input class="btn primary large" type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />
    </div>
</form>

但它不起作用.

您是否认为使用该捆绑包是一个很好的解决方案？ https://github.com/CCETC/FOSUserBundle

它直接将所有表单与bootstrap样式集成在一起.

但是如果有一天我想在注册表格中添加一个字段(例如性别),我可以在这个包中做,就像使用原始的FOSUserBundle一样吗？

知道我想以寄存器形式添加一些自定义字段,并使用bootstrap自定义表单,我想知道使用FOSUserBundle是不是一个好主意,或者如果最好建立一个我自己的全新包来管理我的用户网站.

Answer 1

这是我如何做的一个完整的例子(boostrap模式:P,你可以适应简单的html或其他帧).您必须查看表单的结尾并注意" {{form_rest(form)}} "这是代码如何绘制de token的symfony

<!-- BEGIN REGISTRATION FORM -->
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
    <h3 class="font-green">Register Form</h3>
    <div class="form-group">
        {{ form_widget(form.username, { 'attr': {'class': 'form-control placeholder-no-fix', 'placeholder':'User Name'} }) }}
        {% for errorItem in form.username.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-group">
        {{ form_widget(form.email, { 'attr': {'class': 'form-control', 'placeholder':'E-mail'} }) }}
        {% for errorItem in form.email.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-group">
        {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control', 'placeholder':'Password'} }) }}
        {% for errorItem in form.plainPassword.first.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-group">
        {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control', 'placeholder':'Repeat Password'} }) }}
        {% for errorItem in form.plainPassword.second.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-actions">
        <a class="btn btn-default" href="{{ path('fos_user_security_login') }}">Back to login</a>
        <button type="submit" id="register-submit-btn" class="btn btn-success">Submit</button>
    </div>
    {{ form_rest(form) }}
{{ form_end(form) }}
<!-- END REGISTRATION FORM -->