14. Développement Web - TP N°14





Résultat attendu :

Résultat TP14_1
bootstrap.html

Résultat TP14_2
bootstrap.html

Notez que la police d'affichage
a été modifiée en Verdana





14.1. Objectif

On désire créer une page bootstap.html et lui appliquer des styles en utilisant Bootstrap.

14.2. Inclusion de bootstrap

Comme indiqué dans le cours CSS sur Bootstrap, ajoutez le fichier CSS et le script Javascript pour la version 5.3 en utilisant CDN jsdeliver.com.

14.3. header

Créer un header dans lequel on ajoute un titre h1 de libellé "Ma Page Web". Le titre h1 doit être compris dans un div.

Appliquez ensuite les styles suivants en utilisant class="..." :

14.4. footer

Créer un footer dans lequel on ajoute un paragraphe "© 2024 Ma Page Web. Tous droits réservés.". Le paragraphe p doit être compris dans un div.

Appliquez ensuite les styles suivants en utilisant class="..." :

14.5. Barre de navigation

Créer une barre de navigation située après le header. Le code est assez conséquent et très spécifique :

  1. <!-- Barre de navigation -->
  2. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  3.   <div class="container">
  4.     <a class="navbar-brand" href="#">Mon Site</a>
  5.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  6.       <span class="navbar-toggler-icon"></span>
  7.     </button>
  8.     <div class="collapse navbar-collapse" id="navbarNav">
  9.       <ul class="navbar-nav">
  10.         <li class="nav-item">
  11.           <a class="nav-link" href="#">Accueil</a>
  12.         </li>
  13.         <li class="nav-item">
  14.           <a class="nav-link" href="#">Mon CV</a>
  15.         </li>
  16.         <li class="nav-item">
  17.           <a class="nav-link" href="#">Mes résultats</a>
  18.         </li>
  19.       </ul>
  20.     </div>
  21.   </div>
  22. </nav>

14.6. Tableau

Créer un div de classe container mt-4. Puis ajouter dans ce div un titre h2 de libellé "Un tableau".

Après le h2, ajouter une table :

  2.     <thead>
  3.       <tr>
  4.         <th>#</th>
  5.         <th>Nom</th>
  6.         <th>Âge</th>
  7.         <th>Ville</th>
  8.       </tr>
  9.     </thead>
  10.     <tbody>
  11.       <tr>
  12.         <th>1</th>
  13.         <td>John Doe</td>
  14.         <td>25</td>
  15.         <td>New York</td>
  16.       </tr>
  17.       <tr>
  18.         <th>2</th>
  19.         <td>Jane Smith</td>
  20.         <td>30</td>
  21.         <td>Paris</td>
  22.       </tr>
  23.      
  24.     </tbody>
  25.   </table>

Appliquez les styles suivants :






14.7. Espacements

Ajouter deux espacements de type div :

  1. <div class="container my-5"></div>
  2.  
  3. <div class="container my-5"></div>

14.8. Formulaire

Créer un div de classe container mt-4. Puis ajouter dans ce div un titre h2 de libellé "Formulaire".

Créer un formulaire qui comprend :

Entourez chacun des champs par un div :

  1. <div class="mb-3">
  2.     <label ...>Produit</label>
  3.     <input type="text" ...>
  4. </div>

Appliquez les styles (class=) suivants :

14.9. Deux containers par ligne

Après le deuxième espacement créé précédemment créer un nouveau div de classe container mt-4.

A l'intérieur de ce div, créer un deuxième div de classe row.

A l'intérieur de ce dernier div ajouter le code suivant :

  1. <!-- Premier Container Bootstrap -->
  2. <div class="col-md-3">
  3.     <div class="container border p-3">
  4.         <h3>Container 1</h3>
  5.         <p>Contenu du premier container.</p>
  6.     </div>
  7. </div>
  8.  
  9. <!-- Deuxième Container Bootstrap -->
  10. <div class="col-md-9">
  11.     <div class="container border p-3">
  12.         <h3>Container 2</h3>
  13.         <p>Contenu du deuxième container.</p>
  14.     </div>
  15. -</div>

14.10. Modification du layout du formulaire

Comment faire pour que le formulaire n'occupe pas la totalité du div qui le contient et qu'il soit centré horizontalement dans ce container ?

14.11. Pour aller plus loin

Vous trouverez d'autres mises en pages et composants sur Bootstrap Introduction.