Symfony2 – Installer Bootstrap

octobre 29, 2015 5:47 Publié par Laissez vos commentaires

Bonjour à tous,

Dans cet article nous allons configurer Symfony2 avec le fameux framework Bootstrap. Nous utiliserons pour cela un environnement de test sous Wamp.

Commençons par ajouter à notre composer.json les dépendances suivantes :


"twbs/bootstrap" : "3.*",
"components/jquery": "dev-master",
"oyejorge/less.php": "dev-master"

Fichier app/config/config.yml

# Assetic Configuration
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ ]
#java: /usr/bin/java
java: C:\Program Files\Java\jdk1.8.0_65\bin\java.exe
filters:
cssrewrite: ~
cssembed:
jar: "%kernel.root_dir%/Resources/java/cssembed.jar"
yui_js:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"

lessphp:
file: "%kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php"
apply_to: ".less$"

assets:

jquery_js:
inputs:
- "%kernel.root_dir%/../vendor/components/jquery/jquery.min.js"
filters: [?yui_js]
output: js/jquery.min.js

bootstrap_css:
inputs:
- "%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less"
filters:
- lessphp
- cssrewrite
output: css/bootstrap.css

bootstrap_js:
inputs:
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/affix.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/alert.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/button.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/carousel.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/collapse.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/dropdown.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/modal.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tooltip.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/popover.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/scrollspy.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tab.js"
- "%kernel.root_dir%/../vendor/twbs/bootstrap/js/transition.js"
filters: [?yui_js]
output: js/bootstrap.js

fonts_glyphicons_eot:
inputs:
- "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot"
output: "fonts/glyphicons-halflings-regular.eot"
fonts_glyphicons_svg:
inputs:
- "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.svg"
output: "fonts/glyphicons-halflings-regular.svg"
fonts_glyphicons_ttf:
inputs:
- "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.ttf"
output: "fonts/glyphicons-halflings-regular.ttf"
fonts_glyphicons_woff:
inputs:
- "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff"
output: "fonts/glyphicons-halflings-regular.woff"

On lance une copie des {assets} à l’aide de la commande {php app/console assetic:dump}

C:\wamp\www\symfony2\test>php app/console assetic:dump
Dumping all dev assets.
Debug mode is on.

17:26:45 [file+] C:\wamp\www\symfony2\test\app/../web/assetic/jquery_js.js
17:26:45 [file+] C:\wamp\www\symfony2\test\app/../web/assetic/jquery_js_jquery.min_1.js
17:26:45 [file+] C:\wamp\www\symfony2\test\app/../web/css/bootstrap.css
17:26:49 [file+] C:\wamp\www\symfony2\test\app/../web/css/bootstrap_bootstrap_1.css
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_affix_1.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_alert_2.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_button_3.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_carousel_4.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_collapse_5.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_dropdown_6.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_modal_7.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_tooltip_8.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_popover_9.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_scrollspy_10.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_tab_11.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/js/bootstrap_transition_12.js
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular.eot
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular_glyphicons-halflings-regular_1.eot
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular.svg
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular_glyphicons-halflings-regular_1.svg
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular.ttf
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular_glyphicons-halflings-regular_1.ttf
17:26:54 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular.woff
17:26:55 [file+] C:\wamp\www\symfony2\test\app/../web/fonts/glyphicons-halflings-regular_glyphicons-halflings-regular_1.woff
17:26:55 [file+] C:\wamp\www\symfony2\test\app/../web/css/compiled/app.css
17:26:55 [file+] C:\wamp\www\symfony2\test\app/../web/css/compiled/app_bootstrap_1.css

Code à ajouter dans votre template twig:






{% block title %}Mon titre{% endblock %}

{% block stylesheets %}

{% endblock %}


{% block body %}
{% endblock %}

{% block javascripts %}

{% endblock %}


Puis dans votre page index.html.twig


{% extends '::base.html.twig' %}

{% block body %}

Test Bootstrap




{% endblock %}

Attention, l’ordre des scripts est important. Le jquery.min.js doit être chargé avant le bootstrap.js pour pouvoir exécuter certaines fonctions, telles que le dropdown sur un menu par exemple.

Testons enfin notre page index.html.twig :

tutodidacte bootstrap1.png

Enjoy 🙂

Classés dans :

Cet article a été écrit par admin

Laisser un commentaire