Appliquez la notion

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

Question

Importez les scripts nécessaires au bon fonctionnement de Bootstrap dans le fichier suivant, au moyen du CDN proposé par la documentation.

1
<!DOCTYPE html>
2
<html lang="fr">
3
<head>
4
    <meta charset="utf-8"/>
5
    <title>Mon espace personnel</title>
6
</head>
7
<body>
8
<main class="container">
9
   <header>
10
        <h1>Mon espace personnel</h1>
11
        <p>
12
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
13
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
14
        </p>
15
    </header>
16
</main>
17
</body>
18
</html>
19

Voici le résultat attendu, si la librairie est correctement importée :

Solution

Voici ce que vous avez dû obtenir :

1
<!DOCTYPE html>
2
<html lang="fr">
3
<head>
4
    <meta charset="utf-8"/>
5
    <title>Mon espace personnel</title>
6
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
7
</head>
8
<body>
9
<main class="container">
10
 <header class="bg-light p-4">
11
        <h1>Mon espace personnel</h1>
12
        <p>
13
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
14
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
15
        </p>
16
    </header>
17
</main>
18
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
19
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
20
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
21
</body>
22
</html>