Installer Bootstrap sous Symfony2

by karim

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 FilesJavajdk1.8.0_65binjava.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]

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:wampwwwsymfony2test>php app/console assetic:dump
Dumping all dev assets.
Debug mode is on.

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

Code à ajouter dans votre template twig :

<!DOCTYPE html><br>
<html><br>
<head><br>
<meta charset="UTF-8" /><br>
<title>{% block title %}Mon titre{% endblock %}</title><br>
<br>
<br>
{% block stylesheets %}<br>
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}"><br>
{% endblock %}<br>
<br>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /><br>
</head><br>
<br>
<body><br>
{% block body %}<br>
{% endblock %}<br>
<br>
{% block javascripts %}<br>
<script src="{{ asset('js/bootstrap.js') }}"></script><br>
{% endblock %}<br>
</body><br>
</html>

Puis dans votre page index.html.twig

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

{% block body %}<br>
<div class="container"><br>
<h2>Test Bootstrap</h2><br>
<form role="form"><br>
<div class="form-group"><br>
<label for="email">Email:</label><br>
<input type="email" class="form-control" id="email" placeholder="Enter email"><br>
</div><br>
<div class="form-group"><br>
<label for="pwd">Password:</label><br>
<input type="password" class="form-control" id="pwd" placeholder="Enter password"><br>
</div><br>
<div class="checkbox"><br>
<label><input type="checkbox"> Remember me</label><br>
</div><br>
<button type="submit" class="btn btn-default">Submit</button><br>
</form><br>
</div><br>
<br>
{% endblock %}

Si tout se passe bien, vous devez voir votre formulaire !