Anpassen-register FOSUserBundle mit Bootstrap

Ich ein Formular erstellen builder.php wie in der bootstrap-Dokumentation zum Aufbau meines login-Formular und meinem register Formular, so : http://bootstrap.braincrafted.com/base-css#forms
Aber Nächstes entdecke ich die FOSUserBundle und ich denke, es ist vielleicht eine gute Idee, es zu benutzen.
Das problem ist : ich kann nicht einfach die Wiederverwendung der erstellten Formulare vor.

Möchte ich die Verwendung von bootstrap anpassen FOSUser Vorlage.
Vor allem für die submit-buttons, die ich hinzufügen möchten für alle : class="btn primary großen"

Erstelle ich eine UserBundle überschreiben der FOSUserBundle.

Passe ich die Anmeldung.html-Code.Zweig in FOSUserBundle, indem Sie ein login.html-Code.Zweig in UserBundle/Ressources/Views/Security/login.html-Code.Zweig

Es ist einfach, denn es gibt nur eine Datei für das login-template.

Aber wie kann ich es für die Anmeldung einen Teil zum Beispiel ?

Gibt es zwei Dateien : registrieren.html-Code.Zweig und register_content.html-Code.Zweig

Also ich erstelle eine Registrierung in meinem Ordner UserBundle, und ich habe in diesen zwei Dateien.

Aber, was habe ich in so ändern Sie den Stil der submit-button ?

Im register.html-Code.Zweig lass ich :

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

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

Und in register_content.html-Code.Zweig :

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

Aber es funktioniert nicht.

Denkst du es ist eine gute Lösung für die Verwendung dieses Bundles ?
https://github.com/CCETC/FOSUserBundle

Integriert es direkt in der ganzen form mit der bootstrap-Stil.

Aber wenn eines Tages möchte ich hinzufügen, dass ein Feld im Anmeldeformular (z.B. Geschlecht zum Beispiel), könnte ich es tun, in diesem bundle, wie mit dem original FOSUserBundle ?

Wissen, dass ich wollen, fügen Sie einige benutzerdefinierte Felder im Registrierungsformular aus, und passen Sie Formulare mit bootstrap, Frage ich mich, ob es eine gute Idee, FOSUserBundle oder ob es besser ist zu bauen, ein frisches, neues bundle von meinem eigenen zu verwalten, die Benutzer auf meiner website.

InformationsquelleAutor user2178964 | 2013-04-03
  1. 4

    Wenn Sie möchten, fügen Sie benutzerdefinierte Felder in das register-Formular, müssen Sie das überschreiben der form :

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

    Felder hinzufügen, um Ihre Benutzer-Entität und in der buildForm Methode, einfach fügen Sie Ihre benutzerdefinierte Felder

     $builder->add('name');
    • Ja, ich weiß, aber ist dass eine gute Wahl zu treffen FOSUserBundle, wenn ich das hinzufügen einiger modernen Feld und überschreiben alle die Vorlage mit bootstrap ? Und dann, Wie kann ich anpassen das register Vorlage ? Es ist komplizierter als login-template... Thx!!!
    • Ich denke, FOSUserBundle ist die bessere Wahl 🙂 verbringen Sie ein wenig Zeit zum anpassen der layouts und Formen, aber Sie werden gewinnen eine Menge Zeit für andere Dinge.. für das register Vorlage, die Sie entfernen müssen {{ form_widget(form) }} zu zerlegen, für jedes Feld so : {{ form_widget(form.email) }}
    • danke, ich zerlegen Sie die Felder wie Sie sagte, und es funktioniert !
    InformationsquelleAutor Benjamin B.
  2. 7

    Dies ist ein komplettes Beispiel wie ich es mache (boostrap-Modus :P, Sie können mit einfachen html-oder andere Bilder). Sie haben sich am Ende des Formulars, und Sie achten in der "{{ form_rest(form) }}" dies ist der code, wie symfony, ziehe 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 -->
    InformationsquelleAutor Carlos Garcia
  3. 0

    Antwort auf die Frage, in Ihrem Titel: Sie haben FOSUserBundle und Sie wollen Bootstrap-CSS-Formatvorlagen. Sie können Stil, alles selbst wie in Carlos Garcia ' s Antwort, oder weisen Sie ein Thema für die gesamte site in Symfony3.

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

    Diese gilt der Zweig ist Thema bei https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig fügt eine class="form-control" zu allen text-Feldern, so Bootstrap-CSS-Stil, der unter anderen Sachen.

    Aber das Thema nur auf die Formatvorlagen <button> und nicht die <input type="submit" dass FOSUserBundle scheint für einige Grund. So können Sie immer noch überschreiben müssen die FOSUserBundle register_content.html-Code.der Zweig und die btn btn-lg btn-primary btn-block Klasse manuell.

    # 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) }}
    InformationsquelleAutor georgiecasey
  4. -6

    modifie FOSUB layout-Datei "vendor/fos../resource/views/" (oder überschreiben) ex:

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

    und die "JamBlogBundle:layout.html-Code.Zweig"

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

    für die benutzerdefinierten Felder, Siehe die Antwort oben.
    Wenn es helfen kann

    • Sie sollten nie ändern, Rahmen oder externe bundles direkt
    • Gibt es eine Möglichkeit zu überschreiben bundle Ansichten
    InformationsquelleAutor cedricFR
Schreibe einen Kommentar