2

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

我想使用引导程序来自定义 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

它直接将所有表单与引导样式集成在一起。

但是，如果有一天我想在注册表单中添加一个字段（例如性别），我可以在这个捆绑包中这样做吗，就像原来的 FOSUserBundle 一样？

知道我想在注册表单中添加一些自定义字段，并使用引导程序自定义表单，我想知道使用 FOSUserBundle 是否是个好主意，或者是否最好构建一个我自己的全新捆绑包来管理我的用户网站。

4

4 回答 4

7

这是我如何做到这一点的完整示例（自举模式：P，您可以适应简单的 html 或其他框架）。您必须查看表单的末尾，并在“ {{ form_rest(form) }} ”中注意这是 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 -->
于 2016-11-15T16:38:32.443 回答
4

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

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

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

 $builder->add('name');
于 2013-04-03T10:04:19.560 回答
0

回答你标题中的问题：你有 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 主题，它将 a 添加class="form-control"到所有文本字段，因此 Bootstrap CSS 将为它设置样式，以及其他内容。

但是那个主题只有样式<button>，而不是<input type="submit"FOSUserBundle 似乎出于某种原因使用的样式。所以你仍然需要btn btn-lg btn-primary btn-block手动覆盖 FOSUserBundle register_content.html.twig 和类。

# 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) }}
于 2017-10-13T22:23:28.620 回答
-6

在“vendor/fos../resource/views/”中修改 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....

和“JamBlogBu​​ndle: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.....

对于自定义字段，请参阅上面的回复。如果能帮上忙

于 2013-04-21T13:33:57.473 回答