Javascript

Donnez vie aux composants de Bootstrap, désormais avec 13 plugins jQuery personnalisés.

Individuel ou compilé

Les plugins peuvent être inclus individuellement (bien que certains aient des dépendances requises), ou tous à la fois. bootstrap.js et bootstrap.min.js contiennent tous les plugins dans un seul fichier.

Attributs de données

Vous pouvez utiliser tous les plugins Bootstrap uniquement via l'API de balisage sans écrire une seule ligne de JavaScript. Il s'agit de l'API de première classe de Bootstrap et devrait être votre première considération lors de l'utilisation d'un plugin.

Cela dit, dans certaines situations, il peut être souhaitable de désactiver cette fonctionnalité. Par conséquent, nous offrons également la possibilité de désactiver l'API d'attribut de données en déliant tous les événements sur l'espace de noms du corps avec `'data-api'`. Cela ressemble à ceci :

  1. $ ( 'corps' ). désactivé ( '.data-api' )

Alternativement, pour cibler un plugin spécifique, incluez simplement le nom du plugin en tant qu'espace de noms avec l'espace de noms data-api comme ceci :

  1. $ ( 'corps' ). désactivé ( '.alert.data-api' )

API programmatique

Nous pensons également que vous devriez pouvoir utiliser tous les plugins Bootstrap uniquement via l'API JavaScript. Toutes les API publiques sont des méthodes uniques et chaînées et renvoient la collection sur laquelle elles ont agi.

  1. $ ( ".btn.danger" ). bouton ( "basculer" ). addClass ( "gras" )

Toutes les méthodes doivent accepter 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) :

  1. $ ( "#monModal" ). modal () // initialisé avec les valeurs par défaut
  2. $ ( "#monModal" ). modal ({ keyboard : false }) // initialisé sans clavier
  3. $ ( "#monModal" ). modal ( 'show' ) // initialise et invoque show immédiatement

Chaque plugin expose également son constructeur brut sur une propriété `Constructor` : $.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

Parfois, il est nécessaire d'utiliser des plugins Bootstrap avec d'autres frameworks d'interface utilisateur. Dans ces circonstances, des collisions d'espaces de noms peuvent parfois se produire. Si cela se produit, vous pouvez appeler .noConflictle plugin dont vous souhaitez annuler la valeur.

  1. var bootstrapButton = $ . fn . bouton . noConflict () // retourne $.fn.button à la valeur précédemment assignée
  2. $ . fn . bootstrapBtn = bootstrapButton // donne à $().bootstrapBtn la fonctionnalité d'amorçage

Événements

Bootstrap fournit des événements personnalisés pour les actions uniques de la plupart des plugins. Généralement, ceux-ci se présentent sous une forme infinitive et participe passé - où l'infinitif (ex. show) est déclenché au début d'un événement, et sa forme de participe passé (ex. shown) est déclenchée à la fin d'une action.

Tous les événements infinitifs fournissent la fonctionnalité preventDefault. Cela permet d'arrêter l'exécution d'une action avant qu'elle ne démarre.

  1. $ ( '#monModal' ). on ( 'montrer' , fonction ( e ) {
  2. si (! données ) renvoie e . preventDefault () // empêche l'affichage du modal
  3. })

À propos des transitions

Pour des effets de transition simples, incluez bootstrap-transition.js une fois avec les autres fichiers JS. Si vous utilisez le fichier bootstrap.js compilé (ou minifié) , il n'est pas nécessaire de l'inclure, il est déjà là.

Cas d'utilisation

Quelques exemples du plugin de transition :

  • Glissement ou fondu dans les modaux
  • Disparition des onglets
  • Disparition des alertes
  • Vitres carrousel coulissantes

Exemples

Les modaux sont des invites de dialogue simplifiées, mais flexibles, avec les fonctionnalités minimales requises et des valeurs par défaut intelligentes.

Exemple statique

