ScrollSpy scrollspy.js

Exemple dans une barre de navigation

Selection automatique du menu avec le défilement du texte

@fat

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.


@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.


one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in 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, sustainable delectus consectetur fanny pack iphone.


two

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, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.




Source

Utilisation

Via attribut de donnée

Pour ajouter facilement un comportement scrollspy à votre barre de navigation, ajoutez simplement l'attribut de donnée data-spy="scroll" à l'élément que vous désirez suivre (typiquement le corps de texte) et l'attribut de donnée data-target="ID ou class" pour sélectionner quel élément de la barre utiliser. Vous pourrez utiliser scrollspy avec un composant .nav.

HTML
<nav role="navigation" class="navbar navbar-inverse navbar-static" id="navbar-example">
  ...
</nav>
 
<div data-offset="0" data-target="#navbar-example" data-spy="scroll">
  ...
</div>

Via Javascript

Appeler scrollspy via JavaScript.

JQUERY
$('div').scrollspy({ target: '.navbar-example' })

Options

Les options ci-dessous sont utilisable dans le javascript ou en attribut de donnée. Dans le cas d'attribut de donnée, ajouter data- devant, exemple : data-offset="".

Nom Type défaut description
offset number 10 Décalage en pixels par rapport au sommet lors du calcul de position du défilement..

Méthodes

.scrollspy('refresh')

Cette méthode permet de rafraichir le scrollspy :

JQUERY
$('[data-spy="scroll"]').each(function () {
    var $spy = $(this).scrollspy('refresh')
});

Évènements

Évènement Description
activate.bs.scrollspy Cet évènement est exécuté dès qu'un nouvel élément est activé par scrollspy.
JQUERY
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // faire quelque chose...
})

Menu à onglets / boutons tab.js

Exemple

nav-tabs

nav-pills

Utilisation

Via attribut de donnée

Pour activer les onglets ou les boutons, ajoutez simplement l'attribut de donnée data-toggle="tab" ou data-toggle="pill" à chaque <li> du menu.

HTML
<ul class="nav nav-tabs" id="myTab">
<!-- <ul class="nav nav-pills" id="myTab"> -->
  <li class="active"><a data-toggle="tab" href="#menu01">Accueil</a></li>
  <!-- <li class="active"><a data-toggle="pill" href="#menu01">Accueil</a></li> -->
  <li><a data-toggle="tab" href="#menu02">Messages</a></li>
  <!-- <li><a data-toggle="pill" href="#menu02">Messages</a></li> -->
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="#">
      Liste <b class="caret"></b>
    </a>
    <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu">
      <li><a data-toggle="tab" href="#dropdown01">Texte 1</a></li>
      <li><a data-toggle="tab" href="#dropdown02">Texte 2</a></li>
    </ul>
  </li>
</ul>
 
<div class="tab-content" id="myTabContent">
  <div id="menu01" class="tab-pane fade active in">...</div>
  <div id="menu02" class="tab-pane fade">...</div>
  <div id="dropdown01" class="tab-pane fade">...</div>
  <div id="dropdown02" class="tab-pane fade">...</div>
</div>

Via Javascript

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

JQUERY
$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Vous pouvez activer les onglets individuels de plusieurs façons :

JQUERY
$('#myTab a[href="#menu01"]').tab('show') // Sélection de l'onglet par le nom
$('#myTab a:first').tab('show') // Sélectionne le premier onglet
$('#myTab a:last').tab('show') // Sélectionne le dernier onglet
$('#myTab li:eq(2) a').tab('show') // Sélectionne le 3ème (indexé à partir de 0)

Effet de transition

Pour créer un effet de transition entre chaque onglets, ajouter la classe fade à tous les tab-pane. Pour initialiser l'effet, ajouter la classe in au premier.

HTML
<div class="tab-content" id="myTabContent">
  <div id="menu01" class="tab-pane fade active in">...</div>
  <div id="menu02" class="tab-pane fade">...</div>
  <div id="dropdown01" class="tab-pane fade">...</div>
  <div id="dropdown02" class="tab-pane fade">...</div>
