Démarrer avec Bootstrap

Bootstrap est une boîte à outils frontale puissante et riche en fonctionnalités. Construisez n'importe quoi, du prototype à la production, en quelques minutes.

Sur cette page

Démarrage rapide

Commencez par inclure le CSS et le JavaScript prêts pour la production de Bootstrap via CDN sans avoir besoin d'étapes de construction. Voyez-le en pratique avec cette démo Bootstrap CodePen .

Créez un nouveau index.htmlfichier à la racine de votre projet. Incluez <meta name="viewport">également la balise pour un comportement réactif approprié sur les appareils mobiles.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Incluez le CSS et le JS de Bootstrap. Placez la <link>balise dans le <head>pour notre CSS et la <script>balise pour notre bundle JavaScript (y compris Popper pour le positionnement des listes déroulantes, des poppers et des info-bulles) avant la fermeture </body>. En savoir plus sur nos liens CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Vous pouvez également inclure Popper et notre JS séparément. Si vous ne prévoyez pas d'utiliser des listes déroulantes, des popovers ou des info-bulles, économisez quelques kilo-octets en n'incluant pas Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Bonjour le monde! Ouvrez la page dans le navigateur de votre choix pour voir votre page Bootstrap. Vous pouvez maintenant commencer à construire avec Bootstrap en créant votre propre mise en page , en ajoutant des dizaines de composants et en utilisant nos exemples officiels .

Liens CDN

À titre de référence, voici nos principaux liens CDN.

La description	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Vous pouvez également utiliser le CDN pour récupérer l'une de nos versions supplémentaires répertoriées dans la page Contenu .

Prochaines étapes

En savoir un peu plus sur certains paramètres d'environnement globaux importants utilisés par Bootstrap.
Découvrez ce qui est inclus dans Bootstrap dans notre section de contenu et la liste des composants nécessitant JavaScript ci-dessous.
Besoin d'un peu plus de puissance ? Envisagez de construire avec Bootstrap en incluant les fichiers source via le gestionnaire de packages .
Vous cherchez à utiliser Bootstrap en tant que module avec <script type="module">? Veuillez vous référer à notre section Utilisation de Bootstrap en tant que module .

Composants JS

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 nos plugins Collapse et Offcanvas afin de mettre en œuvre des comportements réactifs
Navs avec le plugin Tab pour basculer les volets de contenu
Offcanvases pour l'affichage, le positionnement et le comportement de défilement
Scrollspy pour le comportement de défilement et les mises à jour de navigation
Toasts pour afficher et rejeter
Info-bulles et popovers pour l'affichage et le positionnement (nécessite également Popper )

Globaux importants

Bootstrap utilise une poignée de styles et de paramètres globaux importants, 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 funky et incomplet.

<!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 démarrage rapide .

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 .
Demandez et explorez nos discussions GitHub .
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.