À propos des modaux

Une version simplifiée, mais flexible, du plug-in modal javascript traditionnel avec uniquement les fonctionnalités minimales requises et les valeurs par défaut intelligentes.

Exemple statique

Ci-dessous se trouve un modal rendu statiquement.

Démo en direct

Basculer 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.

Utiliser bootstrap-modal

Appelez le modal via javascript :

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

Choix

Balisage

Vous pouvez facilement activer les modaux sur votre page sans avoir à écrire une seule ligne de javascript. Il suffit de définir data-toggle="modal"un élément de contrôleur avec un data-target="#foo"ou href="#foo"qui correspond à un identifiant d'élément modal, et une fois cliqué, il lancera votre modal.

De plus, pour ajouter des options à votre instance modale, incluez-les simplement en tant qu'attributs de données supplémentaires sur l'élément de contrôle ou le balisage modal lui-même.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Lancer Modal </a>    

<div class = "masque modal" id = "monModal" >  
  <div class = "en-tête-modal" > 
    < type de bouton = "bouton" class = "fermer" data-dismiss = "modal" > × </bouton>   
    <h3> En-tête modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Un beau corps… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Fermer </a>   
    <a href = "#" class = "btn btn-primary" > Enregistrer les modifications </a>  
  </div>
</div>

Méthodes

.modal(options)

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

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

.modal('basculer')

Bascule manuellement un modal.

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

.modal('montrer')

Ouvre manuellement un modal.

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

.modal('masquer')

Masque manuellement un modal.

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

Événements

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

$ ( '#monModal' ). on ( 'caché' , fonction () {   
  // faire quelque chose…
})

À propos des listes déroulantes

Ajoutez des menus déroulants à presque tout dans Bootstrap avec ce plugin simple. Bootstrap propose une prise en charge complète du menu déroulant dans la barre de navigation, les onglets et les pilules.

Exemples

Cliquez sur les liens de navigation déroulants dans la barre de navigation et les pilules ci-dessous pour tester les menus déroulants.

• Lien régulier
• Menu déroulant
  • Action
  • Another action
  • Something else here
  • Separated link
• Liste déroulante 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Liste déroulante 3
  • Action
  • Another action
  • Something else here
  • Separated link

Utilisation de bootstrap-dropdown.js

Appelez les listes déroulantes via javascript :

$ ( '.dropdown-toggle' ). liste déroulante ()

Balisage

Pour ajouter rapidement une fonctionnalité de liste déroulante à n'importe quel élément, ajoutez simplement data-toggle="dropdown"et toute liste déroulante d'amorçage valide sera automatiquement activée.

<ul class = "nav nav-pilules" > 
  <li class = "active" ><a href = "#" > Lien régulier </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Menu déroulant
      <b classe = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Action </a></li> 
      <li><a href = "#" > Autre action </a></li> 
      <li><a href = "#" > Quelque chose d'autre ici </a></li> 
      <li class = "diviseur" ></li> 
      <li><a href = "#" > Lien séparé </a></li> 
    </ul>
  </li>
  ...
</ul>

Pour conserver les URL intactes, utilisez l' data-targetattribut au lieu de href="#".

<ul class = "nav nav-pilules" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Menu déroulant
      <b classe = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Méthodes

$().dropdown()

Une API programmatique pour activer les menus pour une barre de navigation donnée ou une navigation par onglets.

Le plugin ScrollSpy permet de mettre à jour automatiquement les cibles de navigation en fonction de la position de défilement.

Exemple de barre de navigation avec scrollspy

Faites défiler la zone ci-dessous et regardez la mise à jour de la navigation. Les sous-éléments de la liste déroulante seront également mis en surbrillance. Essayez-le !

Utilisation de bootstrap-scrollspy.js

Appelez le scrollspy via javascript :

$ ( '#barre de navigation' ). parcheminespion ()

Balisage

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).

<body data-spy = "scroll" > ... </body>  

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 :

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

Choix

Événements

Ce plugin ajoute une fonctionnalité rapide et dynamique d'onglets et de pilules pour la transition vers le contenu local.

Exemples d'onglets

Cliquez sur les onglets ci-dessous pour basculer entre les volets masqués, même via les menus déroulants.

