Les composants discutés dans les composants de disposition de la section précédente ne sont que le début. Bootstrap est livré avec 12 plug-ins jQuery, qui étendent les fonctions et peuvent ajouter plus d'interactions au site. Même si vous n'êtes pas un développeur JavaScript de haut niveau, vous pouvez commencer à apprendre le plug-in javascript pour bootstrap. Avec l'API de données bootstrap (API de données bootstrap), la plupart des plug-ins peuvent être déclenchés sans écrire de code.
Il existe deux façons de se référer au plugin Bootstrap sur le site :
Référence individuelle: fichiers individuels * .js à l'aide de bootstrap. Certains plug-ins et composants CSS reposent sur d'autres plug-ins. Si vous vous référez à des plugins séparément, assurez-vous de demander d'abord des dépendances entre ces plugins.
Compiler (simultané) Référence: utilisez bootstrap.js ou version compressée de bootstrap.min.js.
"N'essayez pas de référencer les deux fichiers en même temps, car Bootstrap.js et bootstrap.min.js contiennent tous les deux tous les plugins."
Tous les plugins dépendent de jQuery. JQUERY doit donc être référencé avant le fichier du plugin. Veuillez visiter Bower.json pour consulter la version jQuery actuellement prise en charge de Bootstrap.
1. Attributs de données
Vous pouvez utiliser tous les plugins bootstrap uniquement via l'API d'attribut de données sans écrire une seule ligne de code JavaScript. Il s'agit d'une API de première classe dans Bootstrap et devrait également être votre méthode préférée.
Là encore, cette fonctionnalité peut devoir être désactivée dans certains cas. Par conséquent, nous fournissons également un moyen de fermer l'API d'attribut de données, c'est-à-dire d'annuler les événements qui prennent des données-API comme espace de noms et se lient au document. Juste comme ça:
$ (document) .off ('. Data-API')
Pour fermer un plug-in spécifique, ajoutez simplement le nom du plug-in comme espace de noms avant l'espace de noms Data-API, comme indiqué ci-dessous:
$ (document) .off ('. alert.data-api')
2. API de programmation
Nous fournissons une API basée sur JavaScript pure pour tous les plugins bootstrap. Toutes les API publiques prennent en charge les méthodes d'appel individuelles ou enchaînées et renvoient l'ensemble des éléments sur lesquels ils opèrent (Remarque: cohérent avec le formulaire d'appel de JQuery). Par exemple:
$ (". Btn.Danger"). Button ("Toggle"). AddClass ("FAT")Toutes les méthodes peuvent accepter un objet d'option optionnel en tant que paramètre, ou une chaîne représentant une méthode spécifique, ou sans aucun paramètre (dans ce cas, le plug-in sera initialisé comme comportement par défaut), comme indiqué ci-dessous:
// Initialiser vers le comportement par défaut $ ("# mymodal"). Modal () // initialiser pour ne pas prendre en charge le clavier $ ("# myModal"). Modal ({clavier: false}) // initialiser et appeler Show $ ("# myModal"). Modal ('show')Chaque plugin expose également son constructeur d'origine sur la propriété du constructeur: $ .fn.popover.constructor. Si vous souhaitez obtenir une instance d'un plugin spécifique, vous pouvez l'obtenir directement via l'élément de page:
$ ('[rel = popover]'). Data ('Popover').
3. Évitez les conflits d'espace de noms
Parfois, le plug-in bootstrap peut être nécessaire d'être utilisé avec d'autres cadres d'interface utilisateur. Dans ce cas, des conflits d'espace de noms peuvent survenir. Si cela se produit malheureusement, vous pouvez restaurer sa valeur d'origine en appelant la méthode .NoConflict du plugin.
// Renvoie la valeur attribuée avant $ .fn.button var bootstrapbutton = $ .fn.button.noconflict () // attribuez la fonction bootstrap à $ (). Bootstrapbtn $ .fn.bootstrapbtn = bootstrapbutton
4. Événements
Bootstrap offre des événements personnalisés pour le comportement unique de la plupart des plugins. De manière générale, ces événements se présentent sous deux formes:
Verb Infinitive: cela sera déclenché au début de l'événement. Par exemple Ex: Show. Les événements infinitifs du verbe fournissent une fonction de prévention. Cela permet à l'exécution de l'opération d'être arrêtée avant le début de l'événement.
$ ('# mymodal'). sur ('show.bs.modal', fonction (e) {// empêche l'affichage des boîtes modales si (! data) return e.PreventDefault ()})Formulaire de participe passé: cela sera déclenché après l'exécution de l'action. Par exemple Ex: Show.
Ce qui précède est un aperçu simple du plug-in bootstrap. J'espère qu'il sera utile pour tout le monde de comprendre le plug-in Bootstrap.