Explication détaillée des compétences du plug-in_javascript Bootstrap

Les composants abordés dans le chapitre précédent sur les composants de mise en page ne sont que le début. Bootstrap est livré avec 12 plug-ins jQuery, qui étendent les fonctionnalités et ajoutent plus d'interactivité au site. Même si vous n'êtes pas un développeur JavaScript avancé, vous pouvez commencer à apprendre le plugin JavaScript de Bootstrap. Grâce à l'API Bootstrap Data, la plupart des plugins peuvent être déclenchés sans écrire de code.

Il existe deux manières pour un site de référencer le plug-in Bootstrap  :

Référence séparée : Utilisez des fichiers *.js individuels de Bootstrap. Certains plugins et composants CSS dépendent d’autres plugins. Si vous référencez des plugins individuellement, assurez-vous d'abord de vérifier les dépendances entre ces plugins.
Compilez (aussi) les références : Utilisez bootstrap.js ou une version minifié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 deux tous les plugins
."

Tous les plugins dépendent de jQuery. JQuery doit donc être cité avant le fichier du plugin. Veuillez visiter bower.json pour voir les versions de jQuery actuellement prises en charge par Bootstrap.

1. attribut 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 être votre premier choix.
Là encore, il peut y avoir des situations dans lesquelles cette fonctionnalité doit être désactivée. Par conséquent, nous proposons également un moyen de désactiver l'API d'attribut de données, c'est-à-dire de dissocier l'événement avec l'espace de noms data-api et de le lier au document. Comme ça :
$(document).off('.data-api')
Si vous devez fermer un plug-in spécifique, il vous suffit d'ajouter 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 JavaScript pure pour tous les plugins Bootstrap. Toutes les API publiques prennent en charge les méthodes d'appel individuelles ou en chaîne et renvoient la collection d'éléments sur lesquels elles opèrent (remarque : le formulaire d'appel est cohérent avec jQuery). Par exemple :

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

Toutes les méthodes peuvent accepter un objet options optionnel comme paramètre, ou une chaîne représentant une méthode spécifique, ou sans aucun paramètre (dans ce cas, le plugin sera initialisé au comportement par défaut), comme indiqué ci-dessous :

// 初始化为默认行为
$("#myModal").modal()  
 // 初始化为不支持键盘       
$("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
$("#myModal").modal('show') 

Chaque plugin expose également son constructeur d'origine sur la propriété Constructor : $.fn.popover.Constructor. Si vous souhaitez obtenir une instance d'un plugin spécifique, vous pouvez l'obtenir directement via l'élément page :
$('[rel=popover]').data('popover').

3. Évitez les conflits d'espace de noms
Parfois, les plugins Bootstrap peuvent devoir être utilisés avec d'autres frameworks d'interface utilisateur. Dans ce cas, un conflit d'espace de noms peut survenir. Si cela se produit malheureusement, vous pouvez restaurer sa valeur d'origine en appelant la méthode .noConflict du plugin.

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict()
// 为 $().bootstrapBtn 赋予 Bootstrap 功能             
$.fn.bootstrapBtn = bootstrapButton      

4. Événements
Bootstrap fournit des événements personnalisés pour les comportements uniques de la plupart des plugins. De manière générale, ces événements se présentent sous deux formes :

Verbe infinitif : Ceci sera déclenché au début de l'événement. Par exemple ex : show. Les événements infinitifs fournissent la fonction PreventDefault. Cela permet d'arrêter l'exécution d'une opération avant le début de l'événement.

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
 if (!data) return e.preventDefault()
})

Forme du participe passé : Ceci sera déclenché une fois l'action exécutée. Par exemple ex : montré.

Ce qui précède est un bref aperçu du plug-in Bootstrap. J'espère qu'il sera utile à tout le monde de comprendre le plug-in Bootstrap.