Aller au contenu

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>