Bootstrap

  • 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…

  • Bootstrap

    Bootstrap 4 : cartes et médias

    Dans  ce chapitre nous allons voir le nouveau composant Card qui remplace les composants panel, well et thumbnails de Bootstrap 3, et aussi l’objet média. La page d’exemple est la même que celle vue au chapitre précédent. Les cartes (Cards) C’est un nouveau composant de la version 4 de Bootstrap destiné à remplacer panel, well et thumbnails de l’ancienne version. C’est un conteneur versatile qui permet beaucoup de choses comme nous allons à présent le voir. A la base on utilise la classe card : <div class="card"> Une carte </div> On a juste une bordure avec coins arrondis. Que peut-on mettre dans une carte ? En fait beaucoup de choses comme nous allons…

  • Bootstrap

    Bootstrap 4 : étiquettes et listes groupées

    Dans ce chapitre nous allons voir les étiquettes (badges) et les listes groupées. Voici la page d’exemple agrémentée de nouveaux éléments dont je vais parler dans ce chapitre et le suivant : <!DOCTYPE HTML> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-info"> <a class="navbar-brand" href="#">Les Tigres</a> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Liens</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Témoignages</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Références</a> </li> </ul> <form action="search" method="get" class="form-inline"> <div class="input-group"> <input type="text" name="search" class="form-control" placeholder="Je cherche..."> <span class="input-group-btn"> <button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span>…

  • Bootstrap

    Boostrap 4 : alertes et barres de progression

    Nous allons voir maintenant deux composants qui, bien que ne nécessitant pas de Javascript pour leur présentation, en ont besoin pour leur mise en œuvre. Alertes Utilisation de base Les alertes permettent de présenter un message visuellement significatif. Il suffit d’utiliser la classe alert accompagnée d’une classe alert-*, par exemple : <div class="alert alert-warning"> <strong>Attention!</strong> Vous allez trop loin ! </div> Les 4 variantes Il existe 8 classes de la forme alert-* :   <div class="alert col-lg-2 alert-primary"><strong>Primary</strong></div> <div class="alert col-lg-2 alert-secondary"><strong>Secondary</strong></div> <div class="alert col-lg-2 alert-info"><strong>Infos</strong></div> <div class="alert col-lg-2 alert-success"><strong>Success</strong></div> <div class="alert col-lg-2 alert-danger"><strong>Danger</strong></div> <div class="alert col-lg-2 alert-warning"><strong>Warning</strong></div> <div class="alert col-lg-2 alert-light"><strong>Light</strong></div> <div class="alert col-lg-2 alert-dark"><strong>Dark</strong></div> Un bloc d’information Si le texte doit…