Afficher et cacher du contenu dans Bootstrap 3 en fonction de la taille de l’écran

Bootstrap 3 met à votre disposition une collection de classes permettant d’afficher ou de cacher du contenu en fonction de la taille de l’écran. tout cela pour vous simplifier la vie et vous faciliter  le développement d’une page multisupport.

Nous allons ici présenter les classes .hidden-* et .visible-* que nous utiliserons pour arriver à ce résultat :

Classe Extra small devices (smartphone) Small devices (tablette) Medium devices

(écran de bureau)

Large devices

(grand écran)

.visible-xs visible caché caché caché
.visible-sm caché visible caché caché
.visible-md caché caché visible caché
.visible-lg caché caché caché visible
.hidden-xs caché visible visible visible
.hidden-sm visible caché visible visible
.hidden-md visible visible caché visible
.hidden-lg visible visible visible caché

Le tableau ci-dessous vous donne une vue globale et complète Bootstrap 3 permettant de cacher, sur les plus petits supports, certains blocs dont le contenu est secondaire.

Exemple :

Résultat de la page sur un ordinateur de bureau:

Le résultat de la page sur un ordinateur de bureau

Le résultat de la page sur un ordinateur de bureau

cacher-contenu-Bootstrap 3

Le résultat de la page sur un smartphone

Comme attendu, l’usage de la classe .hidden-xs permet de cacher le deuxième bloc sur l’écran de notre smartphone

L’affichage multiligne dans Bootstrap 3

Dans les cours/tutos précédents, nous avons donné des exemples des blocs repartis sur 12 colonnes. Ainsi, l’ensemble du contenu se retrouve disposé sur une seule et même ligne.

Et si la somme des colonnes occupées par les éléments de la grille est supérieure à 12 ?

Dans ce cas, Bootstrap 3 affiche automatiquement les blocs sur plusieurs lignes. Pour illustrer ce concept, nous allons créer cinq zones que nous répartirons sur 20 colonnes :

Visionnons maintenant la page sur notre navigateur :

Affichage multiligne Bootstrap 3

Affichage multiligne Bootstrap 3

Les blocs sont automatiquement disposés sur deux lignes différentes afin de respecter les largeurs voulues.

Imbriquer plusieurs grilles dans Bootstrap 3

Pour créer des pages web complexes avec Bootstrap 3, il faut commencer à penser “Imbrication des grilles”, dans ce nouveau cours “Imbriquer plusieurs grilles dans Bootstrap 3” nous allons définir une première zone dans le corps de la page dont nous paramétrerons la largeur. Ensuite nous y insérerons une grille, elle-même découpée en 12 colonnes, dans laquelle nous pourrons mettre en forme d’autres contenus :

Observons maintenant comment sont organisées ces deux grilles imbriquées :

Imbrication des grilles bootstrap 3

Imbrication des grilles bootstrap 3

Nous obtenons donc une zone principale occupant 9 colonnes au niveau du corps de la page. Une seconde grille est insérée dans cet élément. Nous y avons créé trois zones : la première occupant 3 colonnes, la seconde 5 et la dernière 4 colonnes.

Décaler les éléments d’une grille

Dans les deux derniers cours (Créer une page web multigrille avec Bootstrap 3 et Comprendre le concept de grille dans le webdesign), nous avons mis en place des éléments occupant l’intégralité de la largeur du corps de la page (12 colonnes).

Un seul élément occupant l'intégralité du corps de la page

Un seul élément occupant l’intégralité du corps de la page

Mais en pratique, nous avons toujours tendance à créer des pages web composées de plus d’un élément. Par exemple, comment faire à l’aide de Bootstrap 3 pour créer une page composée de deux éléments séparés par un vide, où le premier élément occupera les 6 premières colonnes, un vide de deux colonnes et un deuxième élément de 4 colonnes (ce qui fait 12 colonnes de la grille de Bootstrap 3).

Decalage des elements dans bootstrap 3

Pour le premiere élément de 6 colonnes, nous utiliserons la classe .col-md-6 qui le mettra en forme. Pour le deuxième élément, nous appellerons la classe .col-md-4. Le décalage (le vide entre les deux élément) sera obtenu à l’aide du jeu de classes .col-md-offset-*, l’astérisque correspondant au nombre de colonnes de décalage souhaité.

