Bootstrap offline documentation [Eng]

Participez au vote ☆☆☆☆☆★★★★★

bootstrap offline documentation pdf [Eng]

...

Démarrage rapide

Vous souhaitez ajouter rapidement Bootstrap à votre projet? Utilisez BootstrapCDN, fourni gratuitement par les utilisateurs de MaxCDN. Vous utilisez un gestionnaire de paquets ou vous avez besoin de télécharger les fichiers source?

CSS

- collez la feuille de style <link> dans votre <tête> avant toutes les autres feuilles de style pour charger notre CSS.

Beaucoup de nos composants nécessitent l'utilisation de JavaScript pour fonctionner. Plus précisément, ils requièrent jQuery, Popper.js et nos propres plugins JavaScript. Placez les <script> suivants à la fin de vos pages, juste avant la balise de fermeture </ body>, 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 = "htt.

Curieux de savoir quels composants requièrent explicitement jQuery, notre JS et Popper.js? Cliquez sur le lien Afficher les composants ci-dessous. Si vous n'êtes pas sûr 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

Modèle de départ

Assurez-vous que vos pages sont configurées avec les normes de conception et de développement les plus récentes. Cela signifie qu’il est nécessaire d’utiliser un doctype HTML5 et d’inclure une balise méta viewport pour obtenir les comportements réactifs appropriés. Rassemblez tout et vos pages devraient ressembler à ceci:

<! doctype html>

<tête>

<! - Meta tags requis ->

<! - Bootstrap CSS ->

<title> Bonjour tout le monde! </ title>

</ head>

<body>

<h1> Bonjour le monde! </ h1>

<! - JavaScript optionnel ->

<! - jQuery d'abord, puis Popper.js, puis Bootstrap JS ->

<script src = "htt.

</ body>

</ html>

Globaux importants

Bootstrap utilise une poignée de styles et de paramètres globaux importants dont vous devez tenir compte lors de son utilisation, qui sont tous presque exclusivement destinés à la normalisation des styles de navigateur croisés. Let's plonger po

Doctype HTML5

Bootstrap nécessite l'utilisation du doctype HTML5. Sans cela, vous verrez un style funky incomplet, mais son inclusion ne devrait pas causer de ratés considérables.

<! doctype html>

...

</ html>

Balise méta sensible

Bootstrap est d'abord développé sur mobile, stratégie dans laquelle nous optimisons d'abord le code pour les appareils mobiles, puis mettons à l'échelle les composants à l'aide des requêtes de support CSS. Pour que le rendu et le zoom tactile soient corrects pour tous les périphériques, ajoutez la balise méta responsive de la fenêtre d'affichage à votre <tête>.

Vous pouvez voir un exemple de cela en action dans le modèle de départ.

Taille de la boîte

Pour un dimensionnement plus simple en CSS, nous basculons la valeur de dimensionnement de la boîte globale de content-box à border-box. Cela garantit que le remplissage n'affecte pas la largeur finale calculée d'un élément, mais cela peut entraîner 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 l'une des méthodes suivantes:

.selector-for-some-widget {

taille de la boîte: contenu-boîte;

}

Avec l'extrait de code ci-dessus, les éléments imbriqués (y compris le contenu généré via :: beforeand :: after) hériteront tous de la taille de la boîte spécifiée pour ce widget .selector-for-some-widget.

Redémarrer

Pour améliorer le rendu inter-navigateurs, nous utilisons Reboot pour corriger les incohérences entre les navigateurs et les périphériques tout en effectuant des réinitialisations légèrement plus nuancées sur des é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 Bootstrap.
Rejoignez la salle officielle Slack.
Discutez avec d’autres Bootstrappers sur IRC. Sur le serveur irc.freenode.net, dans le canal de démarrage ##.
L'aide à la mise en œuvre peut être trouvée à Stack Overflow (marqué bootstrap-4).
Les développeurs doivent utiliser le mot-clé bootstrap sur les packages qui modifient ou ajoutent des fonctionnalités de Bootstrap lors de la distribution via npm ou des mécanismes de livraison similaires pour une visibilité maximale.

Contenu

Découvrez ce qui est inclus dans Bootstrap, y compris nos variantes de code source et précompilées. N'oubliez pas que les plugins JavaScript de Bootstrap nécessitent jQuery.

Bootstrap précompilé

Une fois téléchargé, décompressez le dossier compressé et vous verrez quelque chose comme ceci:

bootstrap /

├── css /

├── ├── bootstrap.css

├── bootstrap.css.map

