Les tooltips Bootstrap 3

Les tooltips sont les infobulles les plus basiques proposées par Bootstrap 3.  Sont afichées lorsque l’utilisateur survole un élément HTML avec sa souris, une petite fenêtre noire contenant du texte apparaît.

Créer un tooltip/infobulle avec Bootstrap3

Pour créer un tooltip, nous utiliserons la balise <a>, que nous enrichirons de l’attribut suivant: data-toggle=”tooltip”. Le texte qui composera le tooltip sera stocké dans l’attribut title=””. Pour initialiser le tooltip, il convient d’utiliser la fonction tooltip() de l’API JavaScript de Bootstrap 3.

Nous allons maintenant créer nos premières infobulles sous forme de tooltips :

Explication du code :

L’infobulle est déclarée à l’aide d’une balise <a> dans laquelle nous ajoutons les attributs data-toggle=”tooltip” (qui permet à Bootstrap 3 de mettre en forme le tooltip) et title=”” (sa valeur  constitue le texte qui sera affiché dans l’infobulle).

Le script ci-dessus permet d’initialiser les tooltips de la page (lisez les commentaires de chaque ligne du code)

Visionnons la page ainsi créée :

Lors du survol de l’élément, une infobulle simple contenant le texte “Et une troisième infobulle!” s’affiche. Nous venons de créer nos premiers tooltips.

Manipuler les tooltips avec l’API Bootstrap 3

Les attributs :

Attribut “data-animation”

Par défaut, le tooltip s’affiche et disparaît par un effet de fondu rendu possible grâce aux fonctions fadeIn() et fadeOut() de jQuery. Pour supprimer cet effet, il convient de donner la valeur “false” à l’attribut “data-animation” :*

 

Le carrousel de Bootstrap 3

Bootstrap 3 est distribué avec un petit carrousel prêt à être déployé sur des sites web. Cet outil, très simple, dispose des options basiques répondant à la plupart des besoins du développeur : un système de défilement des diapositives doté de flèches de direction disposées sur le côté, des marqueurs ronds représentant les illustrations et un bloc permettant d’afficher du texte ou du contenu HTML.

Pour afficher le carrousel de Bootstrap 3, nous utiliserons les classes .carousel et .slide ainsi que l’attribut “data-ride” auquel nous donnerons la valeur “carousel”.

Les marqueurs ronds seront mis en forme par la classe .carousel-indicators. Les images ainsi que le contenu HTML (texte, titre, boutons…) seront désignés par la classe .carousel-inner. Les flèches de défilement, quant à elles, s’afficheront grâce à la classe .carousel-control :

Explication du code :

Création du carrousel. Nous ouvrons, ici, une balise <div> accompagnée des classes .carousel et .slide. L’attribut data-ride=”carousel” permet de compléter la mise en forme. Il est important de donner un identifiant à cette balise (ici, id=”exemple-carrousel”) afin de garantir un bon fonctionnement des scripts liés au carrousel.

Annonce de la liste qui va contenir les marqueurs ronds situés en bas au centre de l’image. Ceux-ci nous permettront de naviguer au fil du carrousel. Nous allons ensuite affecter un marqueur à chaque image.

