Mémo pour utiliser Bootstrap dans un bundle Symfony.
Introduction
Ce mémo sans prétention permet juste d’avoir une première approche de l’utilisation de Bootstrap dans un projet Symfony.
Il explique rapidement comment utiliser une page d’exemple du site Bootstrap dans un projet Symfony.
Il s’agit de l’intégration de Boostrap dans un bundle, pas de la création d’un bundle Bootstrap.
Il n’est pas parfait, et il ne couvre pas non plus tous les aspects du développement avec Bootstrap et Symfony, mais il a le mérite de permettre de se familiariser rapidement avec l’association de ces 2 technologies.
Pré-requis
Une installation d’un projet Symfony nommé « test » :
|
1 |
symfony new test |
Création du bundle
|
1 |
./app/console generate:bundle |
Répondre aux questions :
|
1 2 3 4 5 |
Bundle namespace: Jbnet/Bootstrap/ThemeBundle Bundle name [JbnetBootstrapThemeBundle] Target directory [/home/jbnet-user/test/html/test/src] Configuration format (yml, xml, php, or annotation): yml Do you want to generate the whole directory structure [no]? yes |
La page hello est accessible à cette adresse : http://<adresse_serveur>/web/app_dev.php/hello/JBNet
Installation de Bootstrap
Allez sur le site getbootstrap.com et téléchargez Bootstrap.
Décompressez le fichier dans un répertoire et le renommer en « bootstrap ».
Copiez ce répertoire dans le répertoire /src/Jbnet/Bootstrap/ThemeBundle/Resources/public/css
Installation de jQuery
Téléchargez jQuery sur le site https://jquery.com/
Copier le fichier dans le répertoire /src/Jbnet/Bootstrap/ThemeBundle/Resources/public/js
Installation de holder.js
La page d’exemple sur getbootstrap.com pour ce mémo utilise holder.js pour simuler des images dans le slider.
Téléchargez l’archive d’installation sur le site http://imsky.github.io/holder/
Décompressez l’archive et copiez le fichier holder.js dans le répertoire /src/Jbnet/Bootstrap/ThemeBundle/Resources/public/js
Page index.html.twig
Copiez le code source de la page de démonstration de Bootstrap Theme et collez-le dans le fichier /src/Jbnet/Bootstrap/ThemeBundle/Resources/views/Default/index.html.twig
Remplacez ces lignes :
|
1 2 3 4 |
<!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap theme --> <link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet"> |
Par :
|
1 2 3 4 5 6 7 |
{% stylesheets 'bundles/jbnetbootstraptheme/css/bootstrap/css/bootstrap.min.css' filter='cssrewrite' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %} {% stylesheets 'bundles/jbnetbootstraptheme/css/bootstrap/css/bootstrap-theme.min.css' filter='cssrewrite' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %} |
Supprimez les lignes :
|
1 2 3 4 5 6 |
<!-- Custom styles for this template --> <link href="theme.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> |
Remplacez la ligne jquery :
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
par :
|
1 2 3 |
{% javascripts '@JbnetBootstrapThemeBundle/Resources/public/js/jquery-2.1.4.min.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} |
Remplacez l’appel du fichier bootstrap :
|
1 |
<script src="../../dist/js/bootstrap.min.js"></script> |
par :
|
1 2 3 |
{% javascripts '@JbnetBootstrapThemeBundle/Resources/public/css/bootstrap/js/bootstrap.min.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} |
Supprimez les lignes :
|
1 2 3 |
<script src="../../assets/js/docs.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> |
Après ces lignes et avant la fermeture de la balise body, ajouter l’appel à holder.js :
|
1 2 3 |
{% javascripts '@JbnetBootstrapThemeBundle/Resources/public/js/holder.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} |
Sous le bloc du Jumbotron, ajoutez cette ligne :
|
1 |
Bonjour {{ name }} ! |
Résultat :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... ... ... <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <h1>Theme example</h1> <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p> </div> Bonjour {{ name }} ! ... ... ... |
Enregistrez la page.
Prise en compte de Bootstrap du bundle par Synfony
Éditez le fichier /app/config/config.yml
Modifiez le bloc assetic en ajoutant le bundle :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
# Assetic Configuration assetic: debug: "%kernel.debug%" use_controller: false bundles: [ "JbnetBootstrapThemeBundle" ] #java: /usr/bin/java filters: cssrewrite: ~ #closure: # jar: "%kernel.root_dir%/Resources/java/compiler.jar" #yui_css: # jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar" |
Exécutez cette commande pour la prise en compte :
|
1 |
./app/console assets:install |
Résultat :
|
1 2 3 4 |
Installing assets as hard copies. Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework Installing assets for Jbnet\Bootstrap\ThemeBundle into web/bundles/jbnetbootstraptheme Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution |
Afficher la page
Dans le navigateur, rechargez la page http://test.jbnet.lan/test/web/app_dev.php/hello/JBNet
Résultat :
Vérifiez que le menu et le carousel fonctionnent :
