Symfony – Intégrer Bootstrap dans un bundle
5 (100%) 1 vote

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 » :

Création du bundle

Répondre aux questions :

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 :

Par :

Supprimez les lignes :

Remplacez la ligne jquery :

par :

Remplacez l’appel du fichier bootstrap :

par :

Supprimez les lignes :

Après ces lignes et avant la fermeture de la balise body, ajouter l’appel à holder.js :

Sous le bloc du Jumbotron, ajoutez cette ligne :

Résultat :

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 :

Exécutez cette commande pour la prise en compte :

Résultat :

Afficher la page

Dans le navigateur, rechargez la page http://test.jbnet.lan/test/web/app_dev.php/hello/JBNet

Résultat :

Symfony - Theme Template for Bootstrap

Vérifiez que le menu et le carousel fonctionnent :

Symfony - Theme Template for Bootstrap - Menu et carousel