Source

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, fourni gratuitement par les gens de jsDelivr. Vous utilisez un gestionnaire de paquets ou vous avez besoin de télécharger les fichiers sources ? Dirigez-vous vers la page de téléchargement.

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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Beaucoup de nos composants nécessitent l'utilisation de JavaScript pour fonctionner. Plus précisément, ils nécessitent jQuery , Popper.js et nos propres plugins JavaScript. Placez les <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.js, puis nos plugins JavaScript.

Nous utilisons la version slim de jQuery , mais la version complète est également prise en charge.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Curieux de savoir quels composants nécessitent explicitement jQuery, notre JS et Popper.js ? 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.

Nos bootstrap.bundle.jset bootstrap.bundle.min.jsincluent Popper , mais pas jQuery . Pour plus d'informations sur ce qui est inclus dans Bootstrap, veuillez consulter notre section de contenu .

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.js )
  • 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
  • Info-bulles et popovers pour l'affichage et le positionnement (nécessite également Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Suivez @getbootstrap sur Twitter .
  • Lisez et abonnez-vous au blog officiel de Bootstrap .
  • Discutez avec d'autres Bootstrappers sur IRC. Sur le irc.freenode.netserveur, 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 ajoutent à la fonctionnalité 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.