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或其他帧）。您必须查看表单的结尾，并注意＆＃34; {{form_rest（form）}} ＆＃34;这是symfony如何绘制de token

的代码

<!-- 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 -->

Answer 2

如果要在注册表单中添加自定义字段，则必须覆盖表单：

https://github.com/FriendsOfSymfony/FOSUserBundle/blob/master/Resources/doc/overriding_forms.md

向您的用户实体添加字段，在buildForm方法中，只需添加自定义字段

即可

 $builder->add('name');

Answer 3

要回答标题中的问题：您有FOSUserBundle，并且您希望Bootstrap CSS为其设置样式。您可以像Carlos Garcia的回答一样自行设置样式，或者在Symfony3中应用全站点主题。

# app/config/config.yml
# Twig Configuration
twig:
  form_themes: ['bootstrap_3_layout.html.twig']

这适用于https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig的Twig主题，它为所有文本字段添加class="form-control"，因此Bootstrap CSS将为其设置样式，以及其他内容。

但是这个主题只设置<button>而不是FOSUserBundle似乎因某种原因使用的<input type="submit"。因此，您仍需要手动覆盖FOSUserBundle register_content.html.twig和btn btn-lg btn-primary btn-block类。

# app/Resources/FOSUserBundle/views/Registration/register_content.html.twig
{% trans_default_domain 'FOSUserBundle' %}

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
{{ form_widget(form) }}
<div>
    <input class="btn btn-lg btn-primary btn-block" type="submit" value="{{ 'registration.submit'|trans }}" />
</div>
{{ form_end(form) }}

Answer 4

修改“vendor / fos ../ resource / views /”（或覆盖）ex中的FOSUB布局文件：

{% extends 'JamBlogBundle::layout.html.twig' %}
{% block content %}
<div class="container">
<div class="row">
    <div class="span9">
        <section id="erreurs">
        {% for type, messages in app.session.flashbag.all() %}
            {% for message in messages %}
                <div class="flash-{{ type }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}
        </section>
        <section id="foscontent">
        {% block fos_user_content %}
        {% endblock fos_user_content %}
        </section>
    </div>
etc....

和“JamBlogBundle：layout.html.twig”

{% extends '::base.html.twig' %} /** with bootstrap.css **/
{% block title %} {{ parent() }} - Le Blog {% endblock %}
{% block body %}
<div class="jumbotron subhead">
<div class="container">
    <h1>Le blog de Jamonce !</h1>
    <p class="lead">Lire, écrire, écouter et partager notre passion de la musique.</p>
</div>
</div>
{% block content %} {% endblock %}
<footer class="footer">
<div class="container">
etc.....

自定义字段，请参阅上面的响应。如果可以提供帮助

使用Bootstrap自定义寄存器FOSUserBundle

4 个答案: