Intégrer Twitter Bootstrap à votre projet Symfony est devenu extrêmement simple puisque le composer peut gérer cela.
Depuis votre console, rendez-vous dans le dossier de votre projet et installer votre dépendance de cette façon :
composer require twbs/bootstrap
Voilà, Bootstrap se trouve maintenant dans votre dossier « vendor ». Il ne reste plus qu’à configurer assetic pour pouvoir compiler les fichiers less en css et utiliser Bootstrap dans nos layouts. Pour cela, il suffit d’ajouter la configuration pour bootstrap dans votre config.yml :
# app/config/config.yml ... # Assetic Configuration assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ ]
filters:
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node_modules]
apply_to: "\.less$"
cssrewrite: ~
Comme toujours dans ce fichier, respectez bien les indentations. Le chemin vers node est à adapter selon votre configuration système.
Il faut ensuite configurer assetic pour générer vos fichiers css et js.
# app/config/config.yml … # Assetic Configuration
assetic: ............ assets: bootstrap_css: inputs: - %kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less filters: - less - 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 output: js/bootstrap.js
Enfin, afin de profiter des icônes Glyphicon de Bootstrap, il faut ajouter la police dans votre dossier web. Il suffit simplement de copier le dossier FONTS de bootstrap vers votre dossier web
cp -a vendor/twbs/bootstrap/fonts web
Voilà, tout est prêt. il ne reste plus qu’à générer le dump assetic:
php app/console assetic:dump
Puis ensuite à ajouter le css et js dans votre template twig :
<!-- Bootstrap -->
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<script src="{{ asset('js/bootstrap.js') }}"></script>
C’est tout, vous avez installé et configuré correctement Bootstrap + Glyphicon. Notez que vous devez ajouter jQuery pour utiliser les plugins javascript de Bootstrap. Si ce n’est pas le cas :
composer require components/jquery