St ├── bootstrap.min.css

├── bootstrap.min.css.map

├── bootstrap-grid.css

├── bootstrap-grid.css.map

├── bootstrap-grid.min.css

├── bootstrap-grid.min.css.map

├── bootstrap-reboot.css

├── bootstrap-reboot.css.map

├── bootstrap-reboot.min.css

└── bootstrap-reboot.min.css.map

└── js /

├── bootstrap.bundle.js

├── bootstrap.bundle.min.js

├── bootstrap.js

└── bootstrap.min.js

C’est la forme la plus élémentaire de Bootstrap: des fichiers précompilés pour une utilisation rapide dans presque tous les projets Web. Nous fournissons les fichiers CSS et JS compilés (bootstrap. *), Ainsi que les fichiers CSS et JS compilés et minifiés (bootstrap.min. *). Les cartes sources CSS (bootstrap. *. Map) peuvent être utilisées avec les outils de développement de certains navigateurs. Les fichiers JS fournis (bootstrap.bundle.js et minified bootstrap.bundle.min.js) incluent Popper, mais pas jQuery.

Fichiers CSS

Bootstrap inclut une poignée d'options pour inclure tout ou partie de nos CSS compilées.

...

Code source d'amorçage

Le téléchargement du code source Bootstrap inclut les actifs CSS et JavaScript précompilés, ainsi que les sources Sass, JavaScript et la documentation. Plus spécifiquement, il comprend les éléments suivants et plus encore:

bootstrap /

├── dist /

├── css /

└── js /

├── docs /

└── exemples /

├── js /

└── scss /

Scss / et js / sont le code source de nos CSS et JavaScript. Le répertoire dist / folder comprend tout ce qui est répertorié dans la section de téléchargement précompilé ci-dessus. Le dossier docs / inclut le code source de notre documentation et des exemples / d'utilisation de Bootstrap. De plus, tout autre fichier inclus prend en charge les packages, les informations de licence et le développement.

Navigateurs et appareils

En savoir plus sur les navigateurs et les périphériques, du plus moderne au plus ancien, pris en charge par Bootstrap, y compris les bizarreries et les bugs connus pour chacun.

Navigateurs supportés

Bootstrap prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes. Sous Windows, nous prenons en charge Internet Explorer 10-11 / Microsoft Edge.

Les navigateurs alternatifs utilisant la dernière version de WebKit, Blink ou Gecko, directement ou via l’API de la vue Web de la plate-forme, ne sont pas explicitement pris en charge. Cependant, Bootstrap devrait (dans la plupart des cas) s’afficher et fonctionner correctement dans ces navigateurs. Des informations d'assistance 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 principale. 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.

...

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

De manière non officielle, Bootstrap devrait avoir une apparence et un comportement suffisants dans Chromium et Chrome pour Linux, Firefox pour Linux et Internet Explorer 9, même s’ils ne sont pas officiellement pris en charge.

Pour obtenir une liste de certains des bogues de navigateur rencontrés par Bootstrap, consultez notre mur des bogues de navigateur.

Internet Explorer

Internet Explorer 10+ est pris en charge. IE9 et vers le bas ne l'est pas. Veuillez noter que certaines propriétés CSS3 et certains éléments HTML5 ne sont pas totalement pris en charge dans IE10 ou requièrent des propriétés préfixées pour une fonctionnalité complète. Visitez Puis-je utiliser… pour obtenir des détails sur la prise en charge par le navigateur des fonctionnalités CSS3 et HTML5.

Si vous avez besoin de la prise en charge de IE8-9, utilisez Bootstrap 3. Il s’agit de la version la plus stable de notre code et est toujours prise en charge par notre équipe pour les corrections de bugs critiques et les modifications de la documentation. Cependant, aucune nouvelle fonctionnalité ne sera ajoutée.

Modaux et menus déroulants sur mobile

Débordement et défilement

Prise en charge du débordement: masqué; sur l'élément <body> est assez limité 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 périphériques, le contenu <body> commence à défiler. Voir le bogue Chrome n ° 175502 (corrigé dans Chrome v40) et le bogue WebKit n ° 153852.

Champs de texte iOS et défilement

Depuis iOS 9.2, lorsqu'un modal est ouvert, si le premier geste d'un geste de défilement se situe dans les limites d'un <input> textuel ou d'une <textarea>, le contenu <body> situé sous le modal défile à la place du modal. lui-même. Voir le bogue WebKit n ° 153856.

Navbar Dropdowns

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

Zoom du navigateur

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