</div>

Évènements

Évènement Description
show.bs.tab Cet évènement est exécuté à l'affichage de l'onglet, mais avant que l'onglet ne soit visible. Utilisez event.target et event.relatedTarget pour cibler l'onglet actif et le précédent onglet actif (si il existe) respectivement.
shown.bs.tab Cet évènement est exécuté à l'affichage de l'onglet après que l'onglet soit devenu visible. Utilisez event.target et event.relatedTarget pour cibler l'onglet actif et le précédent onglet actif (si il existe) respectivement.
JQUERY
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // onglet activé
  e.relatedTarget // onglet précédent
})
 
$('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
  e.target // onglet activé
  e.relatedTarget // onglet précédent
})

Infobulle tooltip.js

Exemples

Infobulle dans du texte

Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.

Dans les quatres directions

Ajouter l'attribut de donnée data-placement et définissez la position avec top, bottom, left, right ou auto.

Quatre directions

Utilisation

Coté Javascript

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

JQUERY
$('#example').tooltip(options)

Coté HTML

L'utilisation est assez simple, il suffit d'ajouter l'attribut de donnée data-toggle="tooltip" à ce que vous voulez et title="Texte à afficher" pour définir le texte à afficher. Par défaut, l'infobulle est placer en haut.

HTML
<!-- HTML -->
<a href="#" data-toggle="tooltip" title="Texte à afficher">Infobulle</a>
 
<!-- Générer par le plugin -->
<div class="tooltip top">
    <div class="tooltip-inner">
        Texte afficher
    </div>
    <div class="tooltip-arrow"></div>
</div>

Options

Les options ci-dessous sont utilisable dans le javascript ou en attribut de donnée. Dans le cas d'attribut de donnée, ajouter data- devant, exemple : data-animation="".

Nom type Défaut Description
animation boolean true Applique une transition de type fondu css à l'infobulle
html boolean false Permet le code HTML dans l'infobulle. Si false, la méthode JQuery text est utilisée pour insérer le contenu dans le DOM. Utilisez le mode texte si vous craignez les attaques XSS, bien que ces infobulles ne soient pas vraiment sensibles.
placement string | function 'top' Positionnement possible de l'infobulle : top | bottom | left | right | auto.
Quand auto est spécifié, le positionnement de l'infobulle change dynamiquement. Par exemple, pour une position auto left, l'infobulle s'affichera, si possible à gauche, sinon elle se placera à droite automatiquement.
selector string false Si un sélecteur est fourni, les objets infobulle seront délégués aux cibles désignées.
template string <div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div> C'est la base html utilisé à la création de la tooltip.
title string | function '' Valeur du titre par défaut si la balise title est absente.
trigger string 'hover focus' Mode d'activation de l'infobulle : click | hover | focus | manual. Les modes sont cumulables en les séparent par un espace.
delay number | object 0

Délai en millisecondes pour afficher ou masquer l'infobulle (ms), ne s'applique pas au mode manual

Si un nombre est fourni, le délai est appliqué à l'affichage et au masquage.

La strcuture de l'objet est :

delay: { show: 500, hide: 100 }
container string | false false

Dans le cas de btn-group et input-group mettre : container: 'body'.
Voir exemples ci-dessous.

viewport string | objet { selector: 'body', padding: 0 } Maintient l'info-bulle dans les limites de cet élément. Example: viewport: '#viewport' ou { selector: '#viewport', padding: 0 }

Cas particulier

Ajouter data-container="body" à chaque bouton ou champ du groupe.

btn-group, input-group

@

Méthodes

$().tooltip(options)

Attache un gestionnaire d'infobulles à un élément.

.tooltip('show')

Affiche l'infobulle d'un élément.

JQUERY
$('#element').tooltip('show')

.tooltip('hide')

Masque l'infobulle d'un élément.

JQUERY
$('#element').tooltip('hide')

.tooltip('toggle')

Inverse l'état de l'infobulle d'un élément.

JQUERY
$('#element').tooltip('toggle')

