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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Beaucoup de nos composants nécessitent l'utilisation de JavaScript pour fonctionner. Plus précisément, ils nécessitent jQuery , Popper et nos propres plugins JavaScript. Nous utilisons la version slim de jQuery , mais la version complète est également prise en charge.

Placez l'un des <script>s suivants vers la fin de vos pages, juste avant la </body>balise de fermeture, pour les activer. jQuery doit venir en premier, puis Popper, puis nos plugins JavaScript.

Paquet

Incluez chaque plugin Bootstrap JavaScript avec l'un de nos deux bundles. Les deux bootstrap.bundle.jset bootstrap.bundle.min.jsincluent Popper pour nos info-bulles et popovers, mais pas jQuery . Incluez d'abord jQuery, puis un bundle JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Composants

Curieux de savoir quels composants nécessitent explicitement jQuery, notre JavaScript et Popper ? Cliquez sur le lien Afficher les composants ci-dessous. Si vous n'êtes pas sûr de la structure 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
Scrollspy pour le comportement de défilement et les mises à jour de navigation
Info-bulles et popovers pour l'affichage et le positionnement (nécessite également Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

C'est tout ce dont vous avez besoin pour les exigences générales de la page. 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, shrink-to-fit=no">

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-4).
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.

CSP et SVG intégrés

Plusieurs composants Bootstrap incluent des SVG intégrés dans notre CSS pour styliser les composants de manière cohérente et facile sur tous les navigateurs et appareils. Pour les organisations avec des configurations CSP plus strictes , nous avons documenté toutes les instances de nos SVG intégrés (qui sont tous appliqués via background-image) afin que vous puissiez examiner plus en détail vos options.

Bouton Fermer (utilisé dans les alertes et les modaux)
Cases à cocher et boutons radio personnalisés
Commutateurs de formulaire
Icônes de validation de formulaire
Menus de sélection personnalisés
Commandes du carrousel
Boutons de basculement de la barre de navigation

Sur la base de la conversation de la communauté , certaines options pour résoudre ce problème dans votre propre base de code incluent le remplacement des URL par des actifs hébergés localement, la suppression des images et l'utilisation d'images en ligne (pas possible dans tous les composants) et la modification de votre CSP. Notre recommandation est d'examiner attentivement vos propres politiques de sécurité et de décider de la meilleure voie à suivre, si nécessaire.