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

 

Laisser un commentaire