Le bout de code ci-dessous, nous permettra d’obtenir le décalage souhaité:

Ce qui donne le résultat ce-dessous sur notre écran :

Décalage entre les éléments d'une page

Décalage entre les éléments d’une page

Nous avons vu que le jeu de classes  .col-md-offset-* nous permet de gérer le décalage (créer un vide entre les éléments) sur une grille “medium devices”, adaptée aux écrans d’ordinateurs de bureau classiques. Pour obtenir un décalage sur une grille “small devices” (tablettes), nous utiliserons .col-sm-offset-*. Concernant les smartphones, la grille “extra small devices” sera nécessaire avec .col-xs-offset-*. De la même manière, nous ferons appel à .col-lg-offset-* pour les écrans les plus larges.

Créer une page web multigrille

Dans le cours précédent: (Créer une page web multigrille avec Bootstrap 3), nous avons utilisé une grille dédiée aux écrans d’ordinateurs de bureau classiques (md). Dans ce cours nous allons apprendre à créer des pages web adaptées à plusieurs support (Smartphone, Tablette, Desktop). Pour cela, nous allons combiner plusieurs grilles.

Ici, nous souhaitons que la zone principale occupe:

  • 9 colonnes sur un écran de bureau classique (.col-md-10)
  • 7 colonnes sur une Tablette (.col-sm-8)
  • 5 colonnes sur un Smartphone (.col-xs-6)

Rappel :

Rappel sur les grilles Bootstrap 3

Rappel sur les grilles Bootstrap 3

Pour obtenir le résultat désiré,  nous allons créer une section <div> qui prend en paramètre trois classes : <div class="col-md-10 col-sm-8 col-xs-6"> ... </div>

Comme nous avons précédemment dit, la grille Bootstrap 3 est composée de 12 colonnes, donc d’une façon symétrique, nous utilisons les classes suivantes pour définir la taille de la zone secondaire :

  • 2 colonnes sur un écran de bureau classique (.col-md-2)
  • 4 colonnes sur une Tablette (.col-sm-4)
  • 6 colonnes sur un Smartphone (.col-xs-6)

Pour créer cette seconde zone, il suffit de créer une section <div> comme suit :
<div class="col-md-2 col-sm-4 col-xs-6"> ... </div>

ci-dessous, l’exemple d’une page multi-grille :

Visionnons maintenant cette page sur notre ordinateur de bureau :

Page multigrille sur un ordinateur de bureau

Page multigrille sur un ordinateur de bureau

En chargeant la page sur un écran de bureau, la grille “medium devices” (.col-md-10 et .col-md-2) est prise en compte pour mettre en forme les deux zones. La zone principale occupe donc 10 colonnes. La seconde partie a donc une largeur de 2 colonnes.

Page multigrille sur une Tablette

Page multigrille sur une Tablette

Sur la tablette, le navigateur prend en compte les classes .col-sm-8 et .col-sm-4 correspondant à la grille dédiée aux tablettes (“small devices”).

Page multigrille sur smartphone

Page multigrille sur smartphone

Enfin, lorsque la page est affichée sur un smartphone, chaque zone a une largeur de 6 colonnes. Cela correspond à la classe .col-xs-6 de la grille “extra small devices” sélectionnée ici par Bootstrap 3.

Comprendre le concept de grille dans le webdesign

I – Qu’est ce qu’un système de grilles?

..une structure comprenant une série de lignes horizontales et verticales, utilisées pour organiser le contenu d’une page web.

Les grilles sont un élément essentiel en Webdesign, elle vous permet d’organiser harmonieusement le contenu présent sur vos pages.

Système de grille webdesign

Système de grille webdesign

Outre le fait de produire une mise page bien structurée, les grilles dans le webdesign servent d’armature pour organiser la page et son contenu et favorisent un travail plus rapide au niveau de l’intégration CSS.

II – La grille de Bootstrap 3:

Bootstap 3 découpe le corps de la page en une grille composée de lignes de 12 colonnes de largeur égale:

Grille Bootstrap 3

Grille Bootstrap 3

