Recherche...
Introduction Afficher sur GitHub
Commencer
Commencez avec Bootstrap, le framework le plus populaire au
Introduction
monde pour créer des sites réactifs et mobiles, avec jsDelivr et un
Télécharger
Contenu
modèle de page de démarrage.
Navigateurs et appareils
Javascript Votre nouvelle carrière de
développement vous
Thématisation attend. Consultez les
Construire des outils dernières annonces.
Webpack annonces via Carbon
Accessibilité
Disposition
Démarrage rapide
Teneur
Vous cherchez à ajouter rapidement Bootstrap à votre projet ? Utilisez jsDelivr, un CDN open
Composants
source gratuit. Vous utilisez un gestionnaire de paquets ou vous avez besoin de télécharger les
Utilitaires fichiers sources ? Rendez-vous sur la page des téléchargements .
Étendre
Migration CSS
Sur Copiez-collez la feuille de style <link>dans votre <head>avant toutes les autres feuilles de style
pour charger notre CSS.
Copie
<link rel="stylesheet"
href="[Link]
ss" integrity="sha384-
zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
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
[Link] [Link] 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 .
Copie
<script
src="[Link]
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="[Link]
[Link]" integrity="sha384-
fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
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.
Copie
<script
src="[Link]
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-
VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
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
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 :
Copie
<!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="[Link]
ss" integrity="sha384-
zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
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="[Link]
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="[Link]
[Link]" integrity="sha384-
fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script
src="[Link]
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-
VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
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.
Copie
<!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>.
Copie
<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 :
Copie
.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 .
Rejoignez la salle Slack officielle .
Discutez avec d'autres Bootstrappers sur IRC. Sur le [Link], 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.
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 (Content Security Policy) plus strictes (Politique
de sécurité du contenu) , 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.