Premier marqueur. Cliquer sur celui-ci nous permettra d’afficher directement la première image que nous listerons par la suite (data-slide-to=”0″). Grâce à la classe .active, cette image sera affichée par le navigateur une fois la page chargée. Il est également nécessaire de rappeler l’identifiant du carrousel cible (data-target=”#exemple-carrousel”).

Suite et fin de la liste. Les éléments de celle-ci respectent la même structure que plus haut.

À l’intérieur de cette balise, nous allons décrire chaque diapositive composée d’une image et d’un contenu HTML.

Description de la première diapositive. La mise en forme est assurée par la classe .item. Comme nous souhaitons que cette image soit affichée au chargement de la page, nous ajoutons la classe .active.

Affichage de l’image.

Mise en forme des images avec Bootstrap 3

On utilise la balise <img> pour inserer des images dans la page HTML. Deux attributs sont obligatoires:

  • L’attribut src pour spécifier le nom du fichier image à charger.
  • L’attribut alt pour indiquer un contenu alternatif, c’est à dire un texte à afficher à la place de l’image lorsque, pour différentes raisons, elle n’apparaît pas.

Bootstrap 3 propose d’enrichir la balise <img> de trois mises en forme originales avec la collection de classes .img-* :

Testons ces trois classes avec une photographie d’une vase à fleur.

Des bords d’image arrondis

Nous allons ici utiliser la classe .img-rounded :

L’utilisation de la classe .img-rounded permet d’arrondir les coins de notre image.

Observons le résultat sur notre navigateur :

Des bords d’image arrondis - Bootstrap 3

Des bords d’image arrondis – Bootstrap 3

Une image circonscrite dans un cercle

Cet effet sera obtenu en ajoutant la classe .img-circle :

Visionnons le résultat :

Image circonscrite dans un cercle - Bootstrap 3

Image circonscrite dans un cercle – Bootstrap 3

L’effet Polaroïd

Bootstrap 3 permet d’obtenir ce rendu à l’aide de la classe .img-thumbnail :

Visionnons le résultat :

Cette image est encadrée d’une bordure composée d’un arrière-plan de couleur blanche et d’un liseré gris.

Les images insérées dans une page HTML sont affichées sans modification des dimensions. Pour utiliser, sur une partie seulement de l’écran, une image dotée d’un grand format, il faut l’insérer dans la grille de Bootstrap 3.

Prenons le fichier vase-a-fleur.jpg, qui est un plan un petit peu large de l’illustration qui nous a servie dans les exemples précédents. Cette image a une largeur de 600 pixels et une hauteur de 800 pixels. Si nous l’affichons telle quelle dans notre page, celle-ci sera complètement écrasée par l’image. Nous allons donc l’intégrer à la grille de notre corps de page de façon à ce qu’elle n’occupe que 4 colonnes sur un écran d’ordinateur de bureau, 5 sur une tablette et 12 sur un smartphone. Dans ce cas, nous serons amenés à écrire le code suivant :

Observons comment la dimension de l’image évolue en fonction des supports :

En cours de rédaction.

Créer des panneaux Bootstrap 3

Un panneau est un outil fournis par Bootstrap 3, utilisé pour représenter l’information à l’intérieur d’une boite. Cette dernière pourra être enrichie d’un en-tête et d’un pied.

Créer un simple panneau Bootstrap 3

Pour créer un panneau Bootstrap 3, il suffit de créer une section <div> de classe .panel. À l’intérieur de cette section, nous allons d’abord créer un en-tête grâce à la classe .panel-heading. Ensuite nous mettrons en forme le corps du panneau par le biais de .panel-body.

Explication

<div class="panel panel-default"> : la classe .panel sert à déclarer un panneau Bootstrap 3. Alors que la classe .panel-default permet de définir les couleurs d’arrière-plan de l’en-tête et du pied du panneau ainsi que celle de ses bordures.

<div class="panel-heading">En-tête du panneau</div> : Création de l’en-tête du panneau à l’aide de la classe .panel-heading.

<div class="panel-body"> ... </div> : Le corps du panneau est construit par une section <div> de classe .panel-body. Nous pouvons y insérer tout contenu HTML (tableaux, paragraphes,…etc).

<div class="panel-footer">Pied du panneau</div> : la construction d’un pied de panneau à l’aide section <div> de classe .panel-footer.

panneau-bootstrap3

 

Les tableaux Bootstrap 3

Un tableau est un élémént HTML, utilisé pour le classement et à la présentation des données. Ce n’est donc pas un outil de mise en page même s’il est souvent employé, par erreur, à cet effet.

Pour simplifier la présentation et la mise en forme des données, Bootstrap 3 propose quatre modèles de tableaux :

Les tableaux basiques

Avec ou sans utilisation du framework Bootstrap 3, un tableau se déclare avec la balise <table>. Mais pour appliquer la mise en forme Bootstrap 3, il faudra appeler la classe .table lors de la déclaration du tableau :

Ce qui donne le résultat suivant :

tableau-basique-bootstrap3

Les tableaux basiques Bootstrap 3

Les tableaux condensés

Les tableaux condensés sont identiques aux tableaux basiques, avec une legère difference au niveau de padding (padding = 8px pour les tableaux basiques et padding = 5px pour les tableaux condensés).

Pour créer un tableau condensés, il suffit de faire appel à la classe .table-condensed, qui sera déclarée en complément de .table:

À l’écran, un tableau condensé a l’aspect suivant :

Les tableaux condensés Bootstrap 3

Les tableaux condensés Bootstrap 3

Les tableaux avec bordures

Il faut seulement ajouter à .table la classe .table-bordered pour obtenir un tableau avec bordures :

À l’écran, le tableau prend la forme suivante :

Les tableaux avec bordures Bootstrap 3

Les tableaux avec bordures Bootstrap 3

Les tableaux zébrés

Les tableaux zébrés sont utilisés pour améliorer la visibilité des données. La classe .table-striped est utilisée pour obtenir ce rendu :

À l’écran, le tableau zébré prend la forme suivante :

Les tableaux zébrés Bootstrap 3

Les tableaux zébrés Bootstrap 3

Les boutons avec menus déroulants

Il est préférable de lire les deux derniers cours sur les boutons et les boutons groupés avant de se lancer dans cette nouvelle partie.

 

Les boutons avec menus déroulants ou Button dropdowns en anglais, sont utilisés dans le cas où nous souhaiterons associer plusieurs options à un seul bouton. Pour créer les boutons avec menus déroulants, Bootstrap 3 met à disposition du développeur deux classes: .dropdown-toggle et .btn-group