Pour mettre en forme le contenu de notre page, nous allons commencer par la déclaration d’une ligne (en utilisant la classe .row), puis nous y intégrerons notre contenu. celui-ci pourra être divisé en plusieurs blocs, chacun occupant un nombre de colonnes déterminé qui sert à définir sa largeur.

Bootstrap 3 propose quatre systèmes de grilles, chacun correspondant à un type d’écrans :

Grille Classes Type d’écran Taille d’écran
xs : extra small devices .col-xs-* Smartphone < 768 pixels
sm : small devices .col-sm-* Tablette < 992 pixels
md : medium devices .col-md-* Écran de bureau < 1 200 pixels
lg : large devices .col-lg-* Grand écran de bureau ⩾ 1 200 pixels

L’astérisque correspondant au nombre de colonnes occupé par chaque élément.

2.1 – Exemple d’utilisation :

Nous allons créer le squelette d’une pageweb composée d’une ligne divisée en deux éléments: une partie centrale occupant 8 colonnes et une autre occupant 4 colonnes.
Commençons par la création d’une ligne à l’aide la classe .row. Et au sein de cette ligne nous ajouterons le premier élément (occupant 8 colonnes) en utilisant la classe .col-md-8 et pour le deuxième élément nous l’ajouterons aussi à l’aide de la classe .col-md-4.

Exemple d'illustration - Grille Bootstrap 3

Exemple d’illustration – Grille Bootstrap 3

2.2 – Code Source :

Grille bootstrap 3 exemple 1

Grille Bootstrap – Une ligne et deux colonnes

2.3 – Explication du code:

Les balises <meta>, <link> et <div class="container"> ont été expliqué dans une autre leçon : première page HTML avec Bootstrap 3 .

<div class="row"> : permet la création d’une première ligne
<div class="col-md-8"> <h2>Zone principale</h2> </div> : création de la zone principale de notre page web, il occupe 8 colonnes de la grille destinée aux écrans des ordinateurs de bureau classiques (md).
<div> <h2>Widgets</h2> </div> : Création de la zone secondaire occupant 4 colonnes de la grille .

Comme nous avons utilisé le jeu de classe .col-md-*, la disposition 8 colonnes/4 colonnes s’affiche correctement sur tout écran dont la largeur est supérieure à 992 pixels.

Lorsque nous visionnerons le contenu de cette page sur un Smartphone ou une Tablette,  Bootstrap 3 repositionnera automatiquement les éléments de notre page(à savoir la zone principale et la zone secondaire).

Dans ce cours « Comprendre le concept de grille dans le webdesign », nous avons découvert comment Bootstrap 3 organise les différentes zones d’une page web en utilisant la grille adaptée à un support déterminé.
Dans le cours suivant, nous allons voir comment créer des pages web optimisées pour chaque type de support (Smartphone, Tablette, Desktop)

Première page HTML avec Bootstrap 3

Apres avoir installé Bootstrap 3 sur votre ordinateur, vous vous disposez donc de tous les éléments nécessaires à la création de votre première page HTML avec Bootstrap 3.
Le code ci-dessous vous permet de créer votre première page HTML avec Bootstrap 3:

Explication du code:

Depuis sa deuxième version, Bootstrap vous offre la possibilité d’activer/désactiver le mode responsive à l’aider de la balise <meta>. Ajoutez la balise <meta> dans le <head> de votre page web pour activer le mode responsive et enlevez-la pour le désactiver.

<link href="css/bootstrap.css" rel="stylesheet"> : chargement de la feuille de style bootstrap.css par le navigateur.

<script src="js/jquery.js"></script> : chargement de la bibliothèque JQuery par le navigateur. JQuery est essentiel pour le fonctionnement de Bootstrap 3.

<script src="js/bootstrap.min.js"></script> : chargement du fichier source JavaScripte de la bibliothèque Bootstrap 3 par le navigateur.

<div class="container"> : permet de définir la largeur et la disposition du canevas de la page.

<h1>Première page avec Bootstrap 3</h1> : Titre Première page avec Bootstrap 3 est affiché.

Bonnes pratiques :

Mettez toujours les fichiers css dans le <head> de votre page et les fichiers Javascript juste avant de fermer le </body> comme l’exemple du source ci-dessus vous le montre.

La bibliothèque Bootstrap utilise JQuery pour fonctionner, il faut donc respecter l’ordre de déclaration des bibliothèques (Declarer bootstrap.min.js apres jquery.js).