• Maison
• Profil
• Menu déroulant
  • @fat
  • @mdo

Utilisation de bootstrap-tab.js

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

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

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

$ ( '#myTab a[href="#profile"]' ). onglet ( 'afficher' ); // Sélectionner l'onglet par nom 
$ ( '#myTab a:first' ). onglet ( 'afficher' ); // Sélectionner le premier onglet 
$ ( '#myTab a:last' ). onglet ( 'afficher' ); // Sélectionner le dernier onglet 
$ ( '#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

<ul class = "nav nav-onglets" > 
  <li><a href = "#home" data-toggle = "tab" > Accueil </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Messagerie </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Paramètres </a></li>  
</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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Accueil </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Messagerie </a></li> 
  <li><a href = "#settings" > Paramètres </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "paramètres" > ... </div>  
</div>
 
<script>
  $ ( fonction () {  
    $ ( '#myTab a:last' ). onglet ( 'afficher' );
  })
</script>

Événements

$ ( 'a[data-toggle="tab"]' ). on ( 'montré' , fonction ( e ) {   
  e . cible // onglet activé
  e . relatedTarget // onglet précédent
})

À propos des info-bulles

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.

Exemple d'utilisation des info-bulles

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

Utilisation de bootstrap-tooltip.js

Déclenchez l'infobulle via javascript :

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

Choix

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.

<a href = "#" rel = "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.

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

.tooltip('masquer')

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

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

.tooltip('basculer')

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

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

À propos des popovers

Ajoutez de petites superpositions de contenu, comme celles de l'iPad, à n'importe quel élément pour héberger des informations secondaires.

* Nécessite l'inclusion d' une info- bulle

Exemple de popover de survol

Survolez le bouton pour déclencher le popover.

Utiliser bootstrap-popover.js

Activer les popovers via javascript :

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

Choix

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.

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

.popover('masquer')

Masque un popover d'éléments.

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

.popover('basculer')

Bascule un popover d'éléments.

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

À propos des alertes

Le plugin d'alerte est une petite classe permettant d'ajouter des fonctionnalités proches aux alertes.

Exemples d'alertes

Le plugin d'alertes fonctionne sur les messages d'alerte réguliers et bloque les messages.

Utilisation de bootstrap-alert.js

Activer le rejet d'une alerte via javascript :

$ ( ".alerte" ). alerte ()

Balisage

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

<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.

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

Événements

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

$ ( '#mon-alerte' ). lier ( 'fermé' , fonction () {   
  // faire quelque chose…
})

À propos de

Faites-en plus avec les boutons. Contrôlez les états des boutons ou créez des groupes de boutons pour plus de composants comme les barres d'outils.

Exemples d'utilisations

Utilisez le plugin de boutons pour les états et les bascules.

Utilisation de bootstrap-button.js

Activer les boutons via javascript :

$ ( '.nav-tabs' ). bouton ()

Balisage

Les attributs de données font partie intégrante du plugin de bouton. Consultez l'exemple de code ci-dessous pour les différents types de balisage.

<!-- Ajoutez data-toggle="button" pour activer le basculement sur un seul bouton -->
<button class = "btn" data-toggle = "button" > Bascule unique </button>  
 
<!-- Ajouter data-toggle="buttons-checkbox" pour basculer le style de case à cocher sur btn-group -->
<div class = "btn-group" data-toggle = "boutons-case à cocher" >  
  <button class = "btn" > Gauche </button> 
  <button class = "btn" > Milieu </button> 
  <button class = "btn" > Droite </button> 
</div>
 
<!-- Ajouter data-toggle="buttons-radio" pour basculer le style radio sur btn-group -->
<div class = "btn-group" data-toggle = "boutons-radio" >  
  <button class = "btn" > Gauche </button> 
  <button class = "btn" > Milieu </button> 
  <button class = "btn" > Droite </button> 
</div>

Méthodes

$().bouton('basculer')

Bascule l'état de poussée. Donne au bouton l'apparence qu'il a été activé.

<bouton class = "btn" data-toggle = "bouton" > … </bouton>   

$().bouton('chargement')

Définit l'état du bouton sur chargement - désactive le bouton et remplace le texte par le texte de chargement. Le texte de chargement doit être défini sur l'élément de bouton à l'aide de l'attribut data data-loading-text.

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().bouton('réinitialiser')

Réinitialise l'état du bouton - remplace le texte par le texte d'origine.

$().bouton(chaîne)

Réinitialise l'état du bouton - remplace le texte par n'importe quel état de texte défini par les données.

<bouton class = "btn" data-complete-text = "terminé !" > ... </bouton>   
<script>
  $ ( '.btn' ). bouton ( 'complet' )
</script>

À propos de

Obtenez des styles de base et une prise en charge flexible des composants pliables tels que les accordéons et la navigation.

* Nécessite l'inclusion du plugin Transitions.

Exemple d'accordéon

En utilisant le plugin collapse, nous avons construit un simple widget de style accordéon :

Utilisation de bootstrap-collapse.js

Activer via javascript :

$ ( ".collapse" ). s'effondrer ()

Choix

Balisage

Ajoutez simplement data-toggle="collapse"un data-targetélément à pour attribuer automatiquement le contrôle d'un élément pliable. L' data-targetattribut accepte un sélecteur CSS auquel appliquer le repli. Assurez-vous d'ajouter la classe collapseà l'élément réductible. Si vous souhaitez qu'il soit ouvert par défaut, ajoutez la classe supplémentaire in.

<bouton class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  pliable simple
</bouton>
 
<div id = "demo" class = "collapse in" > … </div>  

Méthodes

.collapse(options)

Active votre contenu en tant qu'élément pliable. Accepte une option facultative object.

$ ( '#myCollapsible' ). s'effondrer ({
  bascule : faux 
})

