Tutoriel de base Bootstrap

Plugins Bootstrap

Plugin d'effet de transition de Bootstrap Créer une page web avec Bootstrap

Introduction aux plugins de Bootstrap

avant composants de mise en page Les composants discutés dans ce chapitre ne sont qu'un point de départ. Bootstrap est livré avec 12 jQuery plugin, qui étend les fonctionnalités et peut ajouter plus d'interactivité à votre site. Même si vous n'êtes pas un développeur JavaScript avancé, vous pouvez commencer à apprendre les plugins JavaScript de Bootstrap. Utilisez l'API de données Bootstrap (Bootstrap Data API) pour activer la plupart des plugins sans écrire de code.

Il existe deux méthodes pour intégrer les plugins Bootstrap dans un site :

référence individuelleUtilisez les fichiers individuels de Bootstrap pour *.js Certains plugins et composants CSS dépendent d'autres plugins. Si vous mentionnez les plugins individuellement, assurez-vous d'abord de comprendre les relations de dépendance entre ces plugins.
compilation (et) mention des fichiers.Utilisez bootstrap.js ou la version compressée bootstrap.min.js. Ne tentez pas de mentionner ces deux fichiers en même temps, car bootstrap.js et bootstrap.min.js ils contiennent tous les plugins.

Tous les plugins dépendent de jQuery. Par conséquent, il est nécessaire de mentionner jQuery avant le fichier du plugin. Visitez bower.json Voir la version actuelle de jQuery prise en charge par Bootstrap.

Attribut data

Vous pouvez utiliser tous les plugins Bootstrap via l'API de l'attribut data sans écrire une ligne de code JavaScript. C'est un API de premier plan dans Bootstrap, et devrait également être votre choix préféré.
D'autre part, dans certains cas, il peut être nécessaire de désactiver cette fonction. Par conséquent, nous avons également fourni une méthode pour désactiver l'API de l'attribut data, c'est-à-dire se désinscrire de data-api Pour nommer l'espace de noms et lier les événements au document. Voici comment :
```
$(document).off('.data}}-api')
```
Pour fermer un plugin spécifique, il suffit de supprimer l'attribut-Ajoutez le nom du plugin comme espace de nomspacio à l'avant de l'espace de nom de l'API, comme suit :
```
$(document).off('.alert.data-api')
```

API par programmation

Nous fournissons une API en JavaScript pur pour tous les plugins Bootstrap. Toutes les API publiques sont supportées pour les appels individuels ou en chaîne, et retournent l'ensemble des éléments qu'elles manipulent (note : les appels sont identiques à ceux de jQuery). Par exemple :

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

Toutes les méthodes peuvent accepter un objet d'options 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 plugin sera initialisé avec le comportement par défaut), comme suit :

//　Initialise pour le comportement par défaut
$("#myModal").modal()　　　　
　//　Initialise pour ne pas prendre en charge le clavier　　　　　　　　　　　　　　　
$("#myModal").modal({　keyboard:　false　})　　
//　Initialise et appelle immédiatement show
$("#myModal").modal('show')

Chaque plugin dans Constructor L'attribut expose également son constructeur d'origine :$.fn.popover.Constructor。Si vous souhaitez obtenir un exemple d'un plugin spécifique, vous pouvez le faire directement via l'élément de la page :

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

Éviter les conflits de noms d'espace

Parfois, les plugins Bootstrap peuvent nécessiter d'être utilisés avec d'autres cadres UI. Dans ce cas, il peut y avoir des conflits de noms d'espace. Si malheureusement cela se produit, vous pouvez appeler la méthode du plugin .noConflict La méthode rétablit sa valeur d'origine.

//　Retourne la valeur précédente de　$.fn.button
var　bootstrapButton　=　$.fn.button.noConflict()　
//　Pour donner des fonctionnalités Bootstrap à $().bootstrapBtn　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn　=　bootstrapButton

Événement

Bootstrap fournit des événements personnalisés pour les comportements uniques de la plupart des plugins. En règle générale, ces événements ont deux formes :

L'infinitif：Cela sera déclenché au début de l'événement. Par exemple ex: showL'infinitif d'événement fournit preventDefault Fonction. Cela permet d'arrêter l'exécution de l'opération avant le début de l'événement.
```
$('#myModal').on('show.bs.modal', function (e) {
//　Empêcher l'affichage du modal
　　if (!data) return e.preventDefault()　
)
```
Forme passive：Cela se déclenche après l'exécution de l'action. Par exemple ex: montré.

Plugin d'effet de transition de Bootstrap Créer une page web avec Bootstrap