Un modal rendu avec un en-tête, un corps et un ensemble d'actions dans le pied de page.

  1. <div class = "modal hide fade" >
  2. <div class = "en-tête-modal" >
  3. < type de bouton = "bouton" class = "fermer" data-dismiss = "modal" aria-hidden = "true" > × </bouton>
  4. <h3> En-tête modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Un beau corps… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Fermer </a>
  11. <a href = "#" class = "btn btn-primary" > Enregistrer les modifications </a>
  12. </div>
  13. </div>

Démo en direct

Basculez un modal via JavaScript en cliquant sur le bouton ci-dessous. Il glissera vers le bas et s'estompera à partir du haut de la page.

  1. <!-- Bouton pour déclencher modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Lancer la démo modale </a>
  3.  
  4. <!--Modalité -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "en-tête-modal" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > En -tête modal </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Un beau corps… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <bouton class = "btn" data-dismiss = "modal" aria-hidden = "true" > Fermer </button>
  15. <button class = "btn btn-primary" > Enregistrer les modifications </button>
  16. </div>
  17. </div>

Usage

Via les attributs de données

Activez un modal sans écrire de JavaScript. Définissez data-toggle="modal"un élément de contrôleur, comme un bouton, avec un data-target="#foo"ou href="#foo"pour cibler un modal spécifique à basculer.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Lancer modal </button>

Via Javascript

Appelez un modal avec id myModalavec une seule ligne de JavaScript :

  1. $ ( '#monModal' ). modale ( options )

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-backdrop="".

Nom taper défaut la description
toile de fond booléen vrai Inclut un élément modal-backdrop. Vous pouvez également spécifier staticun fond qui ne ferme pas le modal au clic.
clavier booléen vrai Ferme le modal lorsque la touche d'échappement est enfoncée
Afficher booléen vrai Affiche le modal lorsqu'il est initialisé.
télécommande chemin faux

Si une URL distante est fournie, le contenu sera chargé via la loadméthode de jQuery et injecté dans le fichier .modal-body. Si vous utilisez l'API de données, vous pouvez également utiliser la hrefbalise pour spécifier la source distante. Un exemple de ceci est montré ci-dessous :

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Méthodes

.modal(options)

Active votre contenu en tant que modal. Accepte une option facultative object.

  1. $ ( '#monModal' ). modale ({
  2. clavier : faux
  3. })

.modal('basculer')

Bascule manuellement un modal.

  1. $ ( '#monModal' ). modal ( 'basculer' )

.modal('montrer')

Ouvre manuellement un modal.

  1. $ ( '#monModal' ). modal ( 'montrer' )

.modal('masquer')

Masque manuellement un modal.

  1. $ ( '#monModal' ). modal ( 'cacher' )

Événements

La classe modale de Bootstrap expose quelques événements pour se connecter à la fonctionnalité modale.

Événement La description
Afficher Cet événement se déclenche immédiatement lorsque la showméthode d'instance est appelée.
montré Cet événement est déclenché lorsque le modal a été rendu visible à l'utilisateur (il attendra que les transitions CSS soient terminées).
cacher Cet événement est déclenché immédiatement lorsque la hideméthode d'instance a été appelée.
caché Cet événement est déclenché lorsque le modal a fini d'être caché à l'utilisateur (il attendra que les transitions CSS soient terminées).
  1. $ ( '#monModal' ). on ( 'caché' , fonction () {
  2. // faire quelque chose…
  3. })

Exemple dans la barre de navigation

Le plugin ScrollSpy permet de mettre à jour automatiquement les cibles de navigation en fonction de la position de défilement. Faites défiler la zone sous la barre de navigation et regardez la classe active changer. Les sous-éléments de la liste déroulante seront également mis en surbrillance.

@gros

Ad leggings keytar, brunch id art party dolor labore. Pitchfork an enim lo-fi avant qu'ils ne soient épuisés. Tumblr des droits de vélo de la ferme à la table, peu importe. Cardigan Anim keffieh carles. Le photomaton de Velit seitan mcsweeney 3 wolf moon irure. Cosby pull lomo jean shorts, williamsburg hoodie minim dont vous n'avez probablement pas entendu parler et cardigan trust fund culpa biodiesel wes anderson esthétique. Nihil accusamus tatoué, credo ironie biodiesel keffieh artisan ullamco consequat.