Sticky: hover /: focus sur iOS

Alors que le survol n’est pas possible sur la plupart des appareils tactiles, iOS émule ce comportement, ce qui entraîne des styles de survol «persistants» qui persistent après avoir appuyé sur un élément. Ces styles de survol ne sont supprimés que lorsque les utilisateurs tapent sur un autre élément. Ce comportement est considéré comme largement indésirable et ne semble pas poser de problème sur les appareils Android ou Windows.

Tout au long de nos versions v4 alpha et bêta, nous avons inclus un code incomplet et commenté permettant d’opter pour un shim de requête multimédia qui désactiverait les styles de survol dans les navigateurs d’appareils tactiles qui émulent le survol. Ce travail n’a jamais été complètement terminé ni activé, mais pour éviter toute rupture, nous avons choisi de rendre obsolète ce correctif et de conserver les mixins comme raccourcis pour les pseudo-classes.

Impression

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

À partir de Safari version 8.0, l'utilisation de la classe .container à largeur fixe peut amener Safari à utiliser une taille de police inhabituellement petite lors de l'impression. Voir le problème n ° 14868 et le bogue WebKit n ° 138192 pour plus de détails. Une solution possible est la CSS suivante:

@media print {

.récipient {

largeur: auto;

}

Navigateur stock Android

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

Sélectionnez le menu

Sur les éléments <select>, le navigateur standard Android n’affiche pas les contrôles latéraux si un rayon et / ou une bordure sont appliqués. (Voir cette question sur StackOverflow pour plus de détails.) Utilisez l'extrait de code ci-dessous pour supprimer le code CSS incriminé et restituer <select> en tant qu'élément sans style dans le navigateur stock Android. Le sniffing de l'agent utilisateur évite les interférences avec les navigateurs Chrome, Safari et Mozilla.

$ (fonction () {

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 de JS Bin.

Validateurs

Afin de fournir la meilleure expérience possible aux navigateurs anciens et obsolètes, Bootstrap utilise des piratages de navigateur CSS à plusieurs endroits pour cibler des CSS spéciales 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 de leur invalidité. À quelques endroits, nous utilisons également des fonctionnalités CSS de pointe qui ne sont pas encore complètement 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 code CSS est entièrement validée et que les portions hacky n’interfèrent pas avec le bon fonctionnement de la partie non hacky. C’est pourquoi nous ignorons délibérément ces avertissements particuliers.

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

JavaScript

Donnez vie à Bootstrap avec nos plugins JavaScript optionnels basés sur jQuery. En savoir plus sur chaque plugin, nos options d'API données et API de programmation, etc.

Individuel ou compilé

Les plugins peuvent être inclus individuellement (à l’aide des fichiers * .js individuels de Bootstrap), ou tous en même temps à l’aide de bootstrap.js ou de minified bootstrap.min.js (n’incluez pas les deux).

Les dépendances

Certains plugins et composants CSS dépendent d'autres plugins. Si vous incluez des plugins individuellement, assurez-vous de rechercher ces dépendances dans la documentation. Notez également que tous les plugins dépendent de jQuery (cela signifie que jQuery doit être inclus avant les fichiers du plugin). Consultez notre package.json pour voir quelles versions de jQuery sont supportées.

Nos listes déroulantes, popovers et info-bulles dépendent également de Popper.js.

Attributs de données

Presque tous les plugins Bootstrap peuvent être activés et configurés via HTML seul avec des attributs de données (notre méthode préférée d’utilisation de la fonctionnalité JavaScript). Assurez-vous de n'utiliser qu'un seul ensemble d'attributs de données sur un seul élément (par exemple, vous ne pouvez pas déclencher une info-bulle et un modal à partir du même bouton.)

Toutefois, dans certaines situations, il peut être souhaitable de désactiver cette fonctionnalité. Pour désactiver l'API d'attribut de données, dissociez tous les événements du nom du document en utilisant data-apilike de la manière suivante:

$ (document) .off ('. data-api')

Sinon, pour cibler un plugin spécifique, incluez simplement le nom du plugin en tant qu’espace de noms avec l’espace de noms data-api, comme ceci:

$ (document) .off ('. alert.data-api')

Événements

Bootstrap fournit des événements personnalisés pour la plupart des actions uniques des plugins. Généralement, ils se présentent sous une forme de participe passé et infinitif - l'infinitif (ex. Spectacle) étant déclenché au début d'un événement et la forme de participe passé (ex. Affichée) à la fin d'une action.

Tous les événements infinitifs fournissent la fonctionnalité preventDefault (). Cela permet d'arrêter l'exécution d'une action avant qu'elle ne commence. Le renvoi de false à partir d'un gestionnaire d'événement appellera aussi automatiquement preventDefault ().

$ ('# myModal'). on ('show.bs.modal', fonction (e) {

if (! data) return e.preventDefault () // empêche l'affichage de modal

})

API de programmation

Nous pensons également que vous devriez pouvoir utiliser tous les plug-in Bootstrap uniquement via l'API JavaScript. Toutes les API publiques sont des méthodes uniques, pouvant être chaînées, et renvoient la collection sur laquelle on a agi.

Bouton $ ('.btn.danger'). ('toggle'). addClass ('fat')

Toutes les méthodes doivent accepter un objet d'options facultatif, une chaîne de caractères qui cible une méthode particulière ou rien (ce qui initie un plugin avec un comportement par défaut):

$ ('# myModal'). modal () // initialisé avec des valeurs par défaut

$ ('# myModal'). modal ({keyboard: false}) // initialisé sans clavier

$ ('# myModal'). modal ('show') // initialise et appelle immédiatement show

Chaque plugin expose également son constructeur brut sur une propriété du constructeur: $ .fn.popover.Constructor. Si vous souhaitez obtenir une instance de plug-in particulière, récupérez-la directement à partir d'un élément: $ ('[rel = "popover"]'). Data ('popover').

Fonctions asynchrones et transitions

Toutes les méthodes de l'API programmatique sont asynchrones et retournent à l'appelant une fois la transition démarrée, mais avant la fin.

Pour exécuter une action une fois la transition terminée, vous pouvez écouter l'événement correspondant.

$ ('# myCollapse'). sur ('shown.bs.collapse', fonction (e) {

// Action à exécuter une fois que la zone compressible est étendue

})

De plus, un appel de méthode sur un composant en transition sera ignoré.

$ ('# myCarousel'). sur ('slid.bs.carousel', fonction (e) {

$ ('# myCarousel'). carrousel ('2') // va glisser vers la diapositive 2 dès que la transition vers la diapositive 1 est terminée

})

$ ('# myCarousel'). carrousel ('1') // Commencera à glisser vers la diapositive 1 et retournera à l'appelant

$ ('# myCarousel'). carrousel ('2') // !! Sera ignoré, car la transition vers la diapositive 1 n'est pas terminée !!

Paramètres par défaut

Vous pouvez modifier les paramètres par défaut d’un plug-in en modifiant l’objet Constructor.Default du plug-in:

$ .fn.modal.Constructor.Default.keyboard = false // modifie la valeur par défaut de l'option `keyboard` du plug-in modal en false

Pas de conflit

Parfois, il est nécessaire d’utiliser des plugins Bootstrap avec d’autres frameworks d’interface utilisateur. Dans ces circonstances, des collisions d'espaces de noms peuvent parfois se produire. Si cela se produit, vous pouvez appeler .noConflict sur le plug-in dont vous souhaitez rétablir la valeur.

var bootstrapButton = $ .fn.button.noConflict () // retourne $ .fn.button à la valeur précédemment attribuée

$ .fn.bootstrapBtn = bootstrapButton // donne à $ (). bootstrapBtn la fonctionnalité Bootstrap

Numéros de version

La version de chacun des plugins jQuery de Bootstrap est accessible via la propriété VERSION du constructeur du plugin. Par exemple, pour le plugin info-bulle:

$ .fn.tooltip.Constructor.VERSION // => "4.0.0"

Aucune solution de secours spéciale lorsque JavaScript est désactivé

Les plugins de Bootstrap ne se replient pas de manière particulièrement élégante lorsque JavaScript est désactivé. Si vous vous souciez de l'expérience utilisateur dans ce cas, utilisez <noscript> pour expliquer la situation (et comment réactiver JavaScript) à vos utilisateurs et / ou ajouter vos propres solutions de secours personnalisées.

Bibliothèques tierces

Bootstrap ne prend pas officiellement en charge les bibliothèques JavaScript tierces telles que Prototype ou jQuery UI. Malgré les événements .noConflict et namespaced, il se peut que vous deviez résoudre vous-même des problèmes de compatibilité.

Util

Tous les fichiers JavaScript de Bootstrap dépendent de util.js et doivent être inclus avec les autres fichiers JavaScript. Si vous utilisez le fichier bootstrap.js compilé (ou minifié), il n’est pas nécessaire de l’inclure, il est déjà présent.

Télécharger Plus de Téléchargements