.collapse('basculer')

Bascule un élément réductible sur affiché ou masqué.

.collapse('montrer')

Affiche un élément réductible.

.collapse ('masquer')

Masque un élément pliable.

Événements

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

$ ( '#myCollapsible' ). on ( 'caché' , fonction () {   
  // faire quelque chose…
})

À propos de

Un plugin générique pour parcourir les éléments. Un manège.

Exemple de carrousel

Regardez le diaporama ci-dessous.

Libellé de la première vignette

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida et eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Libellé de la deuxième vignette

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida et eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Libellé de la troisième vignette

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida et eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Utilisation de bootstrap-carousel.js

Appel via javascript :

$ ( '.carrousel' ). carrousel ()

Choix

Balisage

Les attributs de données sont utilisés pour les contrôles précédents et suivants. Consultez l'exemple de balisage ci-dessous.

<div id = "myCarousel" class = "diapositive du carrousel" >  
  <!-- Éléments du carrousel -->
  <div class = "carousel-inner" > 
    <div class = "élément actif" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Navigation carrousel -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Méthodes

.carrousel(options)

Initialise le carrousel avec des options facultatives objectet commence à parcourir les éléments.

$ ( '.carrousel' ). carrousel ({
  intervalle : 2000 
})

.carrousel('cycle')

Fait défiler les éléments du carrousel de gauche à droite.

.carrousel('pause')

Empêche le carrousel de parcourir les éléments.

.carrousel(nombre)

Fait passer le carrousel à une image particulière (base 0, similaire à un tableau).

.carrousel('préc')

Passe à l'élément précédent.

.carrousel('suivant')

Passe à l'élément suivant.

Événements

La classe de carrousel de Bootstrap expose deux événements pour se connecter à la fonctionnalité de carrousel.

À propos de

Un plug-in de base facilement extensible pour créer rapidement des saisies de texte élégantes avec n'importe quelle entrée de texte de formulaire.

Exemple

Commencez à taper dans le champ ci-dessous pour afficher les résultats dactylographiés.

Utilisation de bootstrap-typeahead.js

Appelez la frappe via javascript :

$ ( '.typeahead' ). taper à l'avance ()

Choix

Balisage

Ajoutez des attributs de données pour enregistrer un élément avec la fonctionnalité de saisie anticipée.

< type d'entrée = "texte" data-provide = "typeahead" >  

Méthodes

.typeahead (options)

Initialise une entrée avec une saisie anticipée.