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

 

Pourquoi choisir PrestaShop

La gestion d’une boutique en ligne est suffisamment complexe (gestion des produits, commandes, suivi clients…) pour ne pas avoir à compliquer encore la chose avec des outils incomplets ou surdimensionnés. Il est donc primordial de choisir dès le début un système qui correspond à ses besoins.

PrestaShop est la solution e-commerce open source la plus utilisée en France et se développe de manière conséquente à l’international. Avec plus de 200 000 boutiques en ligne présentes dans 160 pays, PrestaShop est désormais une solution incontournable. Quelles sont donc les raisons de choisir une création site PrestaShop pour créer sa boutique de vente en ligne ?

Une grande facilité d’utilisation :

Prestashop est un outil suffisamment accessible pour permettre à chacun de faire ses premiers pas dans le e-commerce. Son interface intuitive vous permettra de gérer très facilement le contenu de votre site.. En effet, une fois que votre boutique sera créée, vous pourrez aisément gérer votre catalogue de produits, les commandes en cours, les livraisons, analyser vos statistiques…

Un CMS complet

PrestaShop vous permet des centaines de modules à installer pour enrichir votre boutique en ligne. Ainsi, vous pourrez ajuster votre boutique comme vous le souhaitez, en fonction du budget que vous souhaitez y consacrer. En ce qui concerne le référencement par exemples, plus d’une soixantaine de modules existent et vous permettent de gérer plus facilement l’optimisation de votre site internet.

Une communauté active

Forte d’une communauté de près de 700 000 membres , PrestaShop est en perpétuelle évolution. En optant pour une création site PrestaShop, vous serez ainsi sûr(e) que votre boutique ne deviendra pas obsolète. En effet, des mises à jour sont souvent appliquées et PrestaShop se munit ainsi régulièrement de nouvelles fonctionnalités.

Les technologies web les plus récentes

PrestaShop intègre les technologies web les plus récentes pour en améliorer les performances : Bootstrap 3.0, FontAwsome, Sass Compass et D3 Data Driven Documents.

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 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 listes de définition dans Bootstrap 3 (Partie 1)

Comme dans un dictionnaire, on trouve (mot: définition) où la définition est toujours plus longe et plus riche en contenu. Les listes de définition représente le même cas d’utilisation.  Les listes de définition sont créées en combinant les balises <dl>, <dt> et <dd>.

Les listes de définition verticales

Une liste de définition verticale ressemble beaucoup à celle obtenue avec le HTML sans utiliser les CSS. Les titres sont en gras, et la définition n’est plus décalée.

Ce qui donne le résultat suivant :

listes-de-definition-verticales

Exemple de listes de définition verticales

Les listes de définition horizontales

Les listes de définition horizontales (LDH) ressemble en grande partie aux listes de définition verticales. Sauf que les LDH sont “mobile first” et la définition est décalée.

Pour créer une liste de définition horizontale, nous allons ajouter à la balise <dl> la classe .dl-horizontal.

Ce qui donne ceci:

listes-de-definition-horizontales

Exemple de listes de définition horizontales

Attention: Les listes de définition horizontales sont transformées automatiquement par Bootstrap 3 en liste de définition verticales sur les supports mobiles.

Les listes en ligne dans Bootstrap 3

Les listes en ligne sont utilisées par les développeurs pour créer des menus et sous-menus. Bootstrap 3 nous a facilité la tache avec la classe .list-inline, qu’elle suffit d’ajouter à la balise <ul>

Ce qui donne le résultat suivant :

listes en ligne - Bootstrap3

listes en ligne – Bootstrap3

C’est le menu le plus basique que l’on peut faire avec Bootstrap 3. dans les cours qui viennent nous créerons des menus de plus en plus sophistiqués.

Les listes basiques dans Bootstrap 3

Les listes sont de plus en plus utilisées par les développeur, elles facilitent considérablement l’organisation du contenu et la création des menus de navigation. Bootstrap 3 propose donc une solution standard pour créer des listes avec un minimum de code.

I – les listes basiques (simples)
Pour créer des listes basiques, on utilise les balises <ul><li>.

Le code ci-dessus donne le résultat suivant :

Exemple des listes basiques

Exemple des listes basiques

Bootstrap vous offre la possibilité de supprimer les puces sans rien modifier dans le CSS. Il suffit d’ajouter la classe .list-unstyled à la balise <ul>.

Ce qui donne le résultat suivant:

Listes basiques sans puces

Listes basiques sans puces

Dans cette introduction sur les listes “Les listes basiques dans Bootstrap 3”, nous avons découvert comment créer des listes à l’aide de Bootstrap 3, qui à ce stade là, nous n’apporte peu de nouveautés

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.