Installer Bootstrap sous Symfony2
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 !
