Commencer
Un aperçu de Bootstrap, comment télécharger et utiliser, des modèles et exemples de base, et plus encore.
Un aperçu de Bootstrap, comment télécharger et utiliser, des modèles et exemples de base, et plus encore.
Bootstrap (actuellement v3.3.7) 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.
CSS, JavaScript et polices compilés et minifiés. Aucun document ou fichier source original n'est inclus.
Source Less, JavaScript et fichiers de polices, ainsi que nos documents. Nécessite un compilateur Less et une certaine configuration.
Bootstrap porté de Less à Sass pour une inclusion facile dans les projets Rails, Compass ou Sass uniquement.
Les gens de jsDelivr fournissent gracieusement le support CDN pour le CSS et le JavaScript de Bootstrap. Utilisez simplement ces liens CDN Bootstrap .
Vous pouvez également installer et gérer Bootstrap's Less, CSS, JavaScript et les polices à l'aide de Bower :
Vous pouvez également installer Bootstrap en utilisant npm :
require('bootstrap')
chargera tous les plugins jQuery de Bootstrap sur l'objet jQuery. Le bootstrap
module lui-même n'exporte rien. Vous pouvez charger manuellement les plugins jQuery de Bootstrap individuellement en chargeant les /js/*.js
fichiers dans le répertoire de niveau supérieur du package.
Bootstrap's package.json
contient des métadonnées supplémentaires sous les clés suivantes :
less
- chemin vers le fichier source principal de Bootstrap Lessstyle
- chemin vers le CSS non minifié de Bootstrap qui a été précompilé en utilisant les paramètres par défaut (pas de personnalisation)Vous pouvez également installer et gérer Bootstrap's Less, CSS, JavaScript et les polices à l'aide de Composer :
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.
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.
Veuillez noter que tous les plugins JavaScript nécessitent l'inclusion de jQuery , comme indiqué dans le modèle de démarrage . Consultez notrebower.json
pour voir quelles versions de jQuery sont prises en charge.
Une fois téléchargé, décompressez le dossier compressé pour voir la structure de Bootstrap (compilé). Vous verrez quelque chose comme ceci :
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.
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 :
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.
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.
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.
Puis depuis la ligne de commande :grunt-cli
globalement avec npm install -g grunt-cli
./bootstrap/
, puis exécutez npm install
. npm examinera le package.json
fichier 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.
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 sans tête dans PhantomJS .
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.
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
.
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.
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.
Modèle super basique qui inclut la barre de navigation ainsi que du contenu supplémentaire.
Personnalisez la barre de navigation et le carrousel, puis ajoutez de nouveaux composants.
Structure de base pour un tableau de bord d'administration avec barre latérale fixe et barre de navigation.
Mise en page et conception de formulaires personnalisés pour un formulaire de connexion simple.
Créez une barre de navigation personnalisée avec des liens justifiés. La tête haute! Pas trop convivial pour Safari.
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.
Restez à jour sur le développement de Bootstrap et contactez la communauté avec ces ressources utiles.
irc.freenode.net
serveur, dans le canal ##bootstrap .twitter-bootstrap-3
.bootstrap
sur 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.
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 .
<meta>
mentionnée dans la documentation CSSwidth
sur le .container
pour 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 !important
requêtes multimédias ou certains sélecteurs-fu..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.
Nous avons appliqué ces étapes à un exemple. Lisez son code source pour voir les changements spécifiques mis en œuvre.
Vous cherchez à migrer d'une ancienne version de Bootstrap vers la v3.x ? Consultez notre guide de migration .
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.
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.
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.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Prise en charge | Prise en charge | N / A |
iOS | Prise en charge | Prise en charge | Prise en charge |
De même, les dernières versions de la plupart des navigateurs de bureau sont prises en charge.
Chrome | Firefox | Internet Explorer | Opéra | Safari | |
---|---|---|---|---|---|
Mac | Prise en charge | Prise en charge | N / A | Prise en charge | Prise en charge |
les fenêtres | Prise en charge | Prise en charge | Prise en charge | Prise en charge | Non supporté |
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 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.
Caractéristique | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Non supporté | Prise en charge |
box-shadow |
Non supporté | Prise en charge |
transform |
Non supporté | Pris en charge, avec -ms préfixe |
transition |
Non supporté | |
placeholder |
Non supporté |
Visitez Puis-je utiliser... pour plus de détails sur la prise en charge par les navigateurs des fonctionnalités CSS3 et HTML5.
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.
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.
file://
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.
@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.
IE8 ne prend pas entièrement en charge box-sizing: border-box;
lorsqu'il est combiné avec min-width
, max-width
, min-height
ou max-height
. Pour cette raison, à partir de la v3.0.1, nous n'utilisons plus max-width
sur .container
s.
IE8 a quelques problèmes @font-face
lorsqu'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.
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 :
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 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 :
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 .
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.
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-*-1
classes 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 :
.pull-right
à votre dernière colonne de grille pour obtenir l'alignement à droiteLa prise en charge de overflow: hidden
l' <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 .
À 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 .
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: absolute
ou 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.
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 ).
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.
:hover
/ :focus
sur mobileMê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, :hover
les 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 :focus
collants 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.
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 :
@screen-*
variables Moins afin que le papier de votre imprimante soit considéré comme plus grand que très petit.De plus, à partir de Safari v8.0, les .container
s à 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 :
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.
Sur <select>
les éléments, le navigateur de stock Android n'affichera pas les contrôles latéraux s'il y a un border-radius
et/ou border
appliqué. (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.
Vous voulez voir un exemple ? Découvrez cette démo JS Bin.
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 .
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.
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 padding
n'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).
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 .
Si votre navigation contient de nombreux liens et vient avant le contenu principal dans le DOM, ajoutez un Skip to main content
lien avant la navigation (pour une explication simple, consultez cet article du projet A11Y sur les liens de navigation ). L'utilisation de la .sr-only
classe masquera visuellement le lien de saut et la .sr-only-focusable
classe veillera à ce que le lien devienne visible une fois ciblé (pour les utilisateurs de clavier voyants).
En raison de lacunes/bogues de longue date dans Chrome (voir le problème 262171 dans le bug tracker de Chromium ) et Internet Explorer (voir cet article sur les liens dans la page et l'ordre de mise au point ), vous devrez vous assurer que la cible de votre lien de saut est au moins focalisable par programmation en ajoutanttabindex="-1"
.
De plus, vous souhaiterez peut-être supprimer explicitement une indication de focus visible sur la cible (en particulier car Chrome définit également actuellement le focus sur les éléments avec tabindex="-1"
lorsqu'ils sont cliqués avec la souris) avec #content:focus { outline: none; }
.
Notez que ce bogue affectera également tous les autres liens dans la page que votre site pourrait utiliser, les rendant inutiles pour les utilisateurs de clavier. Vous pouvez envisager d'ajouter un correctif provisoire similaire à toutes les autres ancres nommées / identifiants de fragment qui agissent comme cibles de lien.
Lors de l'imbrication d'en-têtes ( <h1>
- <h6>
), l'en-tête principal de votre document doit être un <h1>
. Les rubriques suivantes doivent utiliser logiquement <h2>
-<h6>
de 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 .
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é.
Bootstrap est publié sous licence MIT et est protégé par copyright 2016 Twitter. Réduit en plus petits morceaux, il peut être décrit avec les conditions suivantes.
La licence Bootstrap complète se trouve dans le référentiel du projet pour plus d'informations.
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.
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.