Ce plugin permet de relier automatiquement des éléments de navigation avec des zones HTML en utilisant un défilement. Pour information « spy » signifie espionnage, autrement dit on va espionner le défilement de la page pour le synchroniser avec la navigation. Le principe Pour faire fonctionner ce plugin il faut : une navigation avec le composant nav (ou une liste groupée), une zone à espionner (spying) qui doit comporter l’attribut data-spy= »scroll ». D’autre part il faut relier la navigation et l’élément à espionner, dans celui-ci on utilise l’attribut data-target pour pointer la navigation. Il faut aussi relier chaque élément de la navigation à son correspondant dans la zone à espionner, mais ça ce n’est pas particulier…

Une info-bulle (Tooltip) est une information textuelle sommaire qui apparaît dans une bulle lorsqu’on survole ou clique un élément de la page. Un Popover peut être considéré comme une grosse info-bulle avec plus de possibilités. Ces deux plugins font appel à une librairie externe pour le positionnement, en l’occurrence popper. Principes communs Ces plugins nécessitent la librairie popper.js (ou la version bundle de Bootstrap). D’autre part, contrairement à ce qu’on a vu jusqu’à présent, il faut systématiquement initialiser ces plugins avec jQuery. Le plus simple est de faire un tir groupé avec toutes les info-bulles et popovers présents sur la page : $(function () { $('[data-toggle="tooltip"]').tooltip() $('[data-toggle="popover"]').popover() }) Le principe Info-bulle (tooltip) Pour…

Un carrousel permet de faire défiler automatiquement ou manuellement des images à la manière d’un diaporama. La transition des images peut se faire par substitution ou par translation. Dans ce chapitre nous allons voir comment mettre en œuvre celui proposé par Bootstrap. Le principe Le carrousel doit être englobé avec : une classe carousel , un attribut data-ride= »carousel ». Le contenu doit être englobé avec une classe carousel-inner si on veut disposer des contrôles. Chaque image doit être englobée avec une classe carousel-item. Pour que le carrousel fonctionne il faut absolument que l’une des images soit activée avec la classe active. Ce qui nous donne le schéma suivant : Enfin il faut prévoir…

On a vu ce que nous propose Bootstrap pour la navigation. Dans ce chapitre nous allons utiliser les classes de bases déjà vues en ajoutant de l’interactivité pour créer des onglets. Le principe Ce plugin nécessite 2 groupes éléments : des onglets avec chacun l’attribut data-toggle= »tab » ou data-toggle= »pill », selon l’aspect désiré, on ajoute la classe active à l’onglet actif au chargement, un groupe de panneaux avec la classe tab-content. Pour chacun des panneaux on utilise la classe tab-pane, en prévoyant la classe active pour le panneau qui doit apparaître au chargement. Il faut établir un lien entre chaque onglet et le panneau qui lui correspond. Cela se fait en attribuant à chaque panneau un identifiant référencé par…

On a déjà vu qu’on peut avec quelques classes régler facilement l’aspect des boutons et leur disposition. Dans ce chapitre nous allons voir comment les rendre visuellement dépendants d’un état. Boutons bascule, « checkbox » et « radio » Bouton bascule On a parfois besoin de boutons à 2 états stabilisés : repos et appuyé. Le plugin permet de réaliser cela facilement. Il suffit de créer le bouton en prévoyant data-toggle= »button » : <a class="btn btn-success" data-toggle="button">Simple Bascule</a> Tester en ligne Boutons effet « checkbox » On peut grouper des boutons avec les classes btn-group et btn-group-toggle et les faire fonctionner comme des checkbox avec data-toggle= »buttons ». Les boutons restent indépendants dans leur fonctionnement mais ont l’avantage d’être groupés. Pour…

Une fenêtre modale apparaît au-dessus de la page et est en général utilisée comme une boîte de dialogue avec l’utilisateur. Elle comporte généralement un formulaire. Nous allons voir dans ce chapitre comment créer et paramétrer une fenêtre modale. Le principe Ce plugin nécessite 2 éléments : un déclencheur avec l’attribut data-toggle= »modal », un contenu avec la classe modal. Mais comme il n’y a pas de contenant il faut établir un lien entre le déclencheur et le contenu. Cela se fait en attribuant au contenu un identifiant qui sera référencé par le déclencheur avec deux cas : un lien : la référence se fait avec un attribut href, un bouton : la…