.tooltip('destroy')

Cache et détruit l'infobulle d'un élément.

JQUERY
$('#element').tooltip('destroy')

Évènements

Évènement Description
show.bs.tooltip Cet évènement est immédiatement exécuté lorsque la méthode show est appelée.
shown.bs.tooltip Cet évènement est exécuté lorque l'infobulle a été rendue visible à l'utilisateur (mais attendra la fin des transitions css pour se terminer).
hide.bs.tooltip Cet évènement est immédiatement exécuté lorsque la méthode hide est appelée.
hidden.bs.tooltip Cet évènement est exécuté lorque l'infobulle est cachée à l'utilisateur (mais attendra la fin des transitions css pour se terminer).
JQUERY
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // faire quelque chose ...
})

Popovers popover.js

Exemples

Ajoute de petites incrustations de contenu, semblables à celles de l'iPad®, à tout élément, pour contenir des éléments d'information secondaires. Un popover est similaire à une infobulle, mais avec un design esthétique différent

Exemple statique

Exemple statique

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Exemple opérationnel

Exemple opérationnel

Dans les quatres directions

Ajouter l'attribut de donnée data-placement et définissez la position avec top, bottom, left, right ou auto.

Quatre directions

Utilisation

Coté Javascript

Activer la popover via JavaScript :

JQUERY
$('#example').popover(options)

Coté HTML

L'utilisation est assez simple, il suffit d'ajouter l'attribut de donnée data-toggle="popover" à ce que vous voulez, title="Titre de la popover" pour définir le titre et enfin data-content="corps de la popover" pour définir le texte à afficher dans le corps. Par défaut, la popover est placer à droite.

HTML
<!-- HTML -->
<button data-content="Corps de la popover." data-toggle="popover" data-container="body" class="btn btn-primary" type="button" title="Titre de la popover">Cliquer pour ouvrir</button>
 
<!-- Générer par le plugin -->
<div class="popover right">
    <div class="arrow"></div>
    <h3 class="popover-title">Titre de la popover</h3>
    <div class="popover-content">
        <p>Corps de la popover.</p>
    </div>
</div>

Options

Les options ci-dessous sont utilisable dans le javascript ou en attribut de donnée. Dans le cas d'attribut de donnée, ajouter data- devant, exemple : data-animation="".

Nom type Défaut Description
animation boolean true Applique une transition de type fondu css à la popover
html boolean false Permet le code HTML dans la popover. Si false, la méthode JQuery text est utilisée pour insérer le contenu dans le DOM. Utilisez le mode texte si vous craignez les attaques XSS, bien que ces popover ne soient pas vraiment sensibles.
placement string | function 'right' Positionnement possible de la popover : top | bottom | left | right | auto.
Quand auto est spécifié, le positionnement de la popover change dynamiquement. Par exemple, pour une position auto left, la popover s'affichera, si possible à gauche, sinon elle se placera à droite automatiquement.
selector string false Si un sélecteur est fourni, les objets popover seront délégués aux cibles désignées.
template string <div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div> C'est la base html utilisé à la création du popover.
trigger string 'click' Mode d'activation du popover : click | hover | focus | manual.
title string | function '' Valeur du titre par défaut si la balise title est absente.
content string | function '' Valeur du contenu par défaut si la balise data-content est absente.
delay number | object 0

Délai en millisecondes pour afficher ou masquer la popover (ms), ne s'applique pas au mode manual

Si un nombre est fourni, le délai est appliqué à l'affichage et au masquage.

La strcuture de l'objet est :

delay: { show: 500, hide: 100 }
container string | false false

Dans le cas de btn-group et input-group mettre : container: 'body'.
Voir exemples ci-dessous.

viewport string | objet { selector: 'body', padding: 0 } Maintient l'info-bulle dans les limites de cet élément. Example: viewport: '#viewport' ou { selector: '#viewport', padding: 0 }

Cas particulier

Ajouter data-container="body" à chaque bouton ou champ du groupe.

btn-group, input-group

@

Méthodes

$().popover(options)

