Introduction

Commencez avec Bootstrap, le framework le plus populaire au monde pour créer des sites réactifs et mobiles, avec jsDelivr et un modèle de page de démarrage.

Sur cette page

Démarrage rapide

Vous cherchez à ajouter rapidement Bootstrap à votre projet ? Utilisez jsDelivr, un CDN open source gratuit. Vous utilisez un gestionnaire de paquets ou vous avez besoin de télécharger les fichiers sources ? Rendez-vous sur la page des téléchargements .

CSS

Copiez-collez la feuille de style <link>dans votre <head>avant toutes les autres feuilles de style pour charger notre CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Beaucoup de nos composants nécessitent l'utilisation de JavaScript pour fonctionner. Plus précisément, ils nécessitent nos propres plugins JavaScript et Popper . Placez l'un des <script>s suivants vers la fin de vos pages, juste avant la </body>balise de fermeture, pour les activer.

Paquet

Incluez chaque plugin JavaScript Bootstrap et chaque dépendance avec l'un de nos deux bundles. Les deux bootstrap.bundle.jset bootstrap.bundle.min.jsincluent Popper pour nos info-bulles et popovers. Pour plus d'informations sur ce qui est inclus dans Bootstrap, veuillez consulter notre section de contenu .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Séparé

Si vous décidez d'utiliser la solution de scripts séparés, Popper doit venir en premier (si vous utilisez des info-bulles ou des popovers), puis nos plugins JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modules

Si vous utilisez <script type="module">, veuillez vous référer à notre section Utilisation de Bootstrap en tant que module .

Composants

Curieux de savoir quels composants nécessitent explicitement notre JavaScript et Popper ? Cliquez sur le lien Afficher les composants ci-dessous. Si vous n'êtes pas sûr du tout de la structure générale de la page, continuez à lire pour un exemple de modèle de page.

Afficher les composants nécessitant JavaScript

Alertes pour rejet
Boutons pour basculer entre les états et fonctionnalité de case à cocher/radio
Carrousel pour tous les comportements, commandes et indicateurs de diapositive
Réduire pour basculer la visibilité du contenu
Listes déroulantes pour l'affichage et le positionnement (nécessite également Popper )
Modaux pour l'affichage, le positionnement et le comportement de défilement
Barre de navigation pour étendre notre plugin Collapse afin d'implémenter un comportement réactif
Offcanvases pour l'affichage, le positionnement et le comportement de défilement
Toasts pour afficher et rejeter
Info-bulles et popovers pour l'affichage et le positionnement (nécessite également Popper )
Scrollspy pour le comportement de défilement et les mises à jour de navigation

Modèle de démarrage

Assurez-vous que vos pages sont configurées avec les dernières normes de conception et de développement. Cela signifie utiliser un doctype HTML5 et inclure une balise meta viewport pour des comportements réactifs appropriés. Mettez tout cela ensemble et vos pages devraient ressembler à ceci :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Pour les prochaines étapes, consultez les documents de mise en page ou nos exemples officiels pour commencer à mettre en page le contenu et les composants de votre site.

Globaux importants

Bootstrap utilise une poignée de styles et de paramètres globaux importants dont vous devrez être conscient lors de son utilisation, qui sont tous presque exclusivement orientés vers la normalisation des styles inter-navigateurs. Plongeons dedans.

Type de document HTML5

Bootstrap nécessite l'utilisation du doctype HTML5. Sans cela, vous verrez un style incomplet funky, mais l'inclure ne devrait pas causer de problèmes considérables.

<!doctype html>
<html lang="en">
  ...
</html>

Balise méta réactive

Bootstrap est développé d'abord mobile , une stratégie dans laquelle nous optimisons d'abord le code pour les appareils mobiles, puis nous adaptons les composants si nécessaire à l'aide de requêtes média CSS. Pour garantir un rendu et un zoom tactile corrects pour tous les appareils, ajoutez la balise méta responsive viewport à votre fichier <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Vous pouvez en voir un exemple en action dans le modèle de démarrage .

Dimensionnement de la boîte

Pour un dimensionnement plus simple en CSS, nous changeons la box-sizingvaleur globale de content-boxà border-box. Cela garantit paddingque cela n'affecte pas la largeur calculée finale d'un élément, mais cela peut causer des problèmes avec certains logiciels tiers tels que Google Maps et Google Custom Search Engine.

Dans les rares cas où vous devez le remplacer, utilisez quelque chose comme ce qui suit :

.selector-for-some-widget {
  box-sizing: content-box;
}

Avec l'extrait de code ci-dessus, les éléments imbriqués, y compris le contenu généré via ::beforeet, ::afterhériteront tous du spécifié box-sizingpour cela .selector-for-some-widget.

En savoir plus sur le modèle de boîte et le dimensionnement sur CSS Tricks .

Redémarrer

Pour un meilleur rendu entre navigateurs, nous utilisons Reboot pour corriger les incohérences entre les navigateurs et les appareils tout en fournissant des réinitialisations légèrement plus avisées aux éléments HTML courants.

Communauté

Restez à jour sur le développement de Bootstrap et contactez la communauté avec ces ressources utiles.

Lisez et abonnez-vous au blog officiel de Bootstrap .
Discutez avec d'autres Bootstrappers sur IRC. Sur le irc.libera.chatserveur, dans le #bootstrapcanal.
Une aide à la mise en œuvre peut être trouvée sur Stack Overflow (étiqueté bootstrap-5).
Les développeurs doivent utiliser le mot-clé bootstrapsur les packages qui modifient ou complètent les fonctionnalités de Bootstrap lors de la distribution via npm ou des mécanismes de livraison similaires pour une découverte maximale.

Vous pouvez également suivre @getbootstrap sur Twitter pour les derniers potins et des vidéos musicales impressionnantes.