Ce cours s'inspire et se base - très fortement - du livre Bootstrap 4 pour l'intégrateur web (2e édition) de Christophe AUBRY.
Introduction
Bootstrap est un environnement de conception de site web, un framework en anglais. Il facilite l’utilisation des règles CSS pour concevoir des sites web modernes, attractifs et adaptatifs (Responsive Web Design).
Vous devez créer des sites avec une architecture solide, qui soient élégants, ergonomiques et qui puissent être parfaitement affichés dans tous les types de support actuel, c’est-à-dire sur un écran d’ordinateur, sur une tablette ou un smartphone (Responsive Web Design).
Cela nécessite une très bonne connaissance des langages fondateurs du Web (HTML, CSS et JavaScript). C’est parfois long et difficile.
Pour nous aider dans cette tâche, nous pouvons utiliser des frameworks (ou des cadriciels selon la terminologie française).
Il existe de très nombreux frameworks, mais le plus utilisé est sans conteste Bootstrap de Twitter. Au départ il a été créé en interne, pour unifier les interfaces des applications de Twitter. Puis un des deux architectes, Mark Otto en a créé un projet ouvert à tous en le mettant à disposition sur GitHub.
Site officiel : https://getbootstrap.com
Les fonctionnalités de Bootstrap
Bootstrap est un Framework CSS très populaire qui propose de très solides fonctionnalités pour développer nos sites web, avec une approche résolument « Responsive Web Design » et qui donne la priorité aux appareils mobiles. Bootstrap utilise aussi les dernières fonctionnalités de mise en page, avec l’utilisation des modules CSS3 Flexbox et Grid, proposés par le W3C.
Il sʼagit dʼun kit dʼoutils open source disposant dʼun système de grille responsive, de composants préfabriqués et de puissants plugins JavaScript. Cela représente une grande collection de morceaux de code HTML, CSS et JavaScript réutilisables. Toutefois, si Bootstrap est un framework très populaire, il est loin dʼêtre le seul. II existe aujourdʼhui beaucoup dʼautres Framework CSS, chacun ayant leurs particularités.
Voici les fonctionnalités que nous propose Bootstrap :
Une grille de mise en page pour agencer les différentes boîtes d’affichage des sites. Cette grille est immédiatement « Responsive Web Design », cela veut dire que l’affichage va s’adapter aux écrans de diffusion : ordinateurs, tablette et smartphone.
-
Des styles CSS pour mettre en forme le texte, les tableaux et les formulaires…
-
Des styles CSS permettant d’afficher des boutons attrayants et des images design.
-
Des composants d’interface pour dynamiser vos sites web : barre de menus, groupe de bouton, fil d’Ariane, pagination, vignette d’image, liste…
-
De nombreuses règles CSS qui viennent vous aider pour améliorer le design de vos pages web de manière élégante : des jeux de couleurs, des bordures, des flottements et des positions pour les blocs d’information, des marges supplémentaires…
- Première solution
Il y a plusieurs solutions pour faire fonctionner Bootstrap.
La plus facile n’est pas vraiment une installation puisqu’elle consiste à aller chercher sur le web ( grâce au CDN links -> https://getbootstrap.com/docs/5.2/getting-started/introduction/#cdn-links ) les ressources nécessaires.
Un CDN (Content Delivery Network) est un réseau de serveurs géographiquement distribués accélérant la diffusion de contenu web. Lorsquʼon est en phase de développement dʼun projet, il est tout à fait adapté dʼutiliser les CDN fournis par Bootstrap. En revanche, lorsque le site passe en production, nous avons plutôt intérêt à inclure les fichiers CSS et JS directement dans le dossier du projet. En effet, si le CDN tombe en panne, notre site ne sʼaffichera pas correctement.
Il faut évidemment une connexion internet.
Pour en savoir plus sur Popper
Avec CDN on aura donc une page de base qui ressemble à ceci :
- Deuxième solution
Télécharger les fichiers (sources ou pas) et les installer dans l’arborescence de votre site.
Pour cela télécharger sur le site les fichiers et copier les à l’intérieur de votre projet web.
Par la suite par exemple vous pourrez activer Bootstrap avec une ligne comme :
<link href= »../dist/css/bootstrap.min.css » rel= »stylesheet »>
EXERCICES
Exercice 1 : Mise pratique à travers un exemple :
Le contenu de la page HTML pourrait être ceci (la partie body) :
L’image :
A vous d’installer Bootstrap et télécharger l’image ci-dessus afin d’obtenir ceci:
Vous pouvez remarquer qu’avec Bootstrap vous obtenez vite une page présentable.
Mise en page avec Bootstrap
Le modèle de mise en page de Bootstrap est « mobile first ». Cela veut dire que les mises en page sont faites d’abord pour les appareils mobiles. Le viewport va permettre de définir les paramètres d’affichage des pages du site pour les smartphones.
Dans le <head> de chaque page HTML, vous devez avoir cette ligne :
<meta name= »viewport » content= »width=device-width, initial-scale=1″>
width=device-width: indique que la largeur est celui du device ( Smarphone, Tablette, écran de télévision, etc )initial-scale=1: indique que le zoom est de 1 donc pas de zoom !shrink-to-fit=no: c’est uniquement pour safari (les dernières versions) pour éviter qu’il réduise le contenu (pas important à ce stade)
La largeur des boîtes
Les mises en page de Bootstrap se font principalement avec des boîtes <div>. Chaque boîte <div> pourra recevoir une dimension. Vous le savez, les dimensions des boîtes peuvent utiliser deux systèmes de mesure indiqués dans la propriété CSS3 box-sizing. Bootstrap utilise la valeur border-box. Avec Bootstrap, nous avons donc box-sizing: border-box.
Cela veut dire que la largeur des boîtes inclut la largeur des bordures, border-width, la largeur du remplissage interne, padding, et la largeur du contenu, width. Voici un schéma explicatif :
Les conteneurs
Dès lors que vous souhaitez créer une mise en page avec Bootstrap, vous devez placer cette mise en page dans un conteneur. Les conteneurs sont les briques de base de Bootstrap. Les conteneurs sont des boîtes <div> qui utilisent deux classes Bootstrap.
Si vous souhaitez avoir une mise en page à largeur fixe, mais qui s’adaptera aux largeurs des médias, vous utiliserez la classe container. La largeur maximale (propriété CSS max-width) sera déterminée par la requête de média de Bootstrap.
Si vous désirez avoir une mise en page fluide, vous utiliserez la classe container-fluid. La largeur de la mise en page sera alors de 100% de la largeur de l’écran, quel que soit le support, ordinateur, tablette ou smartphone.
Restons sur un conteneur à taille fixe.
J’ai dit qu’il s’adaptait car il va tester la taille de votre écran et prendra 4 valeurs possibles.
C’est ce qu’on appelle les média query :
Pour chaque point de rupture, Bootstrap définit une largeur maximale du conteneur. Voici les largeurs maximales pour chaque point de rupture, telles qu’elles sont définies dans les règles de style CSS :
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
Vous n’avez rien à écrire c’est Bootstrap qui gère ça tout seul.
Vidéo explicative.
Maintenant que vous avez compris le système de taille fixe et de média query nous allons voir comment fonctionne la grille de Bootstrap
La grille de mise en page
La mise en page avec Bootstrap se fait avec des conteneurs. Chaque conteneur contient des lignes qui elles-mêmes contiennent des colonnes qui définissent des blocs de contenu. Dans chaque bloc vous pouvez placer ce que vous souhaitez : du texte, des images, des barres de navigation…
Ce modèle de mise en page est basé sur le module CSS3 Flexbox du W3C
Vous devez connaître quelques principes de conception des grilles avec Flexbox et Bootstrap :
-
La grille de Bootstrap est basée sur des conteneurs ayant la classe .container qui contiennent des lignes ayant la classe .row.
-
La grille de Bootstrap est basée sur 12 colonnes par ligne. Donc chaque colonne de la grille sera alignée sur ces 12 colonnes.
-
Chaque colonne a un remplissage interne horizontal (padding) de 15 pixels, ce qui donne une gouttière de 30 pixels entre chaque bloc. Mais vous pourrez supprimer cette gouttière, si vous le souhaitez.
-
Si vous ne spécifiez pas de largeur pour les colonnes, celles-ci auront une largeur égale.
-
La largeur des colonnes est exprimée en pourcentage.
-
Vous pourrez déterminer le nombre de colonnes par ligne pour chaque point de rupture des requêtes de média, avec des classes spécifiques.
EXERCICES :
Exercice 2:
Créer une autre page avec ce code ( a vous d’ajouter l’indentation et le head etc…)
Testez la…
Exemple 3 :
Créer une autre page avec ce code ( a vous d’ajouter l’indentation et le head etc…)
Testez la… et analysez ! A quoi sert col-6 ? col-3 ?
Exercice 4 :
Créer une autre page avec ce code ( a vous d’ajouter l’indentation et le head etc…)
Testez la… et analysez !
Exercice 5:
Avec vos connaissances vous allez créer cette page en utilisant bootstrap et sa grille de mise en page.
Voici deux aperçus avec grand écran et petit. La page doit être responsive et ressembler le plus possible à ce qui vous est présenté ci dessous.
Images :
Votre page doit donner ceci :
Deux exemples avec adaptation suivant la taille de l’écran.
Correction : https://github.com/SebInfo/exercice5Bootstrap
Exercice 6:
Free style : A partir de vos connaissance et de la documentation de Bootstrap ou tout ce que vous jugerez intéressant vous allez créer 3-4 pages en essayant d’exploiter au mieux Bootstrap.
Le thème est libre.
La mission m’épater !
Liens
Site officiel : https://getbootstrap.com
Ce contenu est réservé aux membres du site. Si vous êtes un utilisateur existant, veuillez vous connecter. Les nouveaux utilisateurs peuvent s'inscrire ci-dessous.