Ajouter Bootstrap CDN¶
Voici le squeltte HTML avec les ajouts nécessaires pour utiliser Bootstrap CDN.
Dernière version de Bootstrap
Aussi disponible sur le site de Bootstrap dans la documentation
Styles de base Bootstrap¶
Ajouter le lien vers la feuille de styles CSS de Bootstrap
<!--CSS Bootstrap 5.3.7-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
Vous obtenez le squelette suivant :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TITRE DE LA PAGE</title>
<meta name="author" content="NOM DE L'AUTEUR">
<!--Détection de la taille d'affichage-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--CSS Bootstrap 5.3.7-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
</head>
<body>
<!-- CONTENU DE LA PAGE -->
</body>
</html>
Squelette avec icônes Bootstrap¶
Ajouter le lien vers la feuille de styles des icônes de Bootstrap
<!--Icônes Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
Vous obtenez le squelette suivant :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TITRE DE LA PAGE</title>
<meta name="author" content="NOM DE L'AUTEUR">
<!--Détection de la taille d'affichage-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Icônes Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body>
<!-- CONTENU DE LA PAGE -->
</body>
</html>
Fonctionnalités dynamiques de Bootstrap (menu déroulant, carrousel, etc.)¶
Ajouter la feuille de styles CSS de Bootstrap dans le <head>
et le script d'animation au bas du <body>
.
Vous obtenez le squelette suivant :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TITRE DE LA PAGE</title>
<meta name="author" content="NOM DE L'AUTEUR">
<!--Détection de la taille d'affichage-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--CSS Bootstrap 5.3.7-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
</head>
<body>
<!-- CONTENU DE LA PAGE -->
<!--Script Bootstrap 5.3.7-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
</body>
</html>