@mdo

Planche à roulettes à moustache Veniam marfa, barbe à fourche adipisicing fugiat velit. Freegan beard aliqua cupidatat vero de mcsweeney. Cupidatat quatre loko nisi, ea helvetica nulla carles. Camion de nourriture de pull cosby tatoué, vinyle non freegan de mcsweeney's quis. Lo-fi wes anderson +1 vestimentaire. Carles exercitation non esthétique qui s'embourgeoise. Brooklyn adipisicing bière artisanale vice keytar deserunt.

une

Occaecat commodo aliqua delectus. Planche à roulettes Fap Craft Beer Deserunt ea. Droits de bicyclette Lomo adipisicing banh mi, velit ea sunt café d'origine unique locavore de niveau supérieur dans magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sac banane durable delectus consectetur iphone.

deux

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, sac messager culpa marfa quel que soit le food truck délectus. Sapiente synth id assumenda. Locavore sed helvetica cliché ironie, Thundercats vous n'avez probablement pas entendu parler d'eux consequat hoodie sans gluten lo-fi fap aliquip. Labore elit placeat avant qu'ils ne soient épuisés, terry richardson proident brunch nesciunt quis cosby pull pariatur keffiyeh ut helvetica artisan. Cardigan bière artisanale seitan prêt à l'emploi velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco Thundercats.


Usage

Via les attributs de données

Pour ajouter facilement un comportement scrollspy à votre navigation dans la barre supérieure, ajoutez simplement data-spy="scroll"l'élément que vous souhaitez espionner (le plus souvent, il s'agit du corps) et data-target=".navbar"sélectionnez la navigation à utiliser. Vous voudrez utiliser scrollspy avec un .navcomposant.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Via Javascript

Appelez le scrollspy via JavaScript :

  1. $ ( '#barre de navigation' ). parcheminespion ()
La tête haute! Les liens de la barre de navigation doivent avoir des cibles d'ID résolubles. Par exemple, un <a href="#home">home</a>must correspond à quelque chose dans le dom comme <div id="home"></div>.

Méthodes

.scrollspy('actualiser')

Lorsque vous utilisez scrollspy en conjonction avec l'ajout ou la suppression d'éléments du DOM, vous devrez appeler la méthode refresh comme ceci :

  1. $ ( '[data-spy="scroll"]' ). chaque ( fonction () {
  2. var $espion = $ ( ceci ). scrollspy ( 'actualiser' )
  3. });

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-offset="".

Nom taper défaut la description
décalage Numéro dix Pixels à décaler du haut lors du calcul de la position du défilement.

Événements

Événement La description
Activer Cet événement se déclenche chaque fois qu'un nouvel élément est activé par le scrollspy.

Exemples d'onglets

Ajoutez une fonctionnalité d'onglet rapide et dynamique pour passer d'un volet à l'autre du contenu local, même via des menus déroulants.

Denim brut, vous n'avez probablement pas entendu parler d'eux shorts en jean Austin. Nesciunt tofu sumptown aliqua, nettoyage de maître de synthé rétro. Moustache cliché tempor, williamsburg carles vegan helvetica. Reprehenderit boucher rétro keffieh dreamcatcher synthé. Cosby pull eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, boucher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Usage

Activer les onglets tabulables via JavaScript (chaque onglet doit être activé individuellement) :

  1. $ ( '#myTab a' ). cliquez sur ( fonction ( e ) {
  2. e . preventDefault ();
  3. $ ( ceci ). onglet ( 'afficher' );
  4. })

Vous pouvez activer des onglets individuels de plusieurs manières :

  1. $ ( '#myTab a[href="#profile"]' ). onglet ( 'afficher' ); // Sélectionner l'onglet par nom
  2. $ ( '#myTab a:first' ). onglet ( 'afficher' ); // Sélectionner le premier onglet
  3. $ ( '#myTab a:last' ). onglet ( 'afficher' ); // Sélectionner le dernier onglet
  4. $ ( '#myTab li:eq(2) a' ). onglet ( 'afficher' ); // Sélectionne le troisième onglet (indexé à 0)

