Ce site est en cours de reconstruction certains liens peuvent ne pas fonctionner ou certaines images peuvent ne pas s'afficher.

stacks

accueil cours counter_1 Réseau counter_2 (X)HTML counter_3 CSS counter_4 CSS Extra counter_4 Travaux pratiques counter_4 Sitographie

14. Développement Web - TP N°14

Résultat attendu :

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="..." :

pour le header : bg-primary text-white text-center py-5 (voir Spacing pour py-5)
pour le div : container
pour h1 : display-4

14.4. footer

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

pour le footer : bg-dark text-white text-center py-2
pour le div : container

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 :

Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ez_web.php on line 422

Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ez_web.php on line 422

Afficher le code

<!-- Barre de navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Mon Site</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Accueil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Mon CV</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Mes résultats</a>
        </li>
      </ul>
    </div>
  </div>
</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 :

Afficher le code

<table>
    <thead>
      <tr>
        <th>#</th>
        <th>Nom</th>
        <th>Âge</th>
        <th>Ville</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Jane Smith</td>
        <td>30</td>
        <td>Paris</td>
      </tr>
      
    </tbody>
  </table>

Appliquez les styles suivants :

pour la balise table ajouter une classe table
pour les th dans thead ajouter scope="col"
pour les th dans tbody ajouter scope="row"

14.7. Espacements

Ajouter deux espacements de type div :

Afficher le code

<div class="container my-5"></div>
 
<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 :

un label "Produit" ainsi que le champ input associé de type text
un label "Quantité" ainsi que le champ input associé de type number
un bouton de type submit de texte Ajouter
un bouton de type reset de texte RAZ

Entourez chacun des champs par un div :

Afficher le code

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

Appliquez les styles (class=) suivants :

pour les label : form-label
pour les input : form-control
pour le button Ajouter : btn btn-primary
pour le button RAZ : btn btn-secondary

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 :

Afficher le code

<!-- Premier Container Bootstrap -->
<div class="col-md-3">
    <div class="container border p-3">
        <h3>Container 1</h3>
        <p>Contenu du premier container.</p>
    </div>
</div>
 
<!-- Deuxième Container Bootstrap -->
<div class="col-md-9">
    <div class="container border p-3">
        <h3>Container 2</h3>
        <p>Contenu du deuxième container.</p>
    </div>
-</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.