Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Installation via CDN | Configuration de l'Environnement
Essentiels de Bootstrap pour les Sites Web Modernes

book
Installation via CDN

Lorsque vous travaillez sur un projet HTML, CSS et JS pur, nous pouvons utiliser un CDN pour inclure les fichiers CSS et JavaScript de Bootstrap directement dans le document HTML sans les télécharger sur la machine locale.

Voici comment nous pouvons inclure Bootstrap via CDN dans le fichier HTML :

html
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

Différence de Comportement

Dans les exemples ci-dessous, nous allons démontrer la différence entre les styles par défaut du navigateur et les styles appliqués avec Bootstrap. Nous ne nous concentrerons pas sur l'utilisation de Bootstrap pour le moment.

Styles par Défaut du Navigateur

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Example</title>
</head>
<body>
<button class="btn btn-primary">Primary Button</button>
</body>
</html>

Styles Appliqués avec Bootstrap

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Example</title>

<!-- Include Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<button class="btn btn-primary">Primary Button</button>

<!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Explication

Les deux exemples présentent un élément button orné des classes btn et btn-primary. L'apparence est réalisée uniquement en appliquant ces deux classes fournies par Bootstrap sans besoin de style CSS supplémentaire.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 2

Demandez à l'IA

expand
ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

some-alt