Bootstrap framework tutorial pour débutant
Présentation de Bootstrap 3
Bootstrap 3 est une bibliothèque d’outils HTML, CSS et JavaScript destinés à aider les développeurs de sites et d’applications web.
À l’origine, Bootstrap était un projet interne lancé au sein de l’entreprise Twitter. L’objectif était ici de concevoir une librairie qui permettrait d’accélérer et d’uniformiser le développement des interfaces côté utilisateur (front-end).
Après plusieurs mois de travail, en 2011, la petite équipe menée par Mark Otto et Jacob Thornton fut en mesure de présenter Bootstrap. Devant l’enthousiasme des équipes de développement de Twitter, décision a été prise de mettre à disposition du grand public les fichiers source. En août 2011, la version 1 de Bootstrap fut diffusée sous licence libre et une communauté de développeurs s’est rapidement réunie via la plateforme GitHub dans le but d’enrichir la bibliothèque.
La première version de Bootstrap est devenue en quelques mois la bibliothèque la plus complète d’outils pour les interfaces côté utilisateur. Le 31 janvier 2012, Bootstrap 2 fut mis en ligne. En plus d’une librairie considérablement enrichie, cette version mettait à la disposition des développeurs un environnement adapté aux écrans des supports mobiles tels
Pré-requis
Cet ouvrage est destiné aux professionnels et aux amateurs de développement web. Une bonne connaissance des standards HTML5 et CSS3 est nécessaire pour une bonne compréhension de ce livre.
Lorsque nous étudierons les différentes fonctions et les attributs proposés par l’API de Bootstrap 3, nous ferons appel à des notions courantes de jQuery. Par conséquent, il est recommandé au lecteur de maîtriser les mécanismes basiques de JavaScript et de jQuery.
Ceci étant, nous souhaitons que ce livre soit accessible au plus grand nombre. Par conséquent, chaque partie de ce livre sera illustrée d’exemples et le code employé sera décrit en détail.
La compatibilité
Comme expliqué plus haut, Bootstrap 3 a été construit pour répondre au développement de l’Internet mobile : un site créé avec Bootstrap 3 sera par défaut responsive. Le système de grilles proposé permet au développeur d’ajuster très facilement le contenu d’une page web à la taille des écrans sur lesquels elle sera consultée.
En termes de compatibilité, la documentation indique que Bootstrap 3 fonctionne sans problème sur les dernières versions des navigateurs les plus courants.
Navigateur | OS/Support |
Chrome | Mac, Windows, iOS et Android. |
Safari | Mac et iOS seulement. Pas de support pour les versions Windows. |
Firefox | Mac et Windows. Support non assuré pour les versions antérieures à Firefox 4. |
Internet Explorer | Pas de support pour les versions antérieures à Internet Explorer 10. La compatibilité est limitée avec les versions 8 et 9, mais de nombreuses "rustines" existent, permettant d’obtenir des résultats satisfaisants. |
Opera | Mac et Windows. Pas d’information disponible concernant le support. |
Au fil de cet
ouvrage, les problèmes de compatibilité entre les navigateurs et certaines fonctionnalités de Bootstrap 3 seront évoqués. Seuls les correctifs documentés, testés et validés par la communauté Bootstrap 3 seront mis en avant.
Mettre en place Bootstrap
Afin d’être capable d’utiliser Bootstrap 3, il convient, d’abord, de télécharger le code source. Pour cela, rendez-vous sur le site officiel à l’adresse suivante :-started/#download. Cliquez sur le bouton Download Bootstrap. Cette action vous amène à télécharger le fichier , compressé au format ZIP.
Une fois l’archive décompressée dans un dossier appelé "bootstrap", par exemple, la structure de fichiers suivante apparaît :
Le tableau ci-dessous décrit le contenu et le rôle de chacun de ces fichiers :
Dossier | Fichier |
css | : feuille de style de Bootstrap. : version minimisée de la feuille de style . : feuille de style additionnelle contenant des éléments provenant de Bootstrap 2. : version minimisée de la feuille de style . |
js | : fichier JavaScript de Bootstrap. : version minimisée du fichier JavaScript . |
fonts | Fichiers de police contenant la bibliothèque d’icônes Glyphicon : |
Les
fichiers minimisés reprennent l’intégralité des fichiers source originaux en supprimant tous les sauts de ligne,
Personnaliser Bootstrap 3
Bootstrap 3 est composé d’un ensemble de modules (boutons, barres de navigation, tableaux ) indépendants les uns des autres. En fonction des besoins de développement, certains d’entre eux peuvent s’avérer inutiles. Afin de ne pas surcharger les feuilles de style et les fichiers JavaScript source, il convient de faire appel à l’outil de customisation de Bootstrap 3 disponible à l’adresse suivante :
Supposons que vous souhaitez uniquement utiliser les éléments de grille, les boutons et les formulaires de Bootstrap 3. Dans ce cas, décochez la plupart des options de l’outil de customisation de la façon suivante :
Une fois le formulaire complété, cliquez sur le bouton Compile and Download en bas de la page. Le téléchargement de l’archive démarre. Une fois celle-ci extraite, vous remarquerez que les fichiers source ont été très significativement allégés. La feuille de style , par exemple, ne pèse plus que 50 Ko contre 118 Ko pour la version standard.
Créer une première page HTML avec Bootstrap 3
Nous disposons, à présent, des éléments nécessaires à la création de notre première page HTML sous Bootstrap 3.
Nous allons donc créer un nouveau fichier au format HTML.
Le code :
|
scale=1.0"> |
Première page en utilisant Bootstrap 3 |
|
|
|
|
Première page avec Bootstrap
|
Analyse du code
scale=1.0"> |
Déclarer cette balise est impératif lorsqu’on utilise Bootstrap 3. En effet, elle permet au moteur CSS de déterminer la taille de l’écran avec lequel la page
La documentation relative à Bootstrap 3
La documentation relative à Bootstrap 3 est encore assez rare.
Si vous maîtrisez l’anglais, rendez-vous sur le site Internet officiel de Bootstrap 3
:. Vous y trouverez une description complète des outils de Bootstrap 3.
Une traduction française de ce site est disponible à l’adresse suivante
:
Cependant, bien qu’elle semble être validée par les créateurs de Bootstrap, nous ne sommes pas en mesure de garantir la qualité des informations contenues dans cette documentation.
Les outils de développement et de débogage
Les exemples de cet ouvrage sont tous composés à l’aide de Notepad++, éditeur gratuit de fichiers source sous licence GPL. Vous pouvez le télécharger à l’adresse suivante :
Tous les navigateurs courants proposent des outils de développement et de débogage performants. Dans ce livre, nous avons choisi d’utiliser les fonctionnalités de Google Chrome. Comme nous travaillerons principalement sur des problématiques de code CSS et de HTML, nous utiliserons la fonction Inspecter l’élément : il suffit de positionner le curseur sur l’élément de la page à analyser, d’effectuer un clic droit et de sélectionner Inspecter l’élément.
Cette action entraîne l’ouverture d’une fenêtre détaillant l’ensemble du code HTML de la section ainsi que le code CSS associé :
Cet outil très puissant permet en outre d’éditer ou de supprimer chaque ligne de code CSS. Chrome recalcule ensuite la page pour donner un aperçu en temps réel de chaque changement.
Introduction
"Mobile first", tel est l’esprit de ce chapitre. Avec le développement des tablettes et des smartphones, les internautes se connectent de moins en moins à Internet depuis leurs ordinateurs de bureau. Le développeur doit être conscient de cela lorsqu’il crée une page web.
Contrairement à la plupart des frameworks CSS, Bootstrap 3 considère l’ordinateur de bureau comme un support parmi d’autres. Nous verrons que, lors de la création d’une page web sous Bootstrap 3, chaque zone est déclarée en fonction de l’aspect désiré pour chaque type de terminal. À première vue, cela peut paraître inutilement complexe au développeur. Mais, avec un peu d’expérience, cette méthode permet de créer très facilement une interface optimisée pour chaque plateforme, garantissant la meilleure expérience utilisateur possible.
Le concept de grille
Le concept de grille est fondamental pour tout développeur. Il permet de disposer le contenu d’une page en parties homogènes.
Bootstrap 3 découpe le corps de la page en une grille composée de lignes de 12 colonnes de largeur égale :
Pour mettre en forme notre corps de page, nous allons déclarer une ligne (en utilisant la classe .row), puis nous y intégrerons notre contenu. Celui-ci pourra être divisé en plusieurs modules, chacun occupant un nombre de colonnes déterminé qui définira sa largeur.
Bootstrap 3 apporte une subtilité supplémentaire puisqu’il propose quatre systèmes de grilles distincts. Chacun correspondant à un type d’écran et à une collection de classes :
Grille | Classes | Taille d’écran | Type d’écran |
xs : extra small devices | .col-xs-* |
| Smartphone |
sm : small devices | .col-sm-* |
| Tablette |
md : medium devices | .col-md-* |
| Écran de bureau |
lg : large devices | .col-lg-* | 1 200 pixels | Grand écran de bureau |
Ainsi, pour créer une page
destinée, par défaut, à être visionnée sur un ordinateur de bureau classique, nous utiliserons le jeu de classes .col-md-*. L’astérisque correspondant au nombre de colonnes occupé par chaque élément.
En guise d’illustration,
Créer une page multigrille
Dans l’exemple précédent, nous avons utilisé la grille dédiée aux écrans d’ordinateurs de bureau classiques (medium devices, classes .col-md-*). Nous souhaitons, ici, obtenir un affichage adapté à plusieurs supports. Pour cela, nous allons combiner plusieurs grilles.
Ici, nous souhaitons que la zone principale occupe 10 colonnes sur un écran de bureau classique, 8 colonnes sur une tablette et 6 sur un smartphone. Nous avons donc besoin d’appeler les classes suivantes :
Classe | Support | Nombre de colonnes |
.col-md-10 | Écran de bureau | 10 |
.col-sm-7 | Tablette | 8 |
.col-xs-6 | Smartphone | 6 |
Pour obtenir l’effet désiré, nous allons créer une section
classes les unes après les autres :
De façon symétrique, nous utiliserons les classes suivantes pour définir la taille de la barre verticale contenant nos widgets afin que l’ensemble occupe les 12 colonnes de notre corps de page :
Classe | Support | Nombre de colonnes |
.col-md-2 | Écran de bureau | 2 |
.col-sm-4 | Tablette | 4 |
.col-xs-6 | Smartphone | 6 |
|
En combinant ces trois classes, nous créons la section suivante :
Nous pouvons
Décaler les éléments d’une grille
Dans les exemples précédents, nous avons fait en sorte que le total des colonnes occupées soit toujours égal à 12. Ainsi les éléments occupent toujours l’intégralité de la largeur du corps de la page.
Imaginons que cette fois-ci nous devons créer une page composée de deux éléments. Le premier occupera les 4 premières colonnes de la grille. Les 2 colonnes suivantes seront vides, tandis que le second élément occupera les 6 colonnes restantes de la grille.
Pour la première zone, nous utiliserons la classe .col-md-4 qui la mettra en forme sur 4 colonnes. Pour la seconde, nous appellerons la classe .col-md-6. Le décalage sur 2 colonnes dont nous avons besoin sera obtenu grâce au jeu de classes .col-md-offset-*, l’astérisque correspondant au nombre de colonnes de décalage souhaité.
Le code suivant nous permet d’obtenir le décalage souhaité :
|