Symfony - 5.4 Symfony : intégrer un modèle Bootstrap

Bootstrap est une collection d'outils qui aide à créer le design, la mise en forme et les interactions d'une page web. Cette leçon montre comment l'ajouter à un projet Symfony à partir d'un modèle HTML existant.

Préparer les fichiers du modèle

Téléchargez le modèle Bootstrap grâce au lien présent sous la vidéo. Copiez ensuite tous les fichiers et dossiers dans le dossier public de votre projet.

Dans votre éditeur de texte, supprimez le contenu du fichier HTML de base. Revenez ensuite dans le dossier public, récupérez le code HTML du modèle et collez-le à la place.

Vérifier le résultat

Lancez le serveur du projet depuis le terminal. Il affiche une URL : ouvrez-la dans votre navigateur.

Si la page s'affiche avec le design du modèle, l'intégration a fonctionné.

Alléger le code

La vidéo supprime un long bloc de code devenu inutile, pour alléger le fichier. Faites de même dans votre propre projet, en gardant ce qui sert à la page.

Dans le terminal, lancez ensuite la commande composer require indiquée dans la vidéo. Elle installe un composant qui gère les versions des ressources de l'application. Le chemin des ressources est ensuite simplifié dans le code.

En résumé

Bootstrap fournit des outils pour le design et les interactions. Pour l'intégrer à Symfony, placez le modèle dans le dossier public, remplacez le HTML de base et vérifiez le résultat dans le navigateur. Un allègement du code et une commande composer complètent la mise en place.

Points clés

• Bootstrap sert à créer le design, la mise en forme et les interactions d'une page.
• Les fichiers du modèle se placent dans le dossier public du projet.
• Le HTML de base est remplacé par le code HTML du modèle.
• Le serveur du projet permet de vérifier le résultat dans le navigateur.
• Un long bloc de code inutile peut être supprimé pour alléger le fichier.

Questions fréquentes

Où placer les fichiers du modèle Bootstrap ?

Copiez tous les fichiers et dossiers du modèle dans le dossier public du projet.

Comment voir le résultat ?

Lancez le serveur du projet depuis le terminal, puis ouvrez l'URL affichée dans votre navigateur.

Faut-il vider le fichier HTML de base ?

Oui, la vidéo commence par supprimer son contenu avant d'y coller le code HTML du modèle.