定製註冊FOSUserBundle與引導

Question

我創建了一個表格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 /瀏覽/安全/ login.html.twig

這很容易，因爲只有一個文件的登錄模板。

但我怎麼能做到這一點的註冊部分例如？

有兩個文件：register.html.twig和register_content.html.twig

所以我在UserBundle創建註冊文件夾，我就把這兩個文件。

但是，我怎麼投入來改變提交按鈕的風格？

在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？

知道我想以註冊表的形式添加一些自定義字段，並使用bootstrap自定義表單，我想知道是否使用FOSUserBundle是一個好主意，或者如果最好創建一個新的自己的新捆綁來管理用戶在我的網站上。

Answer 1

如果你想在註冊表單中添加自定義字段，你必須重載形式：

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

字段添加到您的用戶實體，並在buildForm方法，只需添加您的自定義字段

$builder->add('name'); 

在 「供應商/ FOS ../資源/視圖/」

Answer 2

modifie 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」。小枝」

{% 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..... 

自定義字段，見上面的效應初探 如果它可以幫助

Answer 3

這是我要做的事（自舉模式，一個完整的例子：P，你可以adapte簡單的html或其他幀）。你必須看看錶格的末尾，你要注意了「{{form_rest（表）}}」這是代碼失敗中汲取怎樣的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 --> 

Answer 4

回答標題中的問題：喲你有FOSUserBundle，你需要Bootstrap CSS來設計它。你可以像卡洛斯加西亞的回答一樣自己設計風格，或者在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樹枝主題增加了一個class="form-control"於所有文本字段，以便引導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) }}