Attache un gestionnaire de popover à un élément.

.popover('show')

Affiche la popover d'un élément.

JQUERY
$('#element').popover('show')

.popover('hide')

Masque la popover d'un élément.

JQUERY
$('#element').popover('hide')

.popover('toggle')

Inverse l'état de la popover d'un élément.

JQUERY
$('#element').popover('toggle')

.popover('destroy')

Cache et détruit la popover d'un élément.

JQUERY
$('#element').popover('destroy')

Évènements

Évènement Description
show.bs.popover Cet évènement est immédiatement exécuté lorsque la méthode show est appelée.
shown.bs.popover Cet évènement est exécuté lorque la popover a été rendue visible à l'utilisateur (mais attendra la fin des transitions css pour se terminer).
hide.bs.popover Cet évènement est immédiatement exécuté lorsque la méthode hide est appelée.
hidden.bs.popover Cet évènement est exécuté lorque la popover est cachée à l'utilisateur (mais attendra la fin des transitions css pour se terminer).
JQUERY
$('#myPopover').on('hidden.bs.popover', function () {
  // faire quelque chose ...
})

Message d'alerte alert.js

Exemple

Succès ! message de reussite.

Utilisation

Coté HTML

Quand la classe alert-dismissable est ajoutée, le bouton pour fermer est automatiquement ajouter à l'alerte.

HTML
<div class="alert alert-success alert-dismissable fade in">
    <i class="icon icon-check-circle icon-lg"></i>
    <strong>Succès !</strong> message de reussite.
</div>
 
<!-- Générer par le plugin quand la classe alert-dismissable est ajoutée -->
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

Coté Javascript

Activer la fermeture des alertes via JavaScript

JQUERY
$(".alert").alert()

Méthodes

$().alert()

Active le mode fermeture sur toutes les alertes. Pour que vos alertes soient animées à la fermeture, vérifiez que les classes .fade et .in leur soient appliquées.

.alert('close')

Ferme une alerte.

JQUERY
$(".alert").alert('close')

Évènements

Évènement Description
close.bs.alert Cet évènement est immédiatement exécuté lorsque la méthode close est appelée.
closed.bs.alert Cet évènement est exécuté lorsque when l'alerte a été fermée (mais attendra la fin de la transition CSS pour se terminer).
JQUERY
$('#my-alert').bind('closed.bs.alert', function () {
  // Faire quelque chose ...
})

Bouton button.js

Exemple

Utilisez au mieux vos boutons. Le contrôle des états de boutons ou la création de groupes de boutons ouvrent la voie à la création simple de barres d'outils.

Etat de chargement

Ajoutez data-loading-text="Chargement..." pour obtenir un état de chargement sur un bouton.

Bouton état de chargement

Bouton checkbox

Ajoutez data-toggle="button" pour obtenir le bouton checkbox.

Seul

Groupe de boutons checkbox

Ajouter data-toggle="buttons" pour avoir une sélection façon case à cocher sur un groupe de boutons btn-group.

Groupe

Groupe de boutons radio

Ajouter data-toggle="buttons" pour avoir une sélection façon bouton radio sur un groupe de boutons btn-group.

Groupe

Utilisation

Via attribut de donnée


Bouton d'état de chargement

Pour activer le bouton d'état de chargement, ajouter data-loading-text="Chargement..." et le code jquery.

<button class="btn btn-primary" data-loading-text="Chargement..." id="fat-btn" type="button">Etat de chargement</button>


Bouton checkbox

Pour activer le bouton checkbox, ajouter data-toggle="button"

<button type="button" class="btn btn-primary" data-toggle="button">Checkbox bouton</button>


Groupe de boutons checkbox

Pour activer le groupe de boutons checkbox, ajouter data-toggle="buttons"

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary"> <input type="checkbox"> Option 1 </label>
    <label class="btn btn-primary"> <input type="checkbox"> Option 2 </label>
    <label class="btn btn-primary"> <input type="checkbox"> Option 3 </label>
</div>


Groupe de boutons radio

