2015-12-09 14 views
5

Ich habe gerade angefangen, Symfony3 zu lernen, und ich versuche, mein Formular mit Bootstrap3 zu gestalten. Nach dem documentation wird bootstrap_3_layout.html.twig-in gebaut und kann durch Veränderung der Zweig Einstellungen in config.yml global aktiviert werden:Bootstrap 3 funktioniert nicht in Symfony3

# Twig Configuration 
twig: 
    debug:   "%kernel.debug%" 
    strict_variables: "%kernel.debug%" 
    form_themes: 
     - "bootstrap_3_layout.html.twig" 

Wenn ich die Seite, die Seite geladen wird, ohne CSS, die Zweig-Datei und Seitenquelle nachzuladen sind als folgt:

{# app/Resources/views/experiment/new.html.twig #} 

{{ form_start(form) }} 
{{ form_widget(form) }} 
{{ form_end(form) }} 


<form name="form" method="post"> 
<div id="form"><div class="form-group"><label class="control-label required" for="form_title">Title</label><input type="text" id="form_title" name="form[title]" required="required" class="form-control" /></div><div class="form-group"><button type="submit" id="form_save" name="form[save]" class="btn-default btn">Create Task</button></div><input type="hidden" id="form__token" name="form[_token]" class="form-control" value="O7tN2AUjyLByEz2tkNf675jqixxjev0p4ivzs5Bn4VA" /></div> 
</form> 

Welche zeigt die Bootstrap3 Klassen wurden korrekt injiziert. Die Seite selbst sieht wie folgt aus:

enter image description here

Was für Schritt (s) habe ich die CSS zu bekommen verpasst richtig zu arbeiten?

Antwort

4

Sie müssen die Bootstrap-Dateien CSS und JS zu Ihrer Anwendung und Ihren Vorlagen hinzufügen. Das Formthema stellt nur sicher, dass das Markup entsprechend dem Bootstrap korrekt ausgebildet ist.

+0

Hi Ich erstelle mein erstes Symfony-Projekt in v3.0.5 und habe keine Ahnung, wie Bootstrap hinzuzufügen. Zuerst verwende ich Composer, um Bootstrap 3 und jQuery 2.2 zu installieren. Aber welche Dateien soll ich kopieren und wo? –

1

Als alternativ Art und Weisen Sie das Bündel

https://github.com/phiamo/MopaBootstrapBundle

in Ihrem Projekt enthalten könnten und die Bootstrap-Dateien (sass/weniger) in Ihrem Projekt bekommen.

Dokumentation zur Installation ist auch auf dieser Seite verfügbar. Ich verwende eine selbst geschriebene Integration, die ziemlich ähnliche Methoden verwendet.

Vorteil ist, dass Sie benutzerdefinierte Sass in Ihr Projekt aufnehmen und in eine einzige CSS-Datei kompilieren können, die Sie in den Vorlagenkopf aufnehmen.

Verwandte Themen