Scribd
Importer
8 vues3 pages

GI21 DW Statique TP4

Ce document présente un exercice pratique sur le développement web statique en utilisant Bootstrap. Il guide les étudiants à travers la création d'une page web responsive avec des colonnes, des cartes de services et un pied de page. Les instructions incluent l'utilisation de classes utilitaires pour améliorer l'apparence visuelle de la page.

Transféré par

z.aksikas
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
8 vues3 pages

GI21 DW Statique TP4

Ce document présente un exercice pratique sur le développement web statique en utilisant Bootstrap. Il guide les étudiants à travers la création d'une page web responsive avec des colonnes, des cartes de services et un pied de page. Les instructions incluent l'utilisation de classes utilitaires pour améliorer l'apparence visuelle de la page.

Transféré par

z.aksikas
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Académie Internationale Mohammed VI de l’Aviation Civile

GI21

Développement Web Statique

Travaux pratiques 4 :

Premiers pas Bootstrap

Partie 1 :

1. Utiliser la grille de Bootstrap pour obtenir le résultat visible au schémas suivant :

2. Réaliser le code html qui vous permet d’obtenir le résultat visible aux schémas
suivants.

3. Créer un système de colonne responsive :


- 4 colonnes (dans un container)
- 3 colonnes (dans un container)
- 2 colonnes (sur toute la largeur de l’écran)
Créer des colonnes avec des décalages

- 5 – (2) – 5 (sur toute la largeur de l’écran)


- (1) – 11 (dans un container)
4. En utilisant la grille de Bootstrap, réaliser le code html qui vous permet d’obtenir le
résultat visible aux schémas suivants.

Partie 2 :

1. Initialisation
- Dans la page d’accueil réalisée lors du tp1, intégrer Bootstrap et ajouter la balise
permettant de rendre la page responsive.
2. En-tête simple
- À l’intérieur d’un <div class="container">, créer une ligne contenant un titre h1
centré.
- Utiliser les classes utilitaires de Bootstrap pour centrer le texte (text-center) et ajouter
un espacement vers le bas (mb-5).
3. Section “Nos services” avec des cartes
- Créer un nouveau container avec une ligne contenant 3 colonnes
o Dans chaque colonne, insérer une carte Bootstrap
o Chaque carte contient : une image (utilise
https://via.placeholder.com/300x150), un titre, une description et un bouton

Regarder la documentation de la classe .card sur getbootstrap.com

- Modifier les 3 colonnes de la section “Nos services” pour qu’elles :


o occupent toute la largeur (col-12) sur un petit écran (mobile),
o prennent 1/3 de la ligne (col-md-4) sur écran moyen ou grand.
4. Pied de page
- Créer un pied de page (<footer>) avec fond sombre (bg-dark)
o Le texte doit être centré et blanc (text-center text-white)
o Ajouter un petit texte du type “© 2025 - MonSite”
5. Améliorations visuelles avec des classes utilitaires
- Ajoute un peu de marge interne (padding) à la section “Nos services” : py-5 (padding
vertical)
- Ajoute des coins arrondis aux cartes : rounded
- Ajoute un ombrage aux cartes : shadow ou shadow-lg
- Change la couleur du bouton : btn-primary, btn-success, etc.

Vous aimerez peut-être aussi