Balisage

Vous pouvez activer une navigation par onglets ou pilules sans écrire de JavaScript en spécifiant simplement data-toggle="tab"ou data-toggle="pill"sur un élément. L'ajout des classes navet à l'onglet appliquera le style de l'onglet Bootstrap.nav-tabsul

  1. <ul class = "nav nav-onglets" >
  2. <li><a href = "#home" data-toggle = "tab" > Accueil </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Messagerie </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Paramètres </a></li>
  6. </ul>

Méthodes

$().tab

Active un élément d'onglet et un conteneur de contenu. L'onglet doit avoir un data-targetou un hrefciblant un nœud de conteneur dans le DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Accueil </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Messagerie </a></li>
  5. <li><a href = "#settings" > Paramètres </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profil" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "paramètres" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( fonction () {
  17. $ ( '#myTab a:last' ). onglet ( 'afficher' );
  18. })
  19. </script>

Événements

Événement La description
Afficher Cet événement se déclenche lors de l'affichage de l'onglet, mais avant l'affichage du nouvel onglet. Utilisez event.targetet event.relatedTargetpour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
montré Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez event.targetet event.relatedTargetpour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'montré' , fonction ( e ) {
  2. e . cible // onglet activé
  3. e . relatedTarget // onglet précédent
  4. })

Exemples

Inspiré de l'excellent plugin jQuery.tipsy écrit par Jason Frame ; Les info-bulles sont une version mise à jour, qui ne repose pas sur des images, utilise CSS3 pour les animations et les attributs de données pour le stockage local des titres.

Pour des raisons de performances, l'info-bulle et les API de données contextuelles sont opt-in, ce qui signifie que vous devez les initialiser vous -même .

Passez la souris sur les liens ci-dessous pour afficher les info-bulles :

Pantalons serrés de niveau supérieur keffieh dont vous n'avez probablement pas entendu parler. Photomaton beard raw denim letterpress vegan messenger bag sumptown. Du seitan de la ferme à la table, les vêtements américains fixie quinoa 8 bits durables de mcsweeney ont un chambray en vinyle terry richardson. Beard Stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, quatre loko mcsweeney's clean chambray végétalien. Un artisan vraiment ironique quel que soit le keytar , Scenester farm-to-table banksy Austin twitter handle freegan cred denim brut café d'origine unique viral.

Quatre directions

Info-bulles dans les groupes d'entrée

Lorsque vous utilisez des info-bulles et des popovers avec les groupes d'entrée Bootstrap, vous devrez définir l' containeroption (documentée ci-dessous) pour éviter les effets secondaires indésirables.


Usage

Déclenchez l'info-bulle via JavaScript :

  1. $ ( '#exemple' ). info -bulle ( options )

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-animation="".

Nom taper défaut la description
animation booléen vrai appliquer une transition de fondu css à l'info-bulle
html booléen faux Insérez html dans l'info-bulle. Si false, la textméthode de jquery sera utilisée pour insérer du contenu dans le dom. Utilisez du texte si vous craignez les attaques XSS.
placement chaîne | fonction 'Haut' comment positionner l'infobulle - top | bas | gauche | droit
sélecteur chaîne de caractères faux Si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées.
Titre chaîne | fonction '' valeur de titre par défaut si la balise `title` n'est pas présente
gâchette chaîne de caractères 'survoler la mise au point' comment l'info-bulle est déclenchée - cliquez | planer | concentrer | manuel. Notez que vous passez plusieurs déclencheurs, séparés par des espaces, types de déclencheurs.
retard nombre | objet 0

retarder l'affichage et le masquage de l'info-bulle (ms) - ne s'applique pas au type de déclenchement manuel

Si un nombre est fourni, un délai est appliqué à la fois pour masquer/afficher

La structure de l'objet est :delay: { show: 500, hide: 100 }

