INTRODUCTION - BOOTSTRAP
Ce cours s'adresse aux personnes qui ont des notions voire maîtrisent le HTML et le
CSS. Si ce n'est pas le cas, je vous invite à suivre dans un premier temps, le cours sur
le HTML puis de passer au CSS. Ce n'est pas un passage obligatoire, on peut
commencer directement avec Bootstrap, mais de bien nombreuses notions pourront
vous paraître abstraites voire complètement obscures.
Ce cours se focalise donc sur le framework Bootstrap. En informatique,
un framework désigne un ensemble cohérent de composants, qui sert à créer les
fondations d'un logiciel, programme ou application. Bootstrap est un framework
HTML/CSS qui permet de créer facilement et rapidement des sites et applications
web responsives. Il a été conçu pour aider les développeurs dans leurs travaux
quotidiens sur les langages que sont le HTML et le CSS. Il fonctionne notamment sur
un système de grille. Nous reviendrons plus longuement sur ce point dans les
premiers chapitres. Dans sa catégorie, Bootstrap est le plus populaire dans le monde
et est utilisé par de nombreux sites connus et CMS renommés. On peut notamment
citer PrestaShop. Il est bien évidemment open-source et gratuit. Historiquement,
deux développeurs de chez Twitter sont à l'origine de ce projet dont la première
version a vu le jour en 2011. Aujourd'hui, une vaste communauté l'améliore pas à pas.
C'est d'ailleurs l'un des projets open-source auquel le plus grand nombre de
développeurs participent.
Le framework Bootstrap permet par défaut de créer des sites web et applications
responsive design. Le responsive design est un mode de conception qui permet aux
pages de s’adapter aux résolutions de tous les supports pour offrir aux utilisateurs la
meilleure expérience utilisateur. Ainsi, que le visiteur navigue sur le site depuis un
ordinateur de bureau classique ou depuis son smartphone, la navigation sera
toujours optimisée.
Le but de ce cours est de se familiariser avec le framework, de le comprendre et
d'obtenir suffisamment de bases de ce dernier, pour être autonome dans la
création d'un site web ou d'une application responsive web simple.
Ce cours sur Bootstrap en est un parmi tant d'autres. Le web regorge de ressources
sur le développement web. Celui-ci a été rédigé par mes soins et est orienté pour les
débutants. Il est non-exhaustif. Si vous repérez une erreur ou un oubli, vous pouvez
bien évidemment me contacter.
Ce cours a été rédigé en février 2018 avec la version 4 de Bootstrap.
CHAPITRE 1 - PREMIÈRE PAGE
BOOTSTRAP
Après cette rapide introduction, entrons dans le vif du sujet en démarrant notre
première page Bootstrap 4. Il y a deux manières d'utiliser le framework : soit on
télécharge les fichiers depuis le serveur officiel de Bootstrap, soit on utilise un CDN.
Nous utiliserons cette dernière méthode dans ce cours.
Un CDN, ou réseau de diffusion de contenu en français, est un ensemble de serveurs
reliés entre eux par internet dans le but de fournir du contenu, généralement
statique. Dans notre cas précis, ils nous servent à utiliser l'ensemble du framework
Bootstrap sans le télécharger, localement sur notre machine ou sur notre serveur.
Cela a un côté pratique, par contre cela crée une dépendance vis-à-vis du CDN. En
effet, si celui-ci ne fonctionne plus pour une quelconque raison, notre site ou
application va se retrouver orphelin des contenus hebergés sur le CDN et va
nécessairement en pâtir. Sans plus attendre, retrouvez ci-dessous le code minimal
d'une page avec Bootstrap 4.
CODE MINIMAL D'UNE PAGE WEB AVEC BOOTSTRAP 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no" />
<title>Titre de la page affiché dans la barre du navigateur</title>
<link rel="stylesheet"
href="[Link] />
<link rel="stylesheet" href="[Link]" />
<script src="[Link]
<script
src="[Link]
script>
<script
src="[Link]
script>
<script src="[Link]"></script>
</head>
<body>
</body>
</html>
Si le HTML vous est familier, vous comprendrez aisément la plupart du code ci-
dessus. Si ce n'est pas le cas, je vous invite à commencer par le cours sur le HTML.
Pour la partie un peu plus complexe, les explications sont ci-dessous.
Bootstrap 4 est donc composé : d'un fichier CSS et de trois fichiers JS. Le fichier CSS
est propre à Bootstrap. Il contient l'essence même du framework. En ce qui concerne
les fichiers JS, on retrouve le framework jQuery ainsi que la librairie Popper sur
lesquels s'appuie Bootstrap. Bootstrap est donc dépendant de ces deux technologies.
C'est d'ailleurs pour ça que le fichier JS propre à Bootstrap est chargé en dernier. Si
on inverse la déclaration des fichiers JS, cela va produire une erreur. En effet,
Bootstrap a nécessairement besoin de jQuery et de Popper pour fonctionner
correctement. Il n'est pas primordial de connaitre jQuery et Popper pou utiliser
correctement Bootstrap. C'est cependant un plus non négligable.
La balise inhabituelle que l'on rencontre est <meta>. La balise <meta> n'est pas
intrinsèquement inhabituelle car on l'utilise entre autres pour définir l'encodage de la
page avec l'attribut charset="". La combinaison des attributs et des valeurs de cette
balise permettent de garantir un rendu correct et un zoom tactile sur les différents
supports mobiles. En effet, Bootstrap permet de gérer l'affichage de son site ou de
son application sur tous les supports, grâce au responsive design. Cette balise
permet de faire fonctionner cette fonctionnalité correctement. Notons que Bootstrap
est développé mobile first. Une stratégie sur laquelle nous reviendrons plus tard
dans le cours.
Pour notre site ou application web, nous nous appuyons sur le framework Bootstrap.
Cependant, nous souhaitons les personnaliser le maximum. La bonne pratique veut
qu'on ajoute un fichier CSS ([Link]) et JS ([Link]) supplémentaire pour ne
pas modifier les fichiers Bootstrap. En l'occurrence, étant donné qu'ils sont hébergés
sur un CDN, la tâche aurait été compliquée. Vous l'aurez compris, ce sont les deux
seuls fichiers en local du code minimal.
Nous sommes désormais prêts pour commencer à attaquer la version 4 de Bootstrap.
En somme, Bootstrap embarque un fichier CSS (monstrueux) qui met à disposition
du développeur une série de classes à utiliser à bon escient.
Let's go !
CHAPITRE 2 - LE SYSTÈME DE GRILLE
Le framework Bootstrap repose sur un système de grille. On entend par système de
grille, une structure de colonnes et de lignes permettant d'organiser le contenu et
la mise en forme de la page web. C'est l'élément essentiel et le cœur même de
Bootstrap. Cependant, ce système n'est pas seulement utilisé par ce dernier. On
retrouve le même fonctionnement dans d'autres frameworks.
Avant de pouvoir jouir du système de grille, il est primordial et requis de définir
le containeur. Il y en a deux types :
.container
.container-fluid
Les containeurs sont les composants les plus basiques de Bootstrap. Ils permettent de
structurer la grille. En utilisant la classe .container, on centre la grille sur une largeur
maximale fixe. Celle-ci est variable suivant la largeur de la page. Tandis qu'en
utilisant .container-fluid, on permet à la grille d'occuper 100 % de la largeur de la
page. La subtile différence entre les deux est essentielle.
En introduction, il était précisé que Bootstrap était responsive design. En effet,
Bootstrap adapte la mise en forme de la page en fonction de la taille de l'écran. Il
permet un affichage optimisé aussi bien sur un écran géant que sur un smartphone.
On parle généralement d'affichage desktop, qui correspond à l'affichage sur les
ordinateurs de bureau standard, et d'affichage mobile pour les tablettes et
smartphones. Il est très facile de simuler un affichage mobile depuis un ordinateur, en
redimensionnant tout simplement la fenêtre du navigateur web.
Comment se comportent les éléments quand la taille de la page évolue ? Il y a deux
cas de figures : soit les éléments se redimensionnent, soit ils s'empilent. Afin de ne
pas rendre les éléments illisibles, Bootstrap permet de les empiler quand la place
devient vraiment trop étroite.
Aperçu du comportement des éléments entre le desktop et le mobile
La classe .container possède une largeur maximale fixe suivant la largeur de la page
web. En effet, Bootstrap réagit suivant plusieurs formats. Bootstrap 4 réagit suivant 5
formats. Le tableau ci-après récapitule les points clés.
Extra small Small Medium Large Extra l
<576px ≥ 576px ≥ 768px ≥ 992px ≥ 120
Largeur maximale du containeur auto 540px 720px 960px 1140px
Préfixe des classes .col- .col-sm- .col- .col-lg- .col-xl
md-
Type d'écran Smartphon Smartphone & Tablette Écran Grand é
e tablette d'ordinateur de et télévi
bureau
Reprenons le fil de notre chapitre et revenons sur notre grille, Bootstrap 4 découpe
le corps de la page web en une multitude de lignes, on parle alors de row. Chaque
ligne est découpée en 12 colonnes de largeur égale. Le terme associé est col. Il n'est
pas obligatoire de toutes les utiliser individuellement, il est possible de les regrouper
pour en former des plus larges. Toutefois, attention à ne pas dépasser 12 colonnes.
Illustration de la grille Bootstrap 4
Sur l'image ci-dessus, les colonnes rouge représentent les goutières entre les
différentes colonnes. Nous reviendrons sur la notion de goutières plus tard dans le
cours.
Il est grand temps de récapituler en exemple toutes les notions que nous venons
d'aborder. Ci-après un exemple qui contient un .container-fluid avec un .row et
plusieurs .col.
col-8
col-4
<body>
<div class="container-fluid">
<div class="row">
<div id="main" class="col-8 border border-secondary">col-8</div>
<div id="sidebar" class="col-4 border border-secondary">col-4</div>
</div>
</div>
</body>
Dans l'exemple, nous avons donc une ligne avec deux zones, réparties en 2/3 et 1/3.
La partie principale, identifiée par #main, occupe donc 8 colonnes, tandis que la plus
petite partie, #sidebar, occupe 4 colonnes. Les classes .border et .border-
secondary permettent d'ajouter les bordures pour mettre en évidence les différentes
zones.
L'exemple précédent utilisait un .container-fluid. Comparons le même code source
mais un .container.
col-8
col-4
<body>
<div class="container">
<div class="row">
<div id="main" class="col-8 border border-secondary">col-8</div>
<div id="sidebar" class="col-4 border border-secondary">col-4</div>
</div>
</div>
</body>
Dans le premier exemple, le contenu occupait 100% de la place disponible tandis que
dans le second, le contenu semble centrer dans une largeur fixe. Bingo, nous venons
de mettre en évidence la largeur maximale du containeur en fonction de la largeur de
l'écran. En redimensionnant la fenêtre et en fonction des points d'accroches décrits
plus tôt dans le tableau, la largeur maximale évolue. Il y a plus au moins d'espace à
gauche et à droite de notre .container.
Les possibilités offertes par Boostrap 4 pour la gestion des .col sont nombreuses. Ci-
après un extrait de ce qu'il est possible de faire ainsi que la mise en évidence des
bordures de .row en bleu.
col-12
col-6
col-6
col-4
col-4
col-4
col-8
col-4
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
<body>
<div class="container-fluid">
<div class="row border border-primary">
<div class="col-12 border border-secondary">col-12</div>
<div class="col-6 border border-secondary">col-6</div>
<div class="col-6 border border-secondary">col-6</div>
<div class="col-4 border border-secondary">col-4</div>
<div class="col-4 border border-secondary">col-4</div>
<div class="col-4 border border-secondary">col-4</div>
<div class="col-8 border border-secondary">col-8</div>
<div class="col-4 border border-secondary">col-4</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
<div class="col-1 border border-secondary">col-1</div>
</div>
</div>
</body>
CHAPITRE 3 - LES TABLEAUX
Les tableaux sont des élements incontournables des pages web. Leur utilisation est
généralisée et c'est pourquoi Bootstrap les embarquent. Pour utiliser les styles mis à
disposition par le framework, c'est très simple. Il suffit d'ajouter la classe .table à
l'élément <table>. C'est le comportement par défaut qui est mis en évidence ci-
dessous mais Bootstrap fournit bien plus. Découvrons au fur et à mesure de ce
chapitre toutes les possibilités que nous offre Bootstrap 4.
COMPORTEMENT PAR DÉFAUT
Prénom Nom Pays
Gerard Schaefer États-Unis
Guy Georges France
Roberto Succo Italie
<table class="table">
<thead>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Pays</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gerard</td>
<td>Schaefer</td>
<td>États-Unis</td>
</tr>
<tr>
<td>Guy</td>
<td>Georges</td>
<td>France</td>
</tr>
<tr>
<td>Roberto</td>
<td>Succo</td>
<td>Italie</td>
</tr>
</tbody>
</table>
COULEUR ARRIÈRE-PLAN
En ajoutant la classe .table-striped sur l'élément <table>, une ligne sur deux
de <tbody> aura une couleur d'arrière plan.
Prénom Nom Pays
Gerard Schaefer États-Unis
Guy Georges France
Roberto Succo Italie
<table class="table table-striped">
<thead>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Pays</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gerard</td>
<td>Schaefer</td>
<td>États-Unis</td>
</tr>
<tr>
<td>Guy</td>
<td>Georges</td>
<td>France</td>
</tr>
<tr>
<td>Roberto</td>
<td>Succo</td>
<td>Italie</td>
</tr>
</tbody>
</table>
BORDURES
En ajoutant la classe .table-bordered sur l'élément <table>, les bordures de toutes
les cellules (<td>) du tableau seront mis en valeur.
Prénom Nom Pays
Gerard Schaefer États-Unis
Guy Georges France
Roberto Succo Italie
<table class="table table-bordered">
<thead>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Pays</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gerard</td>
<td>Schaefer</td>
<td>États-Unis</td>
</tr>
<tr>
<td>Guy</td>
<td>Georges</td>
<td>France</td>
</tr>
<tr>
<td>Roberto</td>
<td>Succo</td>
<td>Italie</td>
</tr>
</tbody>
</table>
SURVOL DES LIGNES
En ajoutant la classe .table-hover sur l'élément <table>, le survol d'une ligne du
tableau (<tr>) est mis en valeur par la modification de la couleur d'arrière plan.
Prénom Nom Pays
Gerard Schaefer États-Unis
Guy Georges France
Roberto Succo Italie
<table class="table table-hover">
<thead>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Pays</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gerard</td>
<td>Schaefer</td>
<td>États-Unis</td>
</tr>
<tr>
<td>Guy</td>
<td>Georges</td>
<td>France</td>
</tr>
<tr>
<td>Roberto</td>
<td>Succo</td>
<td>Italie</td>
</tr>
</tbody>
</table>
MISE EN VALEUR D'UNE LIGNE OU D'UNE CELLULE
Le framework Bootstrap est incroyable, une simple classe et hop pif paf pouf tout se
colore. En ajoutant l'une des classes ci-après sur la ligne ( <tr>) ou la celulle
(<td> ou <th>) de votre choix et l'élément se colorira. Pratique et efficace, mais que
demande de plus les développeurs ?
Classe Prénom Nom
.table-primary Gerard Schaefer
.table-secondary Guy Georges
.table-success Roberto Succo
.table-danger Ted Bundy
.table-warning Arthur Bishop
.table-info Joachim Kroll
<table class="table table-hover">
<thead>
<tr>
<th>Classe</th>
<th>Prénom</th>
<th>Nom</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td><code>.table-primary</code></td>
<td>Gerard</td>
<td>Schaefer</td>
</tr>
<tr class="table-secondary">
<td><code>.table-secondary</code></td>
<td>Guy</td>
<td>Georges</td>
</tr>
<tr class="table-success">
<td><code>.table-success</code></td>
<td>Roberto</td>
<td>Succo</td>
</tr>
<tr class="table-danger">
<td><code>.table-danger</code></td>
<td>Ted</td>
<td>Bundy</td>
</tr>
<tr class="table-warning">
<td><code>.table-warning</code></td>
<td>Arthur</td>
<td>Bishop</td>
</tr>
<tr class="table-info">
<td><code>.table-info</code></td>
<td>Joachim</td>
<td>Kroll</td>
</tr>
</tbody>
</table>
RESPONSIVE DESIGN
Rendre responsive design un tableau n'est pas chose aisé. Faut-il que les cellules
s'empilent ? Faut-il scroller horizontalement pour parcourir le contenu ? C'est la
deuxième solution que met en oeuvre Bootstrap. En ajoutant la classe .table-
responsive sur l'élément <table>, le tableau devient responsive. Sur les écrans
mobiles, il sera nécessaire de faire défilier horizontalement le contenu.
Prénom Nom Pays Date de naissance Victimes Surnom
Ted Bundy États-Unis 24/11/1946 Environ 30 Le Tueur de Femmes
Guy Georges France 15/10/1962 7 Le tueur de l'Est parisien
Ottis Toole États-Unis 15/09/1947 100+ Le cannibale de Jacksonville
<table class="table table-responsive">
<thead>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Pays</th>
<th>Date de naissance</th>
<th>Victimes</th>
<th>Surnom</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ted</td>
<td>Bundy</td>
<td>États-Unis</td>
<td>24/11/1946</td>
<td>Environ 30</td>
<td>Le Tueur de Femmes</td>
</tr>
<tr>
<td>Guy</td>
<td>Georges</td>
<td>France</td>
<td>15/10/1962</td>
<td>7</td>
<td>Le tueur de l'Est parisien</td>
</tr>
<tr>
<td>Ottis</td>
<td>Toole</td>
<td>États-Unis</td>
<td>15/09/1947</td>
<td>100+</td>
<td>Le cannibale de Jacksonville</td>
</tr>
</tbody>
</table>