Outils de développement pour Bootstrap

Logo de Notepad++

Logo de Notepad++

Tout au long de ce cours, nous utiliserons un éditeur de fichiers source gratuit, appelé Notepad++. Il est disponible en téléchargement sur l’adresse suivante: http://notepad-plus-plus.org/.

Parmi ses avantages,  la coloration syntaxique du code source  et son interface graphique disponible en plusieurs langues, ce qui lui permet d’être l’un des éditeurs de code source les plus utilisé pour le développement web et aussi pour l’édition des fichiers ordinaires.

Personnaliser Bootstrap 3

Pourquoi a-t-on besoin de personnaliser Bootstrap 3

Bootstrap nous offre une série de composants (boutons, barres de navigation, menus, barres de progression,…) indépendants les uns des autres. Selon vos besoins pour un projet, vous pouvez vous débarrasser de certains composants jugés inutiles, dans le but d’alléger les feuilles de style css et les fichiers JavaScripte.

Sur l’adresse suivante:http://getbootstrap.com/customize/ vous pouvez personnaliser votre bibliothèque Bootstrap selon vos besoin en décochant tout ce qui est inutile à votre projet!

Personnaliser Bootstrap 3

Outil de personnalisation de Bootstrap 3

Après avoir configurer votre bibliothèque Bootstrap 3, cliquez sur le bouton Compile and Download en bas de la page. Une fois téléchargée et décompressée, vous remarquerez que les fichiers source sont significativement allégés.

Installation de Bootstrap 3

Téléchargement de Bootstrap 3

Pour utiliser la bibliothèque Bootstrap dans votre projet, il existe plusieurs méthodes, chacune correspondant à un niveau d’expertise et des cas d’utilisation.
Pour faire simple, rendez-vous sur le site officiel à l’adresse suivante : http://getbootstrap.com/getting-started/#download. Cliquez sur le bouton Download Bootstrap. Une fois l’archive téléchargée et décompressée dans un dossier appelé Bootstrap3 par exemple, la structure de fichier ci-dessous apparait :

Le dossier Bootstrap3 (dans lequel vous avez décompressé le fichier téléchargé), contient trois dossiers: css, js et font où chacun d’eux contient un certain nombre de fichiers.

Contenu et role des fichiers de Bootstrap 3

Dossier Fichier Description
css bootstrap.css feuille de style de Bootstrap.
bootstrap.min.css version minimisée de la feuille de style bootstrap.css.
bootstrap-theme.css feuille de style additionnelle contenant des éléments provenant de Bootstrap 2.
bootstrap-theme.min.css version minimisée de la feuille de style bootstrap-theme.css.
js bootstrap.js fichier JavaScript de Bootstrap.
bootstrap.min.js version minimisée du fichier JavaScript bootstrap.js.
font glyphicons-halflings-regular.eot Fichiers de police contenant la bibliothèque d’icônes Glyphicon
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Comme vous l’avez certainement remarqué, les fichiers css et js existent en deux exemplaires : les originaux et les minimisés.

Qu’est ce qu’un fichier css/js minimisé?

Un fichier css/js  minimisé est un fichier qui reprend le même contenu du fichier original en supprimant tous les sauts de ligne, commentaires et espaces inutiles.

Pour des raisons de performances, on opte souvent pour les fichiers minimisés dans les environnements de production et les fichiers originaux pendant la phase de  développement.

Avantages et inconvénients d’un fichier css/js minimisé:

Lorsqu’on utilise les fichiers minimisés dans nos projets, les pages web qui l’utilisent, bénéficient d’un temps de chargement beaucoup plus amélioré par rapport aux pages utilisant les fichiers originaux, cela est dû, à la taille des fichiers après leur minimisation (suppression de tous les sauts de ligne, commentaires et espaces inutiles).

Cependant, un fichier minimisé est difficile à lire et à modifier.

Installation de Bootstrap 3

Bootstrap utilise JQuery pour fonctionner, nous vous conseillons de télécharger la dernière version de JQuery en vous rendant sur le site officiel de cette bibliothèque: http://jquery.com/ . Copiez le fichier téléchargé dans le dossier js de Bootstrap.