récipient chaîne | faux faux

Ajoute l'info-bulle à un élément spécifiquecontainer: 'body'

La tête haute! Les options des info-bulles individuelles peuvent également être spécifiées via l'utilisation d'attributs de données.

Balisage

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > passez la souris sur moi </a>

Méthodes

$().info-bulle(options)

Attache un gestionnaire d'info-bulles à une collection d'éléments.

.tooltip('montrer')

Révèle l'info-bulle d'un élément.

  1. $ ( '#élément' ). info -bulle ( 'afficher' )

.tooltip('masquer')

Masque l'info-bulle d'un élément.

  1. $ ( '#élément' ). info -bulle ( 'masquer' )

.tooltip('basculer')

Bascule l'info-bulle d'un élément.

  1. $ ( '#élément' ). info -bulle ( 'basculer' )

.tooltip('détruire')

Masque et détruit l'info-bulle d'un élément.

  1. $ ( '#élément' ). info -bulle ( 'détruire' )

Exemples

Ajoutez de petites superpositions de contenu, comme celles de l'iPad, à n'importe quel élément pour héberger des informations secondaires. Survolez le bouton pour déclencher le popover. L'info - bulle doit être incluse.

Popover statique

Quatre options sont disponibles : aligné en haut, à droite, en bas et à gauche.

Haut à enfiler

Sed posuere consectetur est à lobortis. Énée eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover à droite

Sed posuere consectetur est à lobortis. Énée eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Bas à enfiler

Sed posuere consectetur est à lobortis. Énée eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover à gauche

Sed posuere consectetur est à lobortis. Énée eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Aucun balisage affiché car les popovers ne sont générés à partir de JavaScript et du contenu d'un dataattribut.

Démo en direct

Quatre directions


Usage

Activez les popovers via JavaScript :

  1. $ ( '#exemple' ). popover ( options )

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-animation="".

Nom taper défaut la description
animation booléen vrai appliquer une transition de fondu css à l'info-bulle
html booléen faux Insérez html dans le popover. Si false, la textméthode de jquery sera utilisée pour insérer du contenu dans le dom. Utilisez du texte si vous craignez les attaques XSS.
placement chaîne | fonction 'droit' comment positionner le popover - top | bas | gauche | droit
sélecteur chaîne de caractères faux si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées
gâchette chaîne de caractères 'Cliquez sur' comment le popover est déclenché - cliquez | planer | concentrer | manuel
Titre chaîne | fonction '' valeur de titre par défaut si l'attribut `title` n'est pas présent
contenu chaîne | fonction '' valeur de contenu par défaut si l'attribut `data-content` n'est pas présent
retard nombre | objet 0

délai d'affichage et de masquage du popover (ms) - ne s'applique pas au type de déclenchement manuel

Si un nombre est fourni, un délai est appliqué à la fois pour masquer/afficher

La structure de l'objet est :delay: { show: 500, hide: 100 }

récipient chaîne | faux faux

Ajoute le popover à un élément spécifiquecontainer: 'body'

La tête haute! Les options pour les popovers individuels peuvent également être spécifiées via l'utilisation d'attributs de données.

Balisage

Pour des raisons de performances, les API de données Tooltip et Popover sont opt-in. Si vous souhaitez les utiliser, spécifiez simplement une option de sélection.

Méthodes

$().popover(options)

Initialise les popovers pour une collection d'éléments.

.popover('montrer')

Révèle un popover d'éléments.

  1. $ ( '#élément' ). popover ( 'montrer' )

.popover('masquer')

Masque un popover d'éléments.

  1. $ ( '#élément' ). popover ( 'cacher' )

.popover('basculer')

Bascule un popover d'éléments.

  1. $ ( '#élément' ). popover ( 'basculer' )

.popover('détruire')

Masque et détruit le popover d'un élément.

  1. $ ( '#élément' ). popover ( 'détruire' )

Exemples d'alertes

Ajoutez la fonctionnalité de rejet à tous les messages d'alerte avec ce plugin.

Sacré guacamole ! Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.

