Symfony - 5.3 Ajouter Bootstrap à un projet Symfony

Bootstrap est une collection d'outils pour créer le design de sites et d'applications web. Il contient des codes HTML et CSS pour les formulaires, les boutons et la navigation. Cette leçon l'intègre dans un projet Symfony.

Lancer le projet

Ouvrez le terminal, placez-vous dans le dossier du projet avec la commande cd suivie du nom du dossier, puis lancez le serveur avec symfony serve.

cd <nom-du-dossier>
symfony serve

Ajouter le style Bootstrap

Recherchez Bootstrap CDN, puis ouvrez le premier lien. Copiez la partie CSS proposée et collez-la dans le fichier du projet. La police change alors dans le navigateur.

Bootstrap propose de nombreux autres styles. Vous pouvez aussi modifier davantage le design selon vos besoins.

Ajouter une barre de navigation

Revenez à la documentation de Bootstrap et recherchez la barre de navigation, appelée navbar. Copiez le code proposé, puis collez-le dans le template.

Enregistrez les modifications et rafraîchissez la page. La barre de navigation apparaît alors en haut.

En résumé

Bootstrap fournit des styles HTML et CSS prêts à l'emploi. Il s'intègre dans un projet Symfony en copiant le code depuis sa documentation. Le rafraîchissement du navigateur permet de vérifier chaque modification.

Points clés

  • Bootstrap est une collection d'outils pour le design web.
  • Le CSS fourni par le CDN modifie le style du projet.
  • La police peut être changée avec le CSS de Bootstrap.
  • La barre de navigation se copie depuis la section navbar.
  • Il faut enregistrer le fichier avant de rafraîchir la page.

Questions fréquentes

Qu'est-ce que Bootstrap ?

C'est une collection d'outils pour créer le design d'un site. Elle contient des codes HTML et CSS, des formulaires, des boutons et de la navigation.

Faut-il tout copier depuis Bootstrap ?

Non, la vidéo n'en copie que des éléments précis. Vous pouvez en ajouter d'autres selon vos besoins.

Pourquoi rafraîchir la page après une modification ?

Le navigateur doit recharger le fichier pour afficher les changements. Sans rafraîchissement, l'ancien rendu reste visible.