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 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.