Télécharger

Bootstrap (actuellement v3.4.1) propose quelques méthodes simples pour démarrer rapidement, chacune faisant appel à un niveau de compétence et à un cas d'utilisation différents. Lisez attentivement pour voir ce qui convient à vos besoins particuliers.

jsDelivr

Les gens de jsDelivr fournissent gracieusement le support CDN pour le CSS et le JavaScript de Bootstrap. Utilisez simplement ces liens jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Installer avec Bower

Vous pouvez également installer et gérer Bootstrap's Less, CSS, JavaScript et les polices à l'aide de Bower :

bower install bootstrap

Installer avec npm

Vous pouvez également installer Bootstrap en utilisant npm :

npm install bootstrap@3

require('bootstrap')chargera tous les plugins jQuery de Bootstrap sur l'objet jQuery. Le bootstrapmodule lui-même n'exporte rien. Vous pouvez charger manuellement les plugins jQuery de Bootstrap individuellement en chargeant les /js/*.jsfichiers dans le répertoire de niveau supérieur du package.

Bootstrap's package.jsoncontient des métadonnées supplémentaires sous les clés suivantes :

• less- chemin vers le fichier source principal de Bootstrap Less
• style- chemin vers le CSS non minifié de Bootstrap qui a été précompilé en utilisant les paramètres par défaut (pas de personnalisation)

Installer avec Composer

Vous pouvez également installer et gérer Bootstrap's Less, CSS, JavaScript et les polices à l'aide de Composer :

composer require twbs/bootstrap

Préfixe automatique requis pour Less/Sass

Bootstrap utilise Autoprefixer pour gérer les préfixes des fournisseurs CSS . Si vous compilez Bootstrap à partir de sa source Less/Sass et que vous n'utilisez pas notre Gruntfile, vous devrez intégrer vous-même Autoprefixer dans votre processus de construction. Si vous utilisez Bootstrap précompilé ou utilisez notre Gruntfile, vous n'avez pas à vous en soucier car Autoprefixer est déjà intégré à notre Gruntfile.

Ce qui est inclu

Bootstrap est téléchargeable sous deux formes, dans lesquelles vous trouverez les répertoires et fichiers suivants, regroupant logiquement les ressources communes et fournissant des variantes compilées et minifiées.

Bootstrap précompilé

Une fois téléchargé, décompressez le dossier compressé pour voir la structure de Bootstrap (compilé). Vous verrez quelque chose comme ceci :

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Il s'agit de la forme la plus basique de Bootstrap : des fichiers précompilés pour une utilisation rapide dans presque tous les projets Web. Nous fournissons des CSS et JS compilés ( bootstrap.*), ainsi que des CSS et JS compilés et minifiés ( bootstrap.min.*). Les cartes source CSS ( bootstrap.*.map) peuvent être utilisées avec les outils de développement de certains navigateurs. Les polices de Glyphicons sont incluses, tout comme le thème Bootstrap facultatif.

Code source d'amorçage

Le téléchargement du code source Bootstrap inclut les ressources CSS, JavaScript et de police précompilées, ainsi que la source Less, JavaScript et la documentation. Plus précisément, il comprend les éléments suivants et plus :

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Les less/, js/et fonts/sont le code source de nos polices CSS, JS et icônes (respectivement). Le dist/dossier comprend tout ce qui est répertorié dans la section de téléchargement précompilé ci-dessus. Le docs/dossier comprend le code source de notre documentation et de l' examples/utilisation de Bootstrap. Au-delà de cela, tout autre fichier inclus prend en charge les packages, les informations de licence et le développement.

Compiler CSS et JavaScript

Bootstrap utilise Grunt pour son système de construction, avec des méthodes pratiques pour travailler avec le framework. C'est ainsi que nous compilons notre code, exécutons des tests, etc.

Installation de Grunt

Pour installer Grunt, vous devez d' abord télécharger et installer node.js (qui inclut npm). npm signifie node packaged modules et est un moyen de gérer les dépendances de développement via node.js.

1. Installer grunt-cliglobalement avec npm install -g grunt-cli.
2. Accédez au répertoire racine /bootstrap/, puis exécutez npm install. npm examinera le package.jsonfichier et installera automatiquement les dépendances locales nécessaires qui y sont répertoriées.

Une fois terminé, vous pourrez exécuter les différentes commandes Grunt fournies à partir de la ligne de commande.

Commandes Grunt disponibles

grunt dist(Il suffit de compiler CSS et JavaScript)

Régénère le /dist/répertoire avec des fichiers CSS et JavaScript compilés et minifiés. En tant qu'utilisateur Bootstrap, il s'agit normalement de la commande souhaitée.

grunt watch(Regardez)

Surveille les fichiers source Less et les recompile automatiquement en CSS chaque fois que vous enregistrez une modification.

grunt test(Effectuer des tests)

Exécute JSHint et exécute les tests QUnit dans de vrais navigateurs grâce à Karma .

grunt docs(Construire et tester les ressources docs)

Construit et teste CSS, JavaScript et d'autres actifs utilisés lors de l'exécution de la documentation localement via bundle exec jekyll serve.

grunt(Construire absolument tout et exécuter des tests)

Compile et minimise CSS et JavaScript, crée le site Web de documentation, exécute le validateur HTML5 par rapport aux documents, régénère les ressources Customizer, etc. Nécessite Jekyll . Généralement nécessaire uniquement si vous piratez Bootstrap lui-même.

Dépannage

Si vous rencontrez des problèmes lors de l'installation des dépendances ou de l'exécution des commandes Grunt, supprimez d'abord le /node_modules/répertoire généré par npm. Ensuite, relancez npm install.

Modèle de base

Commencez avec ce modèle HTML de base ou modifiez ces exemples . Nous espérons que vous personnaliserez nos modèles et exemples, en les adaptant à vos besoins.

Copiez le code HTML ci-dessous pour commencer à travailler avec un document Bootstrap minimal.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Exemples

Construisez sur le modèle de base ci-dessus avec les nombreux composants de Bootstrap. Nous vous encourageons à personnaliser et à adapter Bootstrap aux besoins de votre projet individuel.

Obtenez le code source de chaque exemple ci-dessous en téléchargeant le référentiel Bootstrap . Des exemples peuvent être trouvés dans le docs/examples/répertoire.

Utiliser le cadre

Modèle de démarrage

Rien que les bases : CSS et JavaScript compilés avec un conteneur.

Thème d'amorçage

Chargez le thème Bootstrap facultatif pour une expérience visuellement améliorée.

Grilles

Plusieurs exemples de dispositions de grille avec les quatre niveaux, l'imbrication, etc.

Jumbotron

Construisez autour du jumbotron avec une barre de navigation et quelques colonnes de grille de base.

Jumbotron étroit

Créez une page plus personnalisée en réduisant le conteneur par défaut et le jumbotron.

Barres de navigation en action

Barre de navigation

Modèle super basique qui inclut la barre de navigation ainsi que du contenu supplémentaire.

Barre de navigation supérieure statique

Modèle super basique avec une barre de navigation supérieure statique ainsi que du contenu supplémentaire.

Barre de navigation fixe

Modèle super basique avec une barre de navigation supérieure fixe ainsi que du contenu supplémentaire.

Composants personnalisés

Couverture

Un modèle d'une page pour créer des pages d'accueil simples et belles.

Carrousel

Personnalisez la barre de navigation et le carrousel, puis ajoutez de nouveaux composants.

Blog

Disposition de blog simple à deux colonnes avec navigation, en-tête et type personnalisés.

Tableau de bord

Structure de base pour un tableau de bord d'administration avec barre latérale fixe et barre de navigation.

Page de connexion

Mise en page et conception de formulaires personnalisés pour un formulaire de connexion simple.

Navigation justifiée

Créez une barre de navigation personnalisée avec des liens justifiés. La tête haute! Pas trop convivial pour Safari.

Pied de page collant

Attachez un pied de page au bas de la fenêtre lorsque le contenu est plus court que celui-ci.

Pied de page collant avec barre de navigation

Attachez un pied de page au bas de la fenêtre avec une barre de navigation fixe en haut.

Expériences

Bootstrap non réactif

Désactivez facilement la réactivité de Bootstrap selon nos documents .

Hors toile

Créez un menu de navigation hors-canevas basculable à utiliser avec Bootstrap.

Outils

Bootlint

Bootlint est l'outil de linter HTML officiel de Bootstrap. Il vérifie automatiquement plusieurs erreurs HTML courantes dans les pages Web qui utilisent Bootstrap de manière assez "vanille". Les composants/widgets de Vanilla Bootstrap nécessitent que leurs parties du DOM soient conformes à certaines structures. Bootlint vérifie que les instances des composants Bootstrap ont un code HTML correctement structuré. Envisagez d'ajouter Bootlint à votre chaîne d'outils de développement Web Bootstrap afin qu'aucune des erreurs courantes ne ralentisse le développement de votre projet.

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 en utilisant IRC sur le irc.freenode.netserveur, dans le canal ##bootstrap .
• Pour obtenir de l'aide sur Bootstrap, demandez sur StackOverflow en utilisant la balisetwitter-bootstrap-3 .
• 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.
• Trouvez des exemples inspirants de personnes construisant avec Bootstrap à la Bootstrap Expo .

Vous pouvez également suivre @getbootstrap sur Twitter pour les derniers potins et des vidéos musicales impressionnantes.

Désactivation de la réactivité

Bootstrap adapte automatiquement vos pages pour différentes tailles d'écran. Voici comment désactiver cette fonctionnalité afin que votre page fonctionne comme cet exemple non réactif .

Étapes pour désactiver la réactivité de la page

1. Omettre la fenêtre <meta>mentionnée dans la documentation CSS
2. Remplacez le widthsur le .containerpour chaque niveau de grille avec une seule largeur, par exemple width: 970px !important;Assurez-vous que cela vient après le CSS Bootstrap par défaut. Vous pouvez éventuellement éviter les !importantrequêtes multimédias ou certains sélecteurs-fu.
3. Si vous utilisez des barres de navigation, supprimez tous les comportements de réduction et d'expansion de la barre de navigation.
4. Pour les dispositions en grille, utilisez des .col-xs-*classes en plus ou à la place des classes moyennes/grandes. Ne vous inquiétez pas, la grille d'appareils extra-petite s'adapte à toutes les résolutions.

Vous aurez toujours besoin de Respond.js pour IE8 (puisque nos requêtes multimédias sont toujours là et doivent être traitées). Cela désactive les aspects "site mobile" de Bootstrap.

Modèle Bootstrap avec la réactivité désactivée

Nous avons appliqué ces étapes à un exemple. Lisez son code source pour voir les changements spécifiques mis en œuvre.

Voir l'exemple non réactif

Prise en charge du navigateur et de l'appareil

Bootstrap est conçu pour fonctionner au mieux dans les derniers navigateurs de bureau et mobiles, ce qui signifie que les anciens navigateurs peuvent afficher des rendus de style différent, bien que pleinement fonctionnels, de certains composants.

Navigateurs pris en charge

Plus précisément, nous prenons en charge les dernières versions des navigateurs et plateformes suivants.

Les navigateurs alternatifs qui utilisent la dernière version de WebKit, Blink ou Gecko, que ce soit directement ou via l'API d'affichage Web de la plateforme, ne sont pas explicitement pris en charge. Cependant, Bootstrap devrait (dans la plupart des cas) s'afficher et fonctionner correctement dans ces navigateurs également. Des informations de support plus spécifiques sont fournies ci-dessous.

Appareils mobiles

De manière générale, Bootstrap prend en charge les dernières versions des navigateurs par défaut de chaque plate-forme majeure. Notez que les navigateurs proxy (tels que Opera Mini, le mode Turbo d'Opera Mobile, UC Browser Mini, Amazon Silk) ne sont pas pris en charge.

Navigateurs de bureau

De même, les dernières versions de la plupart des navigateurs de bureau sont prises en charge.

Sous Windows, nous prenons en charge Internet Explorer 8-11 .

Pour Firefox, en plus de la dernière version stable normale, nous prenons également en charge la dernière version de support étendu (ESR) de Firefox.

Officieusement, Bootstrap devrait avoir une apparence et un comportement suffisants dans Chromium et Chrome pour Linux, Firefox pour Linux et Internet Explorer 7, ainsi que Microsoft Edge, bien qu'ils ne soient pas officiellement pris en charge.

Pour une liste de certains des bogues de navigateur auxquels Bootstrap doit faire face, consultez notre Mur de bogues de navigateur .

Internet Explorer 8 et 9

Internet Explorer 8 et 9 sont également pris en charge, cependant, sachez que certaines propriétés CSS3 et éléments HTML5 ne sont pas entièrement pris en charge par ces navigateurs. De plus, Internet Explorer 8 nécessite l'utilisation de Respond.js pour activer la prise en charge des requêtes multimédias.

Visitez Puis-je utiliser... pour plus de détails sur la prise en charge par les navigateurs des fonctionnalités CSS3 et HTML5.

Internet Explorer 8 et Respond.js

Tenez compte des mises en garde suivantes lorsque vous utilisez Respond.js dans vos environnements de développement et de production pour Internet Explorer 8.

Respond.js et CSS inter-domaines

L'utilisation de Respond.js avec CSS hébergé sur un (sous-)domaine différent (par exemple, sur un CDN) nécessite une configuration supplémentaire. Voir la documentation Respond.js pour plus de détails.

Respond.js etfile://

En raison des règles de sécurité du navigateur, Respond.js ne fonctionne pas avec les pages consultées via le file://protocole (comme lors de l'ouverture d'un fichier HTML local). Pour tester les fonctionnalités réactives dans IE8, affichez vos pages via HTTP(S). Voir la documentation Respond.js pour plus de détails.

Respond.js et@import

Respond.js ne fonctionne pas avec le CSS référencé via @import. En particulier, certaines configurations Drupal sont connues pour utiliser @import. Voir la documentation Respond.js pour plus de détails.

Internet Explorer 8 et le dimensionnement des boîtes

IE8 ne prend pas entièrement en charge box-sizing: border-box;lorsqu'il est combiné avec min-width, max-width, min-heightou max-height. Pour cette raison, à partir de la v3.0.1, nous n'utilisons plus max-widthsur .containers.

Internet Explorer 8 et @font-face

IE8 a quelques problèmes @font-facelorsqu'il est combiné avec :before. Bootstrap utilise cette combinaison avec ses Glyphicons. Si une page est mise en cache et chargée sans la souris sur la fenêtre (c'est-à-dire appuyez sur le bouton d'actualisation ou chargez quelque chose dans un iframe), la page est rendue avant le chargement de la police. Survoler la page (corps) affichera certaines des icônes et survoler les icônes restantes les affichera également. Voir le numéro 13863 pour plus de détails.

Modes de compatibilité IE

Bootstrap n'est pas pris en charge dans les anciens modes de compatibilité d'Internet Explorer. Pour être sûr que vous utilisez le dernier mode de rendu pour IE, pensez à inclure la <meta>balise appropriée dans vos pages :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirmez le mode document en ouvrant les outils de débogage : appuyez sur F12et cochez le « Mode document ».

Cette balise est incluse dans toute la documentation et les exemples de Bootstrap pour garantir le meilleur rendu possible dans chaque version prise en charge d'Internet Explorer.

Voir cette question StackOverflow pour plus d'informations.

Internet Explorer 10 sous Windows 8 et Windows Phone 8

Internet Explorer 10 ne différencie pas la largeur de l' appareil de la largeur de la fenêtre et n'applique donc pas correctement les requêtes multimédias dans le CSS de Bootstrap. Normalement, vous ajouteriez simplement un extrait rapide de CSS pour résoudre ce problème :

@-ms-viewport       { width: device-width; }

Cependant, cela ne fonctionne pas pour les appareils exécutant des versions de Windows Phone 8 antérieures à la mise à jour 3 (alias GDR3) , car ces appareils affichent principalement une vue de bureau au lieu d'une vue "téléphone" étroite. Pour résoudre ce problème, vous devrez inclure les CSS et JavaScript suivants pour contourner le bogue .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Pour plus d'informations et des directives d'utilisation, lisez Windows Phone 8 et Device-Width .

En guise d'avertissement, nous incluons cela dans toute la documentation et les exemples de Bootstrap à titre de démonstration.

Arrondi en pourcentage de Safari

Le moteur de rendu des versions de Safari antérieures à la v7.1 pour OS X et à Safari pour iOS v8.0 rencontrait des problèmes avec le nombre de décimales utilisées dans nos .col-*-1classes de grille. Donc, si vous aviez 12 colonnes de grille individuelles, vous remarqueriez qu'elles étaient courtes par rapport aux autres rangées de colonnes. Outre la mise à niveau de Safari/iOS, vous disposez de plusieurs options de contournement :

• Ajoutez .pull-rightà votre dernière colonne de grille pour obtenir l'alignement à droite
• Ajustez vos pourcentages manuellement pour obtenir l'arrondi parfait pour Safari (plus difficile que la première option)

Modaux, barres de navigation et claviers virtuels

Débordement et défilement

La prise en charge de overflow: hiddenl' <body>élément est assez limitée dans iOS et Android. À cette fin, lorsque vous faites défiler le haut ou le bas d'un modal dans l'un des navigateurs de ces appareils, le <body>contenu commence à défiler. Voir le bogue Chrome #175502 (corrigé dans Chrome v40) et le bogue WebKit #153852 .

Champs de texte iOS et défilement

À partir d'iOS 9.3, lorsqu'un modal est ouvert, si le toucher initial d'un geste de défilement se situe dans les limites d'un textuel <input>ou d'un <textarea>, le <body>contenu sous le modal défilera au lieu du modal lui-même. Voir le bogue WebKit #153856 .

Claviers virtuels

Notez également que si vous utilisez une barre de navigation fixe ou des entrées dans un modal, iOS a un bogue de rendu qui ne met pas à jour la position des éléments fixes lorsque le clavier virtuel est déclenché. Quelques solutions de contournement pour cela incluent la transformation de vos éléments position: absoluteou l'appel d'une minuterie de mise au point pour essayer de corriger le positionnement manuellement. Ceci n'est pas géré par Bootstrap, c'est donc à vous de décider quelle solution convient le mieux à votre application.

Listes déroulantes de la barre de navigation

L' .dropdown-backdropélément n'est pas utilisé sur iOS dans la navigation en raison de la complexité de l'indexation z. Ainsi, pour fermer les listes déroulantes dans les barres de navigation, vous devez cliquer directement sur l'élément déroulant (ou tout autre élément qui déclenchera un événement click dans iOS ).

Zoom du navigateur

Le zoom de page présente inévitablement des artefacts de rendu dans certains composants, à la fois dans Bootstrap et dans le reste du Web. Selon le problème, nous pourrons peut-être le résoudre (recherchez d'abord, puis ouvrez un problème si nécessaire). Cependant, nous avons tendance à les ignorer car ils n'ont souvent pas de solution directe autre que des solutions de contournement hacky.

Collant :hover/ :focussur mobile

Même si le survol réel n'est pas possible sur la plupart des écrans tactiles, la plupart des navigateurs mobiles émulent le support du survol et le rendent :hover"collant". En d'autres termes, :hoverles styles commencent à s'appliquer après avoir appuyé sur un élément et ne s'arrêtent que lorsque l'utilisateur a appuyé sur un autre élément. Cela peut entraîner le :hover"blocage" indésirable des états de Bootstrap sur ces navigateurs. Certains navigateurs mobiles sont également :focuscollants de la même manière. Il n'existe actuellement aucune solution simple à ces problèmes autre que la suppression complète de ces styles.

Impression

Même dans certains navigateurs modernes, l'impression peut être bizarre.

En particulier, à partir de Chrome v32 et quels que soient les paramètres de marge, Chrome utilise une largeur de fenêtre nettement plus étroite que la taille du papier physique lors de la résolution des requêtes multimédias lors de l'impression d'une page Web. Cela peut entraîner l'activation inattendue de la très petite grille de Bootstrap lors de l'impression. Voir le problème #12078 et le bug Chrome #273306 pour plus de détails. Solutions de contournement suggérées :

• Adoptez la grille extra-petite et assurez-vous que votre page semble acceptable en dessous.
• Personnalisez les valeurs des @screen-*variables Moins afin que le papier de votre imprimante soit considéré comme plus grand que très petit.
• Ajoutez des requêtes multimédia personnalisées pour modifier les points d'arrêt de taille de grille pour les supports d'impression uniquement.

De plus, à partir de Safari v8.0, les .containers à largeur fixe peuvent amener Safari à utiliser une taille de police inhabituellement petite lors de l'impression. Voir #14868 et le bogue WebKit #138192 pour plus de détails. Une solution de contournement potentielle consiste à ajouter le CSS suivant :

@media print {
  .container {
    width: auto;
  }
}

Navigateur de stock Android

Prêt à l'emploi, Android 4.1 (et même apparemment certaines versions plus récentes) est livré avec l'application Navigateur comme navigateur Web par défaut (par opposition à Chrome). Malheureusement, l'application Navigateur présente de nombreux bogues et incohérences avec le CSS en général.

Sélectionnez les menus

Sur <select>les éléments, le navigateur de stock Android n'affichera pas les contrôles latéraux s'il y a un border-radiuset/ou borderappliqué. (Voir cette question StackOverflow pour plus de détails.) Utilisez l'extrait de code ci-dessous pour supprimer le CSS offensant et le rendre <select>en tant qu'élément sans style sur le navigateur de stock Android. Le reniflage de l'agent utilisateur évite les interférences avec les navigateurs Chrome, Safari et Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Vous voulez voir un exemple ? Découvrez cette démo JS Bin.

Validateurs

Afin de fournir la meilleure expérience possible aux navigateurs anciens et bogués, Bootstrap utilise des hacks de navigateur CSS à plusieurs endroits pour cibler des CSS spéciaux sur certaines versions de navigateur afin de contourner les bogues dans les navigateurs eux-mêmes. Ces hacks amènent naturellement les validateurs CSS à se plaindre qu'ils ne sont pas valides. Dans quelques endroits, nous utilisons également des fonctionnalités CSS de pointe qui ne sont pas encore entièrement normalisées, mais elles sont utilisées uniquement pour une amélioration progressive.

Ces avertissements de validation n'ont pas d'importance dans la pratique car la partie non hacky de notre CSS est entièrement validée et les parties hacky n'interfèrent pas avec le bon fonctionnement de la partie non hacky, d'où la raison pour laquelle nous ignorons délibérément ces avertissements particuliers.

Nos documents HTML contiennent également des avertissements de validation HTML triviaux et sans conséquence en raison de notre inclusion d'une solution de contournement pour un certain bogue de Firefox .

Assistance tierce

Bien que nous ne prenions officiellement en charge aucun plugin ou add-on tiers, nous offrons quelques conseils utiles pour vous aider à éviter les problèmes potentiels dans vos projets.

Dimensionnement de la boîte

Certains logiciels tiers, y compris Google Maps et Google Custom Search Engine, sont en conflit avec Bootstrap en raison de * { box-sizing: border-box; }, une règle qui fait en sorte qu'il paddingn'affecte pas la largeur calculée finale d'un élément. En savoir plus sur le modèle de boîte et le dimensionnement sur CSS Tricks .

Selon le contexte, vous pouvez remplacer au besoin (option 1) ou réinitialiser le dimensionnement de la boîte pour des régions entières (option 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Accessibilité

Bootstrap suit les normes Web courantes et, avec un effort supplémentaire minimal, peut être utilisé pour créer des sites accessibles à ceux qui utilisent AT .

Sauter la navigation

Si votre navigation contient de nombreux liens et vient avant le contenu principal dans le DOM, ajoutez un Skip to main contentlien avant la navigation (pour une explication simple, consultez cet article du projet A11Y sur les liens de navigation ). L'utilisation de la .sr-onlyclasse masquera visuellement le lien de saut et la .sr-only-focusableclasse veillera à ce que le lien devienne visible une fois ciblé (pour les utilisateurs de clavier voyants).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

En-têtes imbriqués

Lors de l'imbrication d'en-têtes ( <h1>- <h6>), l'en-tête principal de votre document doit être un <h1>. Les titres suivants doivent faire un usage logique de <h2>- de <h6>sorte que les lecteurs d'écran puissent construire une table des matières pour vos pages.

En savoir plus sur HTML CodeSniffer et AccessAbility de Penn State .

Contraste des couleurs

Actuellement, certaines des combinaisons de couleurs par défaut disponibles dans Bootstrap (telles que les différentes classes de boutons stylés , certaines des couleurs de mise en évidence du code utilisées pour les blocs de code de base , la classe d'aide .bg-primary contextuelle d'arrière -plan et la couleur de lien par défaut lorsqu'elle est utilisée sur un fond blanc) avoir un rapport de contraste faible (inférieur au rapport recommandé de 4,5:1 ). Cela peut causer des problèmes aux utilisateurs malvoyants ou daltoniens. Ces couleurs par défaut devront peut-être être modifiées pour augmenter leur contraste et leur lisibilité.

Ressources additionnelles

• Bookmarklet "HTML Codesniffer" pour identifier les problèmes d'accessibilité
• Extension des outils de développement d'accessibilité de Chrome
• Analyseur de contraste de couleur
• Le projet A11Y
• Documentation sur l'accessibilité MDN

FAQ sur les licences

Bootstrap est publié sous licence MIT et est protégé par copyright 2019 Twitter. Réduit en plus petits morceaux, il peut être décrit avec les conditions suivantes.

Il vous oblige à :

• Conservez la licence et l'avis de droit d'auteur inclus dans les fichiers CSS et JavaScript de Bootstrap lorsque vous les utilisez dans vos travaux

Il vous permet de :

• Téléchargez et utilisez librement Bootstrap, en tout ou en partie, à des fins personnelles, privées, internes à l'entreprise ou commerciales
• Utilisez Bootstrap dans les packages ou les distributions que vous créez
• Modifier le code source
• Accorder une sous-licence pour modifier et distribuer Bootstrap à des tiers non inclus dans la licence

Il vous interdit de :

• Tenir les auteurs et les titulaires de licence responsables des dommages car Bootstrap est fourni sans garantie
• Tenir les créateurs ou les détenteurs des droits d'auteur de Bootstrap responsables
• Redistribuez n'importe quel morceau de Bootstrap sans attribution appropriée
• Utiliser toute marque détenue par Twitter d'une manière qui pourrait indiquer ou impliquer que Twitter approuve votre distribution
• Utiliser toute marque détenue par Twitter d'une manière qui pourrait indiquer ou impliquer que vous avez créé le logiciel Twitter en question

Il ne vous oblige pas à :

• Inclure la source de Bootstrap lui-même, ou de toute modification que vous pourriez y avoir apportée, dans toute redistribution que vous pouvez assembler qui l'inclut
• Soumettez les modifications que vous apportez à Bootstrap au projet Bootstrap (bien que de tels commentaires soient encouragés)

La licence Bootstrap complète se trouve dans le référentiel du projet pour plus d'informations.

Traductions

Les membres de la communauté ont traduit la documentation de Bootstrap dans différentes langues. Aucun n'est officiellement pris en charge et ils ne sont peut-être pas toujours à jour.

• Bootstrap 中文文档 (chinois)
• Bootstrap på Dansk (danois)
• Bootstrap en Français (Français)
• Bootstrap auf Deutsch (Allemand)
• Bootstrap en italien (italien)
• Bootstrap 한국어 (coréen)
• Bootstrap em Português do Brasil (portugais brésilien)
• Bootstrap по-русски (russe)
• Bootstrap en Español (Espagnol)
• Türkçe Bootstrap (Turc)
• Bootstrap українською (ukrainien)
• Bootstrap bằng tiếng Việt (vietnamien)

Nous n'aidons pas à organiser ou à héberger des traductions, nous nous contentons de créer des liens vers celles-ci.

Vous avez terminé une nouvelle traduction ou une meilleure traduction ? Ouvrez une pull request pour l'ajouter à notre liste.