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

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.

Typographie – Titres et paragraphes

En HTML, on utilise la balise <p> pour insérer un paragraphe et la balise <hx> pour insérer un titre.

Les titres – de h1 à h6

Les balises de <h1> à <h6> désignent les titres, Bootstrap 3 est livré avec un préformatage un peu particulier:

Balise Taille Padding-top Padding-bottom
h1 36 px 20 px 10 px
h2 30 px 20 px 10 px
h3 24 px 20 px 10 px
h4 18 px 10 px 10 px
h5 14 px 10 px 10 px
h6 12 px 10 px 10 px

Pour créer des titres dans Bootstrap 3, rien de plus simple :

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

Titres préformatés de Bootstrap 3

Exemples des titres – Bootstrap 3

Les paragraphes

Pour insérer un paragraphe dans votre page, utilisez la balise <p> : <p>...Votre paragraphe...</p>

Comment aligner des paragraphes avec Bootstrap 3

Bootstrap 3 vous permet d’organiser facilement vos paragraphes: aligner à gauche, aligner à droite ou au centre.

– Pour aligner le texte à gauche, nous utilisons la classe .text-left.
– Pour aligner le texte à gauche, nous utilisons la classe .text-right.
– Et pour center le texte, nous utilisons la classe .text-center.

Alignement du texte dans Bootstrap 3

Exemple d’alignement du texte – Bootstrap 3

Mettre en valeur une partie du texte avec Bootstrap 3

Pour mettre en valeur un paragraphe de votre page, Bootstrap 3 met à votre disposition un certain nombre d’outils : les citations – la classe lead – les wells

a – Les citations :

Pour inserer une citation dans votre page, il suffit d’utiliser la balise <blockquote>. avec Bootstrap 3, vous pouvez utiliser la balise comme suit :

La balise  <blockquote> indique le début de la citation et la balise <small> pour indiquer sa/ses référence(s).

Exemple d'une citation - Bootstrap 3

Exemple d’une citation – Bootstrap 3

b – Les wells

Les wells permettent d’insérer du texte ou tout autre contenu HTML (listes, liens, …) dans une boite. celle-ci a un arrière plan gris et des bordures aux coins arrondis.

Pour créer un weel, ajoutez la classe .well dans une section <div> comme suit :<div class="well">. Par défaut, les wells ont un padding de 19px et pour modifier le padding par defaut, utilisez les sous-classes .well-lg et .well-sl:

Classe Padding
.well 19 px (padding par défaut)
.well .well-sm 9 px
.well .well-lg 24 px

Exemple d’utilisation des Wells:

Ce qui donne le résultat suivant :

Exemple des wells - Bootstrap 3

Exemple d’un well – Bootstrap 3

c – La classe lead

Dans le cas où vous voudrez ajouter un résumé à la tête d’un long texte, Bootstrap 3 met à votre disposition la classe .lead pour différencier ce résumé et le texte entier de votre page.

Ce qui donnera l’aspect visuel suivant :

Exemple de la classe lead - bootstrap 3

Exemple de la classe lead – bootstrap 3

Cette partie du cours intitulée: Typographie – Titres et paragraphes dans Bootstrap 3 Vous a permet de mettre en pratique les titres et les paragraphes dans Bootstrap 3 et aussi la découverte des éléments de mis en valeur du texte à l’instar des citation et Wells.