Bootstrap - Présentation des plugins

Les composants abordés dans les chapitres précédents sous Layout Componentsne sont que le début. Bootstrap est livré avec 12 plugins jQuery qui étendent les fonctionnalités et peuvent ajouter plus d'interaction à votre site. Pour commencer avec les plugins JavaScript de Bootstrap, vous n'avez pas besoin d'être un développeur JavaScript avancé. En utilisant l'API Bootstrap Data, la plupart des plugins peuvent être déclenchés sans écrire une seule ligne de code.

Les plugins Bootstrap peuvent être inclus sur votre site sous deux formes -

Individually- Utilisation des fichiers * .js individuels de Bootstrap . Certains plugins et composants CSS dépendent d'autres plugins. Si vous incluez des plugins individuellement, assurez-vous de vérifier ces dépendances dans la documentation.
Ou compiled (all at once)- Utilisation de bootstrap.js ou du minified bootstrap.min.js . N'essayez pas d'inclure les deux, car bootstrap.js et bootstrap.min.js contiennent tous les plugins dans un seul fichier.

Tous les plugins dépendent de jQuery. Donc jQuery doit être inclus avant les fichiers du plugin. Vérifiez bower.json pour voir quelles versions de jQuery sont prises en charge.

Attributs de données

Tous les plugins Bootstrap sont accessibles à l'aide de l'API Data incluse. Par conséquent, vous n'avez pas besoin d'inclure une seule ligne de JavaScript pour appeler l'une des fonctionnalités du plugin.
Dans certaines situations, il peut être souhaitable de désactiver cette fonctionnalité de Data API. Si vous devez désactiver l'API de données, vous pouvez dissocier les attributs en ajoutant la ligne suivante de JavaScript -

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

Pour désactiver un plugin spécifique / unique, incluez simplement le nom du plugin comme espace de noms avec l'espace de noms data-api comme ceci -

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

API programmatique

Les développeurs de Bootstrap estiment que vous devriez pouvoir utiliser tous les plugins uniquement via l'API JavaScript. Toutes les API publiques sont des méthodes uniques, chaînables, et renvoient la collection sur laquelle agit, par exemple -

$(".btn.danger").button("toggle").addClass("fat")

Toutes les méthodes acceptent un objet d'options optionnel, une chaîne qui cible une méthode particulière, ou rien (qui lance un plugin avec un comportement par défaut) comme indiqué ci-dessous -

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Chaque plugin expose également son constructeur brut sur un Constructorpropriété: $ .fn.popover.Constructor . Si vous souhaitez obtenir une instance de plugin particulière, récupérez-la directement à partir d'un élément -

$('[rel = popover]').data('popover').

Pas de conflit

Les plugins Bootstrap peuvent parfois être utilisés avec d'autres frameworks d'interface utilisateur. Dans ces circonstances, des collisions d'espace de noms peuvent parfois se produire. Pour surmonter cet appel.noConflict sur le plugin dont vous souhaitez rétablir la valeur.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Événements

Bootstrap fournit des événements personnalisés pour la plupart des actions uniques du plugin. Généralement, ces événements se présentent sous deux formes -

Infinitive form- Ceci est déclenché au début d'un événement. Par exemple, montrer . Les événements infinitifs fournissent la fonctionnalité preventDefault . Cela offre la possibilité d'arrêter l'exécution d'une action avant qu'elle ne démarre.

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})

Past participle form- Ceci est déclenché à la fin d'une action. Par exemple montré.