• Bootstrap

    Bootstrap 4 : le Scrollspy

    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…

  • Bootstrap

    Bootstrap 4 : info-bulles (Tooltips) et Popovers

    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…

  • Bootstrap

    Bootstrap 4 : caroussel (Carousel)

    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…

  • Bootstrap

    Bootstrap 4 : les onglets (Tab)

    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…

  • Bootstrap

    Bootstrap 4 : les boutons

    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…

  • Bootstrap

    Bootstrap 4 : fenêtre modale (Modal)

    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…

  • Bootstrap

    Bootstrap 4 : effet accordéon (Collapse)

    L’effet accordéon est très proche du menu déroulant. Dans les deux plugins on a un déclencheur et un élément qui apparaît ou disparaît. Mais le présent plugin est plus adapté pour afficher des contenus variés alors que le précédent est spécifiquement consacré aux menus déroulants. D’autre part le contenu affiché par le présent plugin vient prendre sa place dans le flux. Le principe Ce plugin nécessite 2 éléments : un déclencheur avec l’attribut data-toggle= »collapse », un contenu avec la classe collapse. 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é…

  • Bootstrap

    Bootstrap 4 : menu déroulant (Dropdown)

    Le plugin jQuery Dropdown permet de faire de jolis menus déroulants. Nous allons voir comment le mettre en œuvre dans ce chapitre. Ce plugin nécessite la librairie popper.js, vous devez donc l’ajouter ou utiliser la version bundle de Bootstrap. Le principe Ce plugin nécessite 3 éléments : un contenant avec la classe dropdown, un déclencheur avec l’attribut data-toggle= »dropdown », un contenu avec la classe dropdown-menu. Ce qu’on peut schématiser ainsi : Donc dans sa version la plus épurée on a ce code : <div class="dropdown"> <p data-toggle="dropdown">Le déclencheur</p> <div class="dropdown-menu"> Le contenu </div> </div> Avec une commutation entre ces deux états au clic sur le déclencheur : Le déclencheur peut être…

  • Bootstrap

    Bootstrap 4 : les plugins JQuery, introduction

    JQuery est un framework Javascript devenu incontournable au fil des années. Les créateurs de Bootstrap l’ont choisi pour offrir des plugins esthétiques et faciles à mettre en œuvre, dans la plupart des cas sans même mettre les doigts dans du code Javascript ! Toutefois, si vous voulez obtenir le meilleur de ces plugins, il vous faudra un peu manipuler jQuery.  Je vais donc dans ce chapitre rapidement présenter jQuery pour ensuite commencer à parler des librairies Javascript de Bootstrap. La librairie jQuery Présentation de jQuery Javascript, c’est quoi ? C’est un langage de script qui permet de rendre les pages web interactives. C’est un langage qui fonctionne côté client et…