About the Author

OpenTuto

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.

Compatibilité de Bootstrap 3 avec les navigateurs

Bootstrap 3 et les navigateurs

Bootstrap 3 est construit pour fonctionner de manière optimale avec les derniers navigateurs sur Ordinateurs et sur les supports mobiles. Mais cela ne veut pas dire que Bootstrap 3 est incompatible avec les anciennes versions des navigateurs, bien qu’il existe des correctifs fournis par la communauté Bootstrap afin de corriger les  problèmes de compatibilité et certaines fonctionnalités de Bootstrap 3.

Compatibilité de Bootstrap 3 avec les navigateurs

Compatibilité de Bootstrap 3 avec les navigateurs

Pour plus de détails, consulter le site officiel de Bootstrap.

Introduction à Bootstrap 3

Qu’est-ce que Bootstrap?

Bootstrap est une collection d’outils HTML, CSS et JavaScript destinés à aider les développeurs de sites et applications web.

Bootstrap a été crée en 2011 par Mark Otto et Jacob Thornton, deux salariés de l’entreprise Twitter. Son objectif au départ était de Proposer une bibliothèque de composants standard qui permettrait d’accélérer et d’uniformiser le développement des interface coté utilisateur.

Bootstrap est de plus en plus connu et est devenu « le framework front-end » le plus populaire pour développer des projets responsive et mobile-first sur le web.

Pourquoi utiliser Bootstrap?

Bootstrap est framework css open-source qui vous permet de :

  • Gagner du temps et augmenter votre productivité (une tonne d’éléments pré-configurés (boutons, forms, listes, …),
  • Faciliter la maintenance de votre site (code normalisé donc très facile à maintenir),
  • Garantir un aspect unique à votre site quelque soit le navigateur utilisé (compatibilité entre navigateurs gérée par Bootstrap),
  • D’avoir un site responsive qui s’adapte automatiquement en fonction de votre écran/périphérique (Smartphone, Tablette, Ordinateur),
  • etc…

Historique de Bootstrap :

Après la création et l’utilisation du framework Bootstrap en interne, L’entreprise Twitter à décidé assez vite de publier la première version de Bootstrap : Bootstrap1 en Open Source. Son code est disponible depuis août 2011.

la deuxième version de Bootstrap : Bootstrap 2 est apparue le 31 janvier 2012, qui mettait à la disposition des développeurs de nouveaux composants graphiques: Progress Bars, Button Groups, Carousels,...etc, mais la nouveauté phare de Bootstrap 2 a été la mise en place d’un système permettant de créer des sites et application web complétement responsive qui s’adapte avec les supports mobiles tels que les smartphones et les tablettes

Le 18 août 2013, la troisième version de bootstrap : Bootstrap 3 a vu le jour après une refonte complete de la bibliothèque par Mark Otto et Jacob Thornton

L'historique de Bootstrap

L’historique de Bootstrap

Nouveautés de Bootstrap 3 :

Bootstrap 3 est toujours disponible sous licence Apache 2.0, cette dernière version débarque  avec une nouvelle apparence, nouveaux composants et d’autre correctifs et changements.  Nous citerons ci-dessous les nouveautés phares de Bootstrap 3:

  • Un nouveau thème flat et un autre thème optionnel pour les non-fans du flat design,
  • Un nouveau système de grilles complétement repensé. Il est basé sur la taille du support qui affiche la page,
  • Une nouvelle série de composants: panneaux, liste groupée, panneau escamotable et d’autres ont été supprimés ou modifiés,
  • Un nouvel outil pour personnaliser Bootstrap en ligne afin d’éliminer tout ce qui est inutile à votre projet,
  • De nouveaux glyphicônes,
  • etc…