Défi

On souhaite intégrer Bootstrap à la page suivante, représentant la page d'accueil d'un blog.

Voici ce que l'on souhaite obtenir :

Et le code dont on dispose :

1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>Mon espace personnel</title>
6
    <link
7
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
8
      rel="stylesheet"
9
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
10
      crossorigin="anonymous"
11
    />
12
  </head>
13
  <body>
14
    <header class="container">
15
      <h1 class="">Bienvenue sur mon blog!</h1>
16
      <h2 class="">Qui suis-je ?</h2>
17
      <p>
18
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
19
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
20
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
21
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
22
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
23
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
24
        mollit anim id est laborum.
25
      </p>
26
    </header>
27
    <div class="container">
28
      <main>
29
        <div class="" role="alert">
30
          <h4>Bonjour !</h4>
31
          Il s'agit de mes premiers articles, soyez indulgents. Pour me
32
          contacter, vous pouvez
33
          <a class="alert-link" href="#contact">cliquer ici</a>.
34
        </div>
35
        <section class="">
36
          <h2 class="">Mes derniers articles</h2>
37
          <article>
38
            <h3>Lorem Ipsum</h3>
39
            <p>
40
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
41
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
42
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
43
              nisi ut aliquip ex ea commodo consequat.
44
            </p>
45
            <div class="">
46
              <button class="">Lire la suite</button>
47
            </div>
48
          </article>
49
        </section>
50
        <hr/>
51
        <section class="">
52
          <h2 class="" id="contact">Me contacter</h2>
53
          <div>
54
            <form>
55
              <label for="email">Adresse e-mail</label>
56
              <input type="email" class="" id="email" />
57
              <label for="message">Message</label>
58
              <textarea class="" id="message" rows="3"></textarea>
59
          <button type="submit" class="">
60
                Contactez-moi
61
              </button>
62
            </form>
63
          </div>
64
          <h2 class="">Derniers utilisateurs inscrits</h2>
65
          <table class="table">
66
            <thead class="">
67
              <tr>
68
                <th>Nom</th>
69
                <th>Prénom</th>
70
              </tr>
71
            </thead>
72
            <tbody>
73
              <tr>
74
                <td>John</td>
75
                <td>Doe</td>
76
              </tr>
77
              <tr>
78
                <td>Laure</td>
79
                <td>Mipsum</td>
80
              </tr>
81
            </tbody>
82
          </table>
83
        </section>
84
      </main>
85
    </div>
86
    <!-- Bootstrap CDN JavaScript -->
87
    <script
88
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
89
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
90
      crossorigin="anonymous"
91
    ></script>
92
    <script
93
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
94
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
95
      crossorigin="anonymous"
96
    ></script>
97
  </body>
98
</html>

Pour réaliser cet exercice, vous aurez besoin de travailler sur l'environnement de travail :

Question

Intégrez bootstrap au moyen d'un CDN à ce code et ajoutez les classes CSS nécessaires à l'obtention de ce rendu.

À savoir :

  • Le titre h1 sera centré

  • On souhaite appliquer un léger padding (de niveau 2) aux éléments de types h2 et sur les sections

  • "Il s'agit de mes premiers articles..." sera intégré dans une alerte de type info

  • Un fond de couleur claire sera appliqué à la section "Mes derniers articles"

  • Le bouton "Lire la suite" sera centré à droite et de type info

  • Le bouton "Contactez moi" sera de type success

  • Les classes nécessaires seront appliquées aux deux éléments de formulaire

  • L'en-tête du tableau des derniers utilisateurs sera coloré de couleur sombre

Indice

Si vous n'arrivez pas à vous orienter dans la documentation, voici quelques liens qui vous aideront à réaliser le défi 

Solution

1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>Mon espace personnel</title>
6
    <link
7
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
8
      rel="stylesheet"
9
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
10
      crossorigin="anonymous"
11
    />
12
  </head>
13
  <body>
14
    <header class="container">
15
      <h1 class="text-center">Bienvenue sur mon blog!</h1>
16
      <h2 class="pb-2">Qui suis-je ?</h2>
17
      <p>
18
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
19
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
20
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
21
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
22
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
23
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
24
        mollit anim id est laborum.
25
      </p>
26
    </header>
27
    <div class="container">
28
      <main>
29
        <div class="alert alert-info" role="alert">
30
          <h4>Bonjour !</h4>
31
          Il s'agit de mes premiers articles, soyez indulgents. Pour me
32
          contacter, vous pouvez
33
          <a class="alert-link" href="#contact">cliquer ici</a>.
34
        </div>
35
        <section class="p-2 bg-light">
36
          <h2 class="pb-2">Mes derniers articles</h2>
37
          <article>
38
            <h3>Lorem Ipsum</h3>
39
            <p>
40
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
41
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
42
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
43
              nisi ut aliquip ex ea commodo consequat.
44
            </p>
45
            <div class="text-end">
46
              <button class="btn btn-info">Lire la suite</button>
47
            </div>
48
          </article>
49
        </section>
50
        <hr/>
51
        <section class="p-2">
52
          <h2 class="pb-2" id="contact">Me contacter</h2>
53
          <div>
54
            <form>
55
              <label for="email">Adresse e-mail</label>
56
              <input type="email" class="form-control" id="email" />
57
              <label for="message">Message</label>
58
              <textarea class="form-control" id="message" rows="3"></textarea>
59
              <button type="submit" class="btn btn-success">
60
                Contactez-moi
61
              </button>
62
            </form>
63
          </div>
64
          <h2 class="pb-2">Derniers utilisateurs inscrits</h2>
65
          <table class="table">
66
            <thead class="table-dark">
67
              <tr>
68
                <th>Nom</th>
69
                <th>Prénom</th>
70
              </tr>
71
            </thead>
72
            <tbody>
73
              <tr>
74
                <td>John</td>
75
                <td>Doe</td>
76
              </tr>
77
              <tr>
78
                <td>Laure</td>
79
                <td>Mipsum</td>
80
              </tr>
81
            </tbody>
82
          </table>
83
        </section>
84
      </main>
85
    </div>
86
    <!-- Bootstrap CDN JavaScript -->
87
    <script
88
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
89
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
90
      crossorigin="anonymous"
91
    ></script>
92
    <script
93
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
94
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
95
      crossorigin="anonymous"
96
    ></script>
97
  </body>
98
</html>