Pour activer le groupe de boutons radio, ajouter data-toggle="button"

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Option 1 </label>
  <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 </label>
  <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Option 3 </label>
</div>

Via javascript

Activer les boutons via JavaScript

HTML
$('.btn').button()

Méthodes

$().button('toggle')

Commute l'état poussé du bouton. Donne au bouton son apparence activé.


$().button('loading')

Passe le bouton en état chargement - désactive le bouton et change le texte par le texte de chargement. Le texte de chargement doit être défini sur l'élément bouton avec l'attribut de donnée data-loading-text.

Attention! Firefox garde l'état désactivé même au rechargement de page . Il s'agit d'un bug de ce navigateur. Pour le contourner, utilisez l'attribut de donnée autocomplete="off".
JQUERY
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="Chargement en cours...">...</button>
 
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this);
    btn.button('loading'), setTimeout(function () {
        btn.button('reset')
    }, 3000)
  })
</script>


$().button('reset')

Réinititialise l'état du bouton - réaffiche le texte d'origine.


$().button(string)

Réinititialise l'état du bouton - remplace le texte par celui défini en attribut de donnée.

JQUERY
<button type="button" class="btn btn-primary" data-complete-text="Terminé!" >...</button>
 
<script>
  $('.btn').button('complete')
</script>

Collapse collapse.js

Exemple

En utilisant le plugin collapse, nous pouvons construire un accordéon simple.

Menu accordéon

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.

Vous pouvez également utiliser le plugin sans les marqueurs accordéon. Créez un bouton qui gèrera l'ouverture et la fermeture d'un élément.

<button type="button" class="btn btn-inverse" data-toggle="collapse" data-target="#demo">Cacher le texte</button>
<div id="demo" class="collapse in">texte d'exemple</div>

Déclinaison de couleurs

Collapse default

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse primary

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse success

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse info

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse warning

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse danger

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse inverse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse purple

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapse pink

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Utilisation

Le plugin collapse utilise quelques classe pour manipuler les éléments :

Via attribut de donnée

Ajoutez les attributs de données data-toggle="collapse" et data-target à un élément pour lui assigner automatiquement le contrôle d'un élément. L'attribut de donnée data-target accepte un sélecteur CSS à appliquer à l'élément. Ajoutez obligatoirement la classe collapse à l'élément contrôlé. Si vous souhaitez avoir un élément ouvert par défaut, ajoutez lui la classe in.

Pour ajouter une gestion de groupe accordéon à un contrôle, ajoutez l'attribut de donnée data-parent="#selector". Voyez l'exemple pour plus de détails.

Via javascript

Activez manuellement par :

JQUERY
$('.collapse').collapse()

Options

Les options peuvent être passées via les attributs de données ou via JavaScript. Pour les attributs de données, ajoutez le nom de l'option à un attribut de donnée data-, par exemple data-parent="".

Nom Type Défaut Description
parent selector false S'il y a un sélecteur, tous les éléments controlés sous le parent précisé seront fermés lorsque que le parent est fermer. (comportement identique à l'accordéon traditionnel)
toggle booléen true Commute l'élément désigné sur invocation

Méthodes

.collapse(options)

Active votre contenu en tant qu'éléments controlés. Accepte une éventuelle option object.

JQUERY
$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Commute un élément controlé à ouvert/fermer.

.collapse('show')

Ouvre un élément controlé.

.collapse('hide')

Ferme un élément controlé.

Évènements

Évènement Description
show.bs.collapse Cet évènement est exécuté immédiatement lorsque la méthode show est appelée.
shown.bs.collapse Cet évènement est exécuté lorsqu'un élément controlé est rendu visible à l'utilisateur (attend la fin des transitions CSS pour se terminer).
hide.bs.collapse Cet évènement est exécuté immédiatement lorsque la méthode hide est appelée.
hidden.bs.collapse Cet évènement est exécuté lorsqu'un élément controlé est caché à l'utilisateur (attend la fin des transitions CSS pour se terminer).
JQUERY
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // Faire quelque chose ...
})

Autocomplétion typeahead.js

Exemples