Présentation du plugin Bootstrap


Les composants abordés dans le chapitre précédent 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 le site de référencer le plug-in Bootstrap :

  • Référence séparée : utilisez le * individuel de Bootstrap. js Fichier. Certains plugins et composants CSS dépendent d’autres plugins. Si vous référencez des plugins individuellement, assurez-vous d'abord de comprendre les dépendances entre ces plugins.

    Compiler (et simultanément) la référence  : utiliser bootstrap.js ou la 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 les 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.

attribut de données

  • Vous pouvez utiliser tous les plugins Bootstrap simplement 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 débloquer l'événement lié au document avec l'espace de noms data-api. Comme ce qui suit :

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

  • tels que Pour 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')

API programmatique

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 d'options facultatif 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 ：

// Initialisé avec le comportement par défaut
$("#myModal").modal()
// Initialisé pour ne pas prendre en charge le clavier                                         .modal({ Keyboard: false })
// Initialisez et appelez immédiatement show
$("#myModal").modal('show')
Chaque plug-in est dans < L'attribut 🎜>Constructor

expose également son original constructeur : $.fn.popover.Constructor. Si vous souhaitez obtenir une instance d'un plug-in spécifique, vous pouvez l'obtenir directement via l'élément de page :

$('[rel=popover]').data('popover') .
Évitez les conflits d'espace de noms

Parfois, les plug-ins 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 arrive malheureusement, vous pouvez restaurer sa valeur d'origine en appelant la méthode

.noConflict

du plugin.

// Renvoie la valeur assignée avant $.fn.button
var bootstrapButton = $.fn.button.noConflict()
// Attribue Bootstrap aux fonctions $().bootstrapBtn . De manière générale, ces événements se présentent sous deux formes :


Verbe infinitif

: Celui-ci se déclenche 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) {// Empêcher l'affichage de la boîte modale if (!data) return e.preventDefault() })


Forme du participe passé
 : Cela se produira après l'action est exécuté est déclenché. Par exemple
ex : affiché
.