Bootstrap Aperçu plug-in
Dans la section précédente discuté dela mise en page des composantsà l'assemblage , il est juste le début. Bootstrap est livré avec 12 sortes plugin jQuery étend la fonctionnalité peut être ajoutée au site plus interactif. Même si vous n'êtes pas un développeur JavaScript avancé, vous pouvez aussi commencer à apprendre les plug-ins Bootstrap JavaScript. API Utiliser les données Bootstrap (Bootstrap API de données), la plupart des plug-in peut être déclenchée sans écrire de code.
Site Références bouchon Bootstrap de deux façons:
- Quote Alone: utiliser un fichier.js *distincts de Bootstrap.Certains composants des plug-ins et CSS dépend d'autres plug-ins. Si vous branchez une référence séparée, assurez-vous qu'ils comprennent les dépendances entre les plug-ins.
- Compiler (simultanément) Quote: Utilisezbootstrap.jsou version compressée debootstrap.min.js.
Ne pas essayer de citer ces deux fichiers, et parce que bootstrap.jsbootstrap.min.js contiennent tous les plugins.
données de propriété
- Vous ne pouvez être en mesure d'utiliser toutes les données d'attribut Bootstrap API de plugin, sans écrire une seule ligne de code JavaScript. Ceci est une API Bootstrap de première classe, il devrait être votre façon préférée.
- Là encore, dans certains cas, vous devrez peut-être désactiver cette fonction. Par conséquent, nous offrons également une méthode de l' API d'attribut de données fermé, à savoir soulever l'espace de noms de données apiet lie les événements de document. Tels que les éléments suivants:
$ (Document) .off ( '. Data-api)
- Pour fermer un plug-in spécifique, juste avant l'espace de noms de données api plus le nom du widget comme un espace de noms, comme indiqué ici:
$ (Document) .off ( '. Alert.data-api)
API Programmatic
Nous fournissons un moyen d'API JavaScript pur pour tous les plugins bootstrap. Tous les appels d'API publiques sont pris en charge individuellement ou en mode enchaînés, et renvoie un ensemble d'éléments qu'elle exploite (Note: la forme et invoquer un accord jQuery). Par exemple:
$ ( ". Btn.danger"). Bouton ( "toggle"). AddClass ( "gras")
Toutes les méthodes peuvent prendre une des options facultatives objet en tant que paramètre, ou une chaîne représentant une méthode particulière, ou sans paramètres (dans ce cas, il sera initialiser le plug-in pour le comportement par défaut), comme suit:
// Initialisé le comportement par défaut de $ ( "# myModal"). Modal ()
// Initialisation clavier ne prend pas en charge le $ ( "# myModal") modal ({clavier: false}).
// Initialisation et appeler immédiatement le spectacle
$ ( "# MyModal"). Modal ( 'show')
Chaque plug-in sur la propriétéde Constructor expose également sonconstructeurd'origine:$ .fn.popover.Constructor.Si vous voulez obtenir une instance d'un widget particulier, vous pouvez obtenir directement à travers les éléments de la page:
$ ( '[Rel = popover]'). Les données ( 'popover').
Évitez les collisions d'espace de noms
Parfois plugins bootstrap peuvent avoir besoin d'être utilisé avec d'autres cadres de l'interface utilisateur. Dans ce cas, les collisions d'espace de noms peuvent se produire. Malheureusement, si cela se produit, vous pouvez restaurer sa valeur d' origine en appelant les méthodesde widget de .noConflict.
// Retourne .fn.button $ avant le var attribué valeur bootstrapButton = $ .fn.button.noConflict () // Pour le $ (). Les fonctions de BootstrapBtn conférés Bootstrap $ .fn.bootstrapBtn = BootstrapButton
événement
Bootstrap fournit un événement personnalisé comme un comportement unique de la plupart des plug-ins. En règle générale, ces événements se présentent sous deux formes:
- Infinitif: Ce sera déclenché lorsque l'événement commence.Tels queex: spectacle.événement Infinitif fournit une fonctionde preventDefault.Ceci permet d'arrêter l'opération avant le début de l'événement.
$ ( '# MyModal'). On ( 'show.bs.modal', function (e) { // Boîte modale Prevent est affiché si (données!) Retour e.preventDefault () }) - forme Participe passé: Ce sera déclenché après l'opération est terminée.Tels queex: montré.