Oh claquement ! Vous avez une erreur !

Changez ceci et cela et réessayez. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Effectuez cette action Ou fais ça


Usage

Activer le rejet d'une alerte via JavaScript :

  1. $ ( ".alerte" ). alerte ()

Balisage

Ajoutez simplement data-dismiss="alert"à votre bouton de fermeture pour donner automatiquement une fonctionnalité de fermeture d'alerte.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Méthodes

$().alerte()

Enveloppe toutes les alertes avec une fonctionnalité proche. Pour que vos alertes s'animent lorsqu'elles sont fermées, assurez-vous que la .fadeet la .inclasse leur sont déjà appliquées.

.alerte('fermer')

Ferme une alerte.

  1. $ ( ".alerte" ). alerte ( 'fermer' )

Événements

Bootstrap's alert class exposes a few events for hooking into alert functionality.

Event Description
close This event fires immediately when the close instance method is called.
closed This event is fired when the alert has been closed (will wait for css transitions to complete).
  1. $('#my-alert').bind('closed', function () {
  2. // do something…
  3. })

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

  1. <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Single toggle

Add data-toggle="button" to activate toggling on a single button.

  1. <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

  1. <div class="btn-group" data-toggle="buttons-checkbox">
  2. <button type="button" class="btn btn-primary">Left</button>
  3. <button type="button" class="btn btn-primary">Middle</button>
  4. <button type="button" class="btn btn-primary">Right</button>
  5. </div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

  1. <div class="btn-group" data-toggle="buttons-radio">
  2. <button type="button" class="btn btn-primary">Left</button>
  3. <button type="button" class="btn btn-primary">Middle</button>
  4. <button type="button" class="btn btn-primary">Right</button>
  5. </div>

Usage

Enable buttons via JavaScript:

  1. $('.nav-tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

Heads up! You can enable auto toggling of a button by using the data-toggle attribute.
  1. <button type="button" class="btn" data-toggle="button" ></button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

  1. <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
Heads up! Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

  1. <button type="button" class="btn" data-complete-text="finished!" >...</button>
  2. <script>
  3. $('.btn').button('complete')
  4. </script>

About

Get base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  1. <div class="accordion" id="accordion2">
  2. <div class="accordion-group">
  3. <div class="accordion-heading">
  4. <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
  5. Collapsible Group Item #1
  6. </a>
  7. </div>
  8. <div id="collapseOne" class="accordion-body collapse in">
  9. <div class="accordion-inner">
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class="accordion-group">
  15. <div class="accordion-heading">
  16. <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
  17. Collapsible Group Item #2
  18. </a>
  19. </div>
  20. <div id="collapseTwo" class="accordion-body collapse">
  21. <div class="accordion-inner">
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

  1. <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  2. simple collapsible
  3. </button>
  4.  
  5. <div id="demo" class="collapse in"></div>

Usage

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

  1. $(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Name type default description
parent selector false If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
toggle boolean true Toggles the collapsible element on invocation

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

  1. $('#myCollapsible').collapse({
  2. toggle: false
  3. })

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide method has been called.
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
  1. $('#myCollapsible').on('hidden', function () {
  2. // do something…
  3. })

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

  1. <input type="text" data-provide="typeahead">

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.


Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

  1. $('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Name type default description
source array, function [ ] The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
items number 8 The max number of items to display in the dropdown.
minLength number 1 The minimum character length needed before triggering autocomplete suggestions
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.


Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

  1. <div data-spy="affix" data-offset-top="200">...</div>
Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

Via JavaScript

Call the affix plugin via JavaScript:

  1. $('#navbar').affix()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name type default description
offset number | function | object 10 Pixels à décaler de l'écran lors du calcul de la position du défilement. Si un seul numéro est fourni, le décalage sera appliqué dans les directions supérieure et gauche. Pour écouter une seule direction ou plusieurs décalages uniques, fournissez simplement un objet offset: { x: 10 }. Utilisez une fonction lorsque vous devez fournir dynamiquement un décalage (utile pour certaines conceptions réactives).