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.

Les étiquettes Bootstrap 3

Les étiquettes Bootstrap 3 permettent d’ajouter un degré d’interactivité aux images. Nous allons, pour cela, utiliser la classe .thumbnail.

Créer une image cliquable

L’utilisation de la classe .thumbnail permet d’attacher un lien hypertexte à une image. Par défaut, cette dernière sera encadrée d’une bordure composée d’un arrière-plan de couleur blanche et d’un liseré gris. Lorsque le curseur survolera la zone, le liseré de la bordure deviendra bleu, indiquant à l’utilisateur que l’image renvoie vers un lien hypertexte.

Pour créer une telle zone cliquable, nous allons la positionner à l’intérieur d’une balise <a> dont la mise en forme sera assurée par la classe .thumbnail :

Ce qui donne le résultat ci-dessous :

Image cliquable - Bootstrap 3

Image cliquable – Bootstrap 3

Créer des étiquettes complexes

L’étiquette complexe est l’outil idéal pour créer une galerie de produits dans un site d’e-commerce. Cette fonctionnalité nous permet, en effet, de lier à une image un contenu HTML libre comprenant, par exemple, un titre, du texte ainsi que des boutons. L’ensemble de cette zone sera affiché à l’intérieur d’un cadre doté d’angles légèrement arrondis, de bordures blanches, entourées d’un léger liseré gris. Cette mise en forme élégante s’obtient, ici encore, via la classe .thumbnail.

Dans l’exemple ci-dessous, nous allons créer une page présentant une liste de voyages proposés par un tour-opérateur. Afin d’aligner correctement nos étiquettes, nous utiliserons la grille de Bootstrap 3 :

Découvrons l’aspect des étiquettes sur notre page :

Etiquettes complexes - Bootstrap 3

Etiquettes complexes – 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

 

Introduction aux boutons Bootstrap 3

Le framework Bootstrap 3 a été développé dans le but de faciliter la création et l’intégration des sites web. Les boutons est l’un des composants les plus utilisés dans la création des sites web (couramment dans les formulaires). Bootstrap 3 mis à la dispositions de ses utilisateurs, une bibliothèques complète pour créer des boutons élégants et personnalisable, totalement compatibles avec les navigateurs les plus courants.

Créer un bouton avec la classe .btn

La classe .btn, s’emploie indépendamment de la balise utilisée. L’exemple ci-dessous, montre les différentes méthodes prises  en charge par Bootstrap 3 pour créer un bouton.

Il est recommandé de n’utiliser les boutons obtenus grave à la balise <input> que dans les formulaires.

Les boutons s’affichent de la manière suivante :

bouton Bootstrap3 avec la classe .btn

bouton Bootstrap3 avec la classe .btn

Créer un bouton inactifs

Dans certains  sites web dynamiques, il est souvent nécessaire d’attendre un événement ou une action (ex: chargement des fichiers .js, remplir les champs d’un formulaire) avant d’offrir la possibilité de cliquer sur un bouton.

Dans ce cas, il est nécessaire de désactiver un Bouton. Bootstrap 3, grâce à la classe .disabled vous permet créer un bouton désactive

Il est egalement possible de d’utiliser le HTML via l’attribut disabled=”disabled” de la balise <boutton>:

Les boutons désactivés s’affichent à l’écran de la manière suivante :

Bouton Bootstrap 3 inactifs

Bouton Bootstrap 3 inactifs

Choisissez la taille d’un bouton

Bootstrap 3 offre au développeur la possibilité de créer des boutons de tailles différentes en couplant la classe .btn avec les classes suivantes:

Exemple d’utilisation :

Résultat du code :

Tailles d'un bouton Bootstrap3

Tailles d’un bouton Bootstrap3

Dans cette Introduction aux boutons Bootstrap 3, nous avons découvrt la création des boutons et boutons désactivés sans se soucie à la compatibilités entre les navigateurs.

Les listes de définition dans Bootstrap 3 (Partie 2)

Nous avons vu dans le cours précédent comment créer des listes de définition verticales et horizontales. Cette deuxième partie est consacrée aux  list-group. Ces derniers, nous permettent d’organiser des contenus plus complexes, en bénéficiant du système de gestion des grilles de Bootstrap 3.

Avec la combinaison des deux classes CSS: .list-group et .list-group-item, nous pourrons créer une première jolie liste:

Pour chaque élément <li> de la liste, il faut y ajouter la classe .list-group-item, sans oublier d’insérer la classe .list-group au moment de déclaration de la liste <ul>.

listes-bootstrap

List-group basique

Il est à noter que les listes de l’exemple précédent occupe toute la largeur du container. Et pour la mettre en forme, il convient de l’intégrer dans une grille.

a – Insérer une list-group dans une grille

Pour gérer la taille (ou bien la largeur) de notre list-group, nous allons tout simplement l’insérer dans le système de grilles de Bootstrap 3. Dans cette exemple, notre liste occupera 4 colonnes sur l’écran d’un ordinateur de bureau (.col-md-4), 6 sur une tablette (.col-sm-6) et 12 sur un smartphone (.col-xs-12) :

Résultat:

Mise en forme d'une liste au sein d'une grille

Mise en forme d’une liste au sein d’une grille

b – Utiliser une list-group avec des badges

Nous avons précédemment détaillé dans un autre cours comment créer et personnaliser les badges avec Bootstrap 3.

Cette fois-ci, nous allons combiner deux composants, les badges et les listes:

Nous obtenons le résultat ci-dessous:

list-group-badge-bootstrap3

c – Afficher une list-group avec en-tête

Il se révèle parfois utile voire nécessaire d’ajouter un en-tête à un menu vertical afin de s’assurer d’une bonne compréhension de la part de l’utilisateur. En utilisant le jeu de classes contextuelles .panel, .panel-* et .panel-heading, nous aurons à la fin un menu vertical avec en-tête.

Ce qui donnera le résultat suivant:

list-group-entete-bootstrap3Pour changer la couleur de d’arrière-plan de l’en-tête, Bootstrap 3, met a votre disposition un jeu de classes présenté ci-dessous:

Classe Couleur
.panel-default Gris clair
.panel-primary Bleu
.panel-info Bleu clair
.panel-success Vert
.panel-warning Orange
.panel-danger Rouge

d – Créer un menu vertical complet avec les list-group

Pour créer un menu vertical complet, il convient d’ajouter un lien hypertexte pour chaque élément (item) de notre list-group. Bootstrap 3, n’utilise plus le jeu de balises <ul> et <li> pour créer la liste. celles-ci sont seront remplacées par les balises <div>.

Ce qui donne le résultat suivant:

image.

 

Les icônes Bootstrap 3

Une icône est une image comme n’importe quelle autre. Cependant, le terme « icône » désigne le plus souvent une image de taille relativement petite et dont le but est de représenter ou illustrer quelque chose. Bootstrap 3 propose par défaut la bibliothèque d’icônes Glyphicon. Une fois celle-ci présentée, nous irons plus loin en étudiant Font Awesome, une bibliothèque d’icônes plus complète et optimisée pour Bootstrap.

Utiliser la bibliothèque Glyphicon

Glyphicon est une librairie payante, créée par Jan Kovarík en 2010. Son auteur a décidé suite à un accord avec les auteurs de Bootstrap, d’inclure ses icônes, sous licence libre, dans la version standard de Bootstrap 3.

Vous trouverez l’ensemble des icône (180 icône) distribuées avec Bootstrap 3 sur l’adresse suivante : http://getbootstrap.com/components

Pour ajouter une icône de Glyphicon à votre page, il suffit d’insérer la classe .glyphicon et la sous-classe .glyphicon-[nom de l’icône] dans dans la démonstration ci-après:

Résultat:

icones-Glyphicon-bootstrap3

Exemple d’utilisation de Glyphicon

Plus d’icônes avec Font Awesome

Font Awesome est une bibliothèque de 371 icônes totalement libre de droits, créée pour Bootstrap par Dave Gandy.

a. Installer Font Awesome

Rendez-vous sur le site officiel de Font Awesome : http://fortawesome.github.io/Font-Awesome et téléchargez la dernière version disponible.

Une fois l’archive extraite, quatre dossiers sont créés(css, fonts, less et scss). Afin d’utiliser Font Awesome, seuls deux d’entre eux sont nécessaires : “css” et “font”.

b. Créer une première page utilisant Font Awesome

Après l’installation de Font Awesome, il est maintenant possible de commencer à l’utiliser :

Analyse du code:

<i class=”fa fa-linkedin-square”></i>

Font Awesome fonctionne de la même manière que Glyphicon : les icônes sont créées en utilisant les balises . Nous insérons ensuite la classe .fa, qui permet de faire appel à Font Awesome. Ici, nous allons afficher une icône reproduisant le logo de LinkedIn en utilisant la sous-classe dédiée .fa-linkedin-square.

<i class=”fa fa-facebook-square”></i>

Affichage d’une icône reprenant le logo de Facebook.

<i class=”fa fa-google-plus-square”></i>

Cette ligne permet de reproduire le logo de Google Plus.

En chargeant la page ainsi créée, nous obtenons l’écran suivant :

Exemple de Font Awesome

Exemple de Font Awesome

c. Manipuler les tailles d’icônes

Ce qui fait la force de Font Awesome est son utilisation d’une police de caractères vectorielle, ce qui lui permet de garder la même qualité du visuel même si on agrandis la taille des icônes

Par défaut, la taille d’une icône est héritée de la balise parente. Par exemple, si l’icône est placée entre les balises et, sa taille est de 36 pixels.

Il est possible d’agrandir une icône en utilisant les classes complémentaires suivantes :

Grille Classes
.fa-lg 33 % plus grande
.fa-2x Deux fois plus grande
.fa-3x Trois fois plus grande
.fa-4x Quatre fois plus grande
.fa-5x Cinq fois plus grande

Exemple :

Le code ci-dessus permet d’afficher l’icône “fa-twitter” dans cinq tailles différentes :

Cinq tailles différente de l'icône "fa-twitter" (FontAwesome)

Cinq tailles différente de l’icône “fa-twitter” (FontAwesome)

A cette occasion, je vous invite à nous suivre sur twitter ====> https://twitter.com/theopentuto

d. Utiliser Font Awesome dans les listes

Avec Font Awesome, il est possible de modifier les puces d’une liste sans à voir à changer une ligne du code CSS. Pour cela, nous utiliserons les classes .fa-ul et .fa-li. Dans l’exemple ci-dessous, nous allons créer une liste en utilisant des icônes différentes :

Explication du code :

<ul class=”fa-ul”>

Début de la liste. L’utilisation de la classe .fa-ul permet d’associer Font Awesome à la liste.

<li><i class=”fa-li fa fa-twitter”></i> Twitter</li>

Premier élément de la liste. La puce par défaut est remplacée par le logo de twitter. Nous faisons appel, ici, à la classe .fa-li.

À l’écran, nous obtenons la liste suivante :

Utilisation de Font Awesome dans les listes

Utilisation de Font Awesome dans les listes

e. Faire pivoter une icône

Font Awesome dispose de deux types de fonctionnalités de rotation. La rotation statique permet de retourner une icône selon l’angle désiré. La rotation dynamique permet de créer un effet animé dans lequel une icône est en rotation continue.

Rotation statique

En utilisant la collection de classes .fa-rotate-[degrés de rotation], il est possible de créer un effet de rotation statique :

Le navigateur affiche l’icône “enfant” de la manière suivante :

Rotation statique d'une icône avec Font Awesome

Rotation statique d’une icône avec Font Awesome

Rotation dynamique

En utilisant la classe .fa-spin, nous allons pouvoir créer un effet de rotation animée. Cette fonctionnalité est particulièrement utile, par exemple, pour afficher une roue qui tourne indiquant à l’utilisateur qu’un script AJAX est en cours d’exécution ou qu’une page est en cours de chargement.

 

 

les badges Bootstrap 3

Les badges Bootstrap 3 standard

Les badges sont similaires aux labels. Sauf que pour les labels, ils ont des coins beaucoup plus arrondis.

Les badges sont principalement utilisés pour mettre en évidence des éléments nouveaux ou non lus (le cas d’une messagerie par exemple).

Pour créer un badge dans Bootstrap 3, il suffit d’utiliser la classe .badge.

Exemple :

Ce qui donne l’aspect suivant :

Les badges - Bootstrap 3

Exemple de badge – Bootstrap 3

Les badges Bootstrap 3 personnalisés

Par défaut, les badges Bootstrap 3, apparaissent avec un texte blanc sur fond gris. Et pour changer le rendu du badge, il convient de modificier le code CSS de la classe .badge dans le fichier bootstrap.css.

Pour cela, rendez-vous à la ligne 4328 (le numéro de ligne peut changer d’une version à l’autre). Le code CSS suivant apparait :

Nous allons changer la couleur de l’arrière plan en orange (#f0ad4e) et la couleur du texte en Orange (#f0ad4e) en changeant la valeur de la propriété CSS background-color (background-color:f0ad4e;).

à l’ecran, le badre devient orange:

Les badges - Bootstrap 3

Exemple de personnalisation d’un badge – Bootstrap 3

Dans ce cours ” Les badges dans Bootstrap 3 “, nous avons vu comment créer des badges dans Bootstrap 3 à l’aide de la classe .badge. Nous avons vu aussi, qu’à travers le fichier bootstrap.css, il est possible de changer le rendu des badges en changeant les valeurs des proprietés CSS de cette classe.

Les labels Bootstarap 3

Les labels/étiquettes sont généralement utilisés pour indiquer sur une page web, une information importante telle que les notes importantes, des messages d’avertissement, etc

Bootstrap 3 met à votre disposition la classe .label pour créer facilement des labels. en ajoutant à cette classe la sous classe  .label-[contexte], nous pourrons obtenir differents aspect selon notre besoin (comme le cas des classes d’emphase) :

Classeth> Couleur
.label-default Gris
.label-primary Bleu pâle
.label-success Vert
.label-info Bleu
.label-warning Orange
.label-danger Rouge

L’exemple suivant vous montrer comment créer des labels avec Bootstrap 3 en utilisant differentes sous-classes :

À l’écran, le code ci-dessus donne :

Exemple de label - Bootstrap 3

Exemple de label – Bootstrap 3

Nous avons vu dans ce cours ” Les labels Bootstarap 3 ” comment créer facilement des labels. Ceux-ci, vous permettent de mettre en valeur une partie du contenu de votre page.

Les messages d’information dans Bootstrap 3

Les classes d’emphase

Bootstrap 3 met à votre disposition plusieurs classes d’emphase pour générer des messages d’information basiques. Le tableau ci-dessous décrit les différentes classes d’emphase :

Classe Couleur
.text-muted Gris
.text-primary Bleu pâle
.text-success Vert
.text-info Bleu
.text-warning Orange
.text-danger Rouge

Créons à présent nos premiers messages d’information “basiques” :

Les messages d’information ont l’aspect (simple coloration du message) suivant :

Exemple des classes d’emphase - Bootstrap 3

Exemple des classes d’emphase – Bootstrap 3

Les bandeaux d’alerte contextuels

Pour donner un aspect professionnel et beaucoup plus ergonomique aux messages d’information, Bootstrap 3 met à votre disposition les bandeaux d’alerte contextuels.

a – Les bandeaux d’alerte simples

Pour créer d’alerte, il convent de faire appel à la classe .alert.Puis nous ajouterons à cette classe la sous classe désignant le contexte du message (information, danger,…). Bootstrap 3 mis à votre disposition quarte sous-classes :

Sous classe Couleur
.alert-success Vert
.alert-info Bleu
.alert-warning Orange
.alert-danger Rouge

Créons à présent nos premiers bandeaux d’alerte simples :

Les bandeaux d’alerte simple ont l’aspect suivant :

Exemple de bandeaux d’alerte simples - Bootstrap 3

Exemple de bandeaux d’alerte simples – Bootstrap 3

b – Les bandeaux d’alerte complexes

Nous avons vu dans l’exemple précédent que les bandeaux d’alerte simples ne contiennent que du texte. Mais il est parfois nécessaire d’ajouter du contenu HTML plus complexe. En plus, avec l’API JavaScript de Bootstrap 3, vous avez la possibilité de faire disparaitre un bandeau d’alerte en utilisant soit la fonction fadeOut() de jQuery. Celle-ci, peut être appelée de deux façons : en ajoutant un bouton en forme de croix en haut à droite du bandeau ou en utilisant la fonction ad hoc JavaScript alert().

Explication du code :

<div class="alert alert-dismissable alert-success"> : cette ligne permet de créer un bandeau d’alerte (classe .alert), que l’utilisateur peut faire disparaitre (classe .alert-dismissable), et que nous utiliserons la sous classe .alert-success pour définir l’aspect du message d’alerte.

<button type="button" data-dismiss="alert" aria-hidden="true">&times;</button> : création d’un bouton en forme de croix (&times;) en haut à droite du bandeau.

<p><button id="myButton" type="button">Fermer</button></p> : L’ajout du bouton, qui permet de fermer le bandeau.

Exemple de bandeau d'alerte complexe - Bootstrap 3

Exemple de bandeau d’alerte complexe – Bootstrap 3

Pour faire disparaire le bandeau d’alrte, cliquez soit en cliquant sur le bouton “Fermer”, soit en cliquant sur la croix en haut à droite.