BOOTSTRAP
1
BOOTSTRAP
• INTRODUCTION
• PRINCIPES DE BASES BOOTSTRAP
• TYPOGRAPHIE ET COMPOSANTS DE BASE
• COMPOSANTS AVANCES
• PERSONNALISATION DE BOOTSTRAP
• AVANTAGES ET INCONVENIENTS DE BOOTSTRAP
• CAS PRATIQUES ET EXEMPLES
• PROJET D’EQUIPE
• LES NOUVEAUTES DE BOOTSTRAP 5
• CONCLUSION 2
INTRODUCTION
3
Qu’est ce que Bootstrap ?
Bootstrap est un framework front-end open-source qui facilite le développement de
sites web et d'applications web. Créé par Mark Otto et Jacob Thornton chez
Twitter, il a été publié pour la première fois en août 2011. Bootstrap fournit une
collection de fichiers CSS et JavaScript préconçus qui permettent aux
développeurs de créer rapidement des interfaces utilisateur attrayantes et réactives.
En d’autres termes, et pour le dire très simplement, Bootstrap est un ensemble de
fichiers CSS et JavaScript fonctionnant ensemble et qu’on va pouvoir utiliser pour
créer des design complexes de manière relativement simple.
4
Histoire et Evolution
Bootstrap voit le jour suite à l’initiative de deux ingénieurs de Twitter. En 2010,
Marc Otto, employé de Twitter, eut l’idée de créer un outil capable
d’harmoniser le travail de toute l’équipe de développement de son entreprise,
car ils s’heurtaient eux aussi aux mêmes problèmes.
Marc Otto fut rejoint par Jacob Thorton dans le développement du projet. Ce
dernier avait vu l’utilité du projet de son collègue et avait compris que l’outil
leur permettrait de minimiser les incohérences. Ensemble, ils ont travaillé à
fournir un cadre regroupant les éléments et fonctions nécessaires au
développement d’une interface.
5
Le projet, initialement nommé Twitter Blueprint, naquit après plusieurs mois de
travail acharné de Marc Otto et Jacob Thorton. Utilisé pendant un an au sein de
Twitter, l'outil démontra sa valeur en limitant les incohérences, augmentant la
productivité et résolvant de nombreux problèmes de web design de
l’é[Link] aider la communauté des développeurs web, Twitter décida de
placer la librairie sous licence open source. Ainsi, le 19 août 2011, Twitter
Blueprint fut mis à la disposition du public sous le nouveau nom :
[Link] connut rapidement le succès, devenant le projet le plus
populaire sur GitHub en 2012, grâce à ses fonctionnalités et à une grande
communauté de développeurs qui contribua à son évolution. Depuis, plusieurs
versions ont été publiées, adaptant Bootstrap aux évolutions de l'internet et
augmentant son nombre d'utilisateurs.
6
Mark Otto
Jacob Thornton
7
Evolution
• La première version de Bootstrap
La première version de Bootstrap a apporté des nouveautés significatives dans l'écosystème du développement web. Elle
offrait une structure de code solide, des composants prêts à l'emploi (boutons, tableaux, formulaires, pagination), et supportait les
navigateurs les plus utilisés de l'époque. Les éléments HTML pour la typographie étaient soignés pour une présentation attrayante.
• La deuxième version de Bootstrap
Sortie le 31 janvier 2012, cette version proposait deux systèmes de grille (fixe et fluide) plus simples que ceux des autres
bibliothèques. Des plugins jQuery personnalisés ont été ajoutés pour une interaction facile, et la documentation a été enrichie avec des
exemples clairs et une galerie de sites utilisant Bootstrap.
• La troisième version de Bootstrap
Publiée le 19 août 2013, cette version a été entièrement reconstruite pour adopter une approche mobile-first, essentielle avec
la montée en popularité des tablettes et smartphones. Le système de grille fluide est devenu la norme, et le style flat design a été adopté,
avec un thème optionnel pour les non-amoureux du flat design. Les glyphicons sont passés au format font, et de nouveaux composants
comme les panels et list groups ont été introduits. La documentation a été mise à jour avec plus d'exemples et de code source.
• La quatrième version de Bootstrap
Sortie le 19 janvier 2018 après plusieurs versions alpha et bêta, cette version a retiré les glyphicons et abandonné le
préprocesseur LESS au profit de SASS pour une compilation CSS plus rapide. Les composants Well, Thumbnail et Panel ont été
remplacés par le composant Card, plus flexible. Bootstrap 4 intègre le module Flexbox pour une disposition naturelle des éléments, et
renforce le système de grille. De nombreux composants, comme les Modals et la Navbar, ont implémenté Flexbox. Les formulaires ont
été modernisés avec de nouvelles classes.
8
LES PRINCIPES DE BASE DE
BOOTSTRAP
9
Responsive Design
Le responsive design est une approche de conception web qui vise à créer des
sites capables de s'adapter à différentes tailles et résolutions d'écran. L'objectif
est d'assurer une expérience utilisateur optimale sur tous les appareils, qu'il
s'agisse de téléphones, de tablettes ou d'ordinateurs de bureau.
L'importance du responsive design réside dans l'amélioration de l'accessibilité et
de l'usabilité du site web, en réduisant le besoin de zoom et de défilement
excessifs. Cela conduit à une meilleure satisfaction des utilisateurs et peut
également améliorer le référencement du site, car les moteurs de recherche
favorisent les sites mobiles.
10
Structure de la grille (Grid System)
La structure de la grille de Bootstrap repose sur des conteneurs, des lignes et des
colonnes. Les conteneurs (classes .container et .container-fluid) centralisent et
limitent la largeur du contenu. Les lignes (classe .row) contiennent des colonnes et
créent des rangées horizontales, tandis que les colonnes (classes .col-) utilisent un
système de 12 colonnes pour définir la largeur des éléments. Les classes de
colonne suivent la nomenclature .col-{taille}-{nombre} pour ajuster la largeur des
colonnes à différentes tailles d'écran, comme par exemple .col-md-6 pour une
colonne de 6 sur 12 sur des écrans moyens. Cette structure de grille et ces classes
CSS réutilisables permettent de construire des sites web réactifs et adaptables de
manière simple et efficace. 11
TYPOGRAPHIE ET
COMPOSANTS DE BASE
12
Typographie par défaut
Bootstrap offre une typographie par défaut soignée pour garantir une
lisibilité optimale et une présentation cohérente. Les titres,
paragraphes et listes sont stylisés pour s'harmoniser avec le reste du
design du site.
13
Les Titres
Les titres sont stylisés avec les classes de balisage de <h1> à <h6>, chacune
déclinant en taille décroissante. Par exemple, <h1> est le titre le plus grand et le
plus important, tandis que <h6> est le plus petit.
14
Paragraphes
Les paragraphes sont rendus avec une taille de police et un
interlignage optimisés pour la lisibilité. La balise <p> est utilisée
pour définir des paragraphes de texte.
15
Composants de base
• Boutons :
Les boutons sont créés avec la classe .btn et peuvent être stylisés avec des classes
supplémentaires comme .btn-primary, .btn-secondary, .btn-success, etc., pour indiquer
différentes actions ou états.
• Badges :
Les badges sont utilisés pour afficher des petites quantités d'information, comme des
notifications ou des étiquettes. Ils sont créés avec la classe .badge et peuvent être combinés avec
des classes contextuelles comme .badge-primary, .badge-secondary, etc.
• Alertes :
Les alertes sont des messages contextuels créés avec la classe .alert et peuvent être
stylisées avec des classes comme .alert-success, .alert-danger, .alert-warning, etc., pour indiquer
différents types de messages (succès, erreur, avertissement, etc.). 16
Autres Composants
Bootstrap inclut également d'autres composants de base tels que les
cartes (.card), les barres de navigation (.navbar), les modals
(.modal), les formulaires (.form-control), et bien plus encore.
Chacun de ces composants est pré-stylisé et peut être personnalisé
pour s'adapter aux besoins spécifiques du projet.
17
LES COMPOSANTS
AVANCES
18
Navigation
• Barres de navigation (navbar) : Les barres de navigation sont des composants
essentiels pour n'importe quelle interface web. Elles permettent une navigation rapide à
travers différentes sections d'un site ou d'une application. Bootstrap offre une approche
flexible pour construire des navbars qui sont responsives et modulaires, incluant le
support pour des dropdowns, des éléments formulaires, des liens et des boutons, le tout
avec un comportement adaptatif pour les différents tailles d'écran.
• Barres latérales (sidebars) : Les barres latérales sont utilisées pour offrir une
navigation verticale additionnelle, typiquement pour des dashboards ou des applications
avec de nombreuses sections. Bootstrap ne fournit pas de composant de sidebar par
défaut, mais il peut être facilement créé en utilisant la grille système pour définir
l'espace de contenu et les listes pour les éléments de navigation.
19
Formulaires
• Structure des formulaires : Bootstrap simplifie la création de formulaires
avec des classes pour gérer les inputs, les labels, et les groupes d'input. Les
formulaires peuvent être améliorés avec des aides textuelles, des checkboxes,
des radio buttons et plus. La structure claire offerte par Bootstrap aide à
maintenir l'uniformité et la lisibilité du formulaire, tout en étant facile à
personnaliser.
• Validation : La validation des formulaires est cruciale pour assurer que les
données reçues sont complètes et correctes. Bootstrap propose une validation
côté client avec des feedbacks visuels pour les états valide et invalide des
inputs. Ceci inclut des messages pour guider les utilisateurs en cas d'erreur de
saisie. 20
Autres Composants
• Carrousels : Les carrousels permettent de présenter des séries d'images, de textes, ou de
contenus dans un espace compact. Ils sont populaires sur les pages d'accueil pour mettre en
avant des produits ou des articles. Bootstrap fournit un carrousel responsive avec des options
pour contrôler le défilement des slides, des indicateurs de navigation, et des contrôles
précédent/suivant.
• Modales : Les fenêtres modales sont utilisées pour attirer l'attention sur des informations
critiques ou pour recueillir des inputs de l'utilisateur sans quitter la page courante. Bootstrap
facilite l'intégration des modales qui sont centrées automatiquement et supportent une variété
de contenus.
• Cartes : Les cartes sont des conteneurs flexibles et extensibles pour afficher du contenu dans
des blocs organisés. Elles peuvent contenir des images, du texte, des listes, des liens, et plus,
rendant les cartes idéales pour les feeds de contenu, des galeries de produits, ou des blocs
d'articles. 21
PERSONNALISATION DE
BOOTSTRAP
22
Utilisation des variables Saas
• Bootstrap est construit avec Sass, un préprocesseur CSS puissant qui permet une
personnalisation avancée. Les variables Sass de Bootstrap peuvent être modifiées pour
personnaliser des éléments tels que les couleurs, la typographie, les espacements, et les
points de rupture. En ajustant ces variables, les développeurs peuvent adapter
l'apparence de Bootstrap pour correspondre à l'identité visuelle d'une marque ou à des
préférences spécifiques sans altérer le code source.
• Personnalisation des couleurs et de la typographie : Bootstrap définit un ensemble
de variables pour les couleurs primaires, secondaires, d'alerte, de succès, etc., ainsi que
pour la typographie incluant les tailles de fontes, les hauteurs de ligne, et les poids de
police. Modifier ces variables permet aux développeurs de maintenir une cohérence
23
esthétique à travers leur projet tout en utilisant la robustesse du framework Bootstrap.
Thèmes Bootstrap
• Introduction et exemples : Bootstrap est également flexible en ce qui
concerne les thèmes. La communauté a développé de nombreux thèmes prêts
à l'emploi qui peuvent être intégrés pour transformer rapidement l'apparence
d'un site. Ces thèmes vont des ajustements de couleurs mineurs à des refontes
complètes de tous les composants du framework. Des exemples populaires
incluent des thèmes spécifiquement conçus pour des secteurs comme
l'éducation, la santé, ou le commerce électronique.
24
Intégration avec Framework
• Utilisation de Bootstrap avec Angular, React, etc. : Bootstrap peut être intégré dans des
projets utilisant d'autres frameworks JavaScript tels que Angular, React, ou [Link]. Pour
Angular, des bibliothèques comme ng-bootstrap fournissent des composants Bootstrap
natifs sans dépendance à jQuery. De même, pour React, reactstrap ou react-bootstrap sont
des options populaires qui re-encapsulent les composants Bootstrap en composants React,
permettant une intégration transparente et conforme aux principes de [Link]
adaptabilité de Bootstrap à d'autres frameworks et technologies permet aux développeurs
de bénéficier de la robustesse et de la facilité d'utilisation de Bootstrap tout en construisant
des applications dynamiques et interactives avec leurs frameworks JavaScript préférés.
25
AVANTAGES ET INCONVENIENTS
DE BOOTSTRAP
26
Avantages
• Gain de temps et facilité d'utilisation : Bootstrap fournit un large éventail de composants
préconçus qui accélèrent significativement le développement front-end. Grâce à son
système de grille flexible et à ses composants interactifs, les développeurs peuvent
rapidement créer des layouts réactifs et des interfaces utilisateurs attractives sans avoir à
écrire beaucoup de code CSS et JavaScript depuis zéro.
• Large communauté et documentation : Étant l'un des frameworks front-end les plus
populaires, Bootstrap bénéficie d'une large communauté d'utilisateurs et de
contributeurs. Cette communauté active offre un soutien précieux, de nombreux plugins,
et une documentation exhaustive, ce qui facilite l'apprentissage et l'utilisation du
framework, même pour les développeurs moins expérimentés.
• Compatibilité multi-navigateurs : Bootstrap est conçu pour fonctionner sans accroc sur la
plupart des navigateurs modernes. Cela comprend le support pour les dernières versions
27
de Google Chrome, Firefox, Internet Explorer, Safari, et Edge. Cette compatibilité assure
une expérience utilisateur cohérente, quel que soit le navigateur utilisé.
Inconvénients
• Poids du fichier CSS/JS : L'un des inconvénients de l'utilisation de Bootstrap est le poids
relativement élevé des fichiers CSS et JavaScript. Cela peut affecter les performances de
chargement des pages, particulièrement sur des réseaux plus lents ou pour des applications
très sensibles à la vitesse de chargement.
• Aspect uniforme sans personnalisation : Bien que Bootstrap permette une certaine
personnalisation, les sites construits avec le framework tendent à se ressembler beaucoup,
à moins que des efforts conséquents ne soient mis dans la personnalisation. Cela peut
conduire à un manque de singularité et d'identité visuelle pour les sites qui utilisent les
styles par défaut.
• Courbe d'apprentissage : Malgré sa facilité d'utilisation relative, Bootstrap possède une
courbe d'apprentissage, surtout pour ceux qui n'ont pas de connaissances préalables en
CSS et en design responsive. Comprendre comment utiliser efficacement le système de
grille, les composants, et les classes utilitaires peut nécessiter du temps et de la pratique.
28
CAS PRATIQUES ET
EXEMPLES
29
Exemples de sites utilisant bootstrap
Bootstrap est utilisé par une multitude de sites web, allant des petits projets personnels aux
grandes entreprises. Voici une analyse rapide de deux sites populaires utilisant Bootstrap :
• Newsweek : Le site de Newsweek utilise Bootstrap pour son interface, ce qui lui permet
de gérer une disposition réactive adaptée à différents types d'appareils. L'utilisation de la
grille Bootstrap aide à organiser les articles de manière claire et accessible, tout en
maintenant une performance optimale sur des appareils mobiles.
• Lyft : La plateforme de covoiturage Lyft utilise également Bootstrap pour son site officiel.
L'interface tire parti des composants Bootstrap pour créer une expérience utilisateur fluide
et attrayante, notamment à travers des formulaires, des boutons, et des composants de
navigation qui s'adaptent bien aux différentes résolutions d'é[Link] exemples montrent
comment Bootstrap peut être utilisé pour créer des sites robustes et esthétiquement
plaisants tout en garantissant une expérience utilisateur cohérente sur divers appareils.
30
Démonstration pratique
Pour démontrer comment créer et personnaliser une page web simple avec
Bootstrap, nous allons construire une petite page de présentation. Cette page
inclura une barre de navigation, un jumbotron pour attirer l'attention, et
quelques sections de contenu.
31
Création d’une page web simple
32
Resultats
33
Exemple de Personnalisation
Pour personnaliser davantage, vous pouvez ajouter votre propre CSS
34
Resultat
35
PROJET PRATIQUE
36
37
38
39
40
41
42
LES NOUVEAUTES DE
BOOTSTRAP 5
43
Bootstrap 5 apporte d'importantes améliorations par rapport à ses prédécesseurs, en se
concentrant sur une modernisation et une optimisation globale du framework. Voici les
points clés :
• Abandon de jQuery : Bootstrap 5 se débarrasse de jQuery au profit de JavaScript natif,
rendant le framework plus léger et moins dépendant.
• Introduction des variables CSS : Les variables CSS sont maintenant utilisées pour
faciliter la personnalisation des thèmes directement avec du CSS, sans nécessiter de
recompilation de Sass.
• Amélioration du système de grille : Le système de grille est renforcé avec plus d'options
de flexibilité, notamment avec les conteneurs fluides qui s'adaptent à toute la largeur de
l'écran.
• Augmentation de l'accessibilité : Bootstrap 5 inclut des améliorations significatives en
matière d'accessibilité, ajustant les composants pour une meilleure utilisation et
conformité.
• Mise à jour des composants : De nombreux composants ont été revus pour plus de
flexibilité et modernité, et certains composants moins utilisés ont été supprimés.
44
• API d'utilitaires : Une nouvelle API pour gérer dynamiquement les styles des
composants permet une personnalisation plus poussée.
CONCLUSION
45
• Bootstrap 5 représente une évolution significative dans le monde du
développement web. En abandonnant jQuery au profit de JavaScript pur, en
intégrant les variables CSS pour la personnalisation et en améliorant son
système de grille, Bootstrap reste à la pointe des frameworks front-end. Son
importance dans le développement web moderne réside dans sa capacité à
permettre la création rapide de sites réactifs et esthétiquement plaisants, tout
en offrant une grande facilité d'utilisation et une vaste communauté de
soutien.
• Le futur de Bootstrap semble prometteur, avec une adaptation aux
technologies web émergentes et une attention continue portée à la
performance et à l'accessibilité. En conclusion, Bootstrap reste un choix
essentiel pour les développeurs web cherchant à produire des résultats de
qualité tout en respectant des délais serrés, et il continuera probablement à
jouer un rôle central dans le développement web pour les années à venir.
46
MERCI POUR VOTRE ATTENTION
47