pinterest linkedin behance copy arrow-up

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/bootstrap@5.1.3/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>ssuivants vers la fin de vos pages, juste avant la </body> balise de fermeture, pour les activer.

Empaqueter

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Voir le résultat

Pour les étapes suivantes, 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.

HTML5 doctype

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 meta responsive

Bootstrap est développé d'abord sur 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 Meta responsive viewport à votre <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 valeur globale box-sizing de content-box à border-box. Cela garantit que le padding 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 le moteur de recherche personnalisé Google.

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 ci-dessus, les éléments imbriqués, y compris le contenu généré via ::before et ::after, hériteront tous du box-sizing spécifié pour ce .selector-for-some-widget.

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

Redémarrage

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

© 2010-2024 QZYcodes by Quazerty.