Bootstrap est un framework front-end gratuit utilisé dans le développement Web. Il inclut des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les carrousels d’images…, ainsi que des plugins JavaScript.

Les avantages à utiliser Bootstrap :

Avoir quelques connaissances de base en HTML et CSS,
Fonctions responsives intégrées,
Mobile-First privilégié,
Compatible avec tous les navigateurs excepté IE8-9.

comment utiliser Bootstrap ?

De deux manières :

Inclure Bootstrap 4 à partir d’un CDN
Téléchargez Bootstrap 4 à partir de getbootstrap.com

Les CDN

CDN est l’acronyme de « Content delivery network » ; c’est un réseau de serveurs qui met à disposition des librairies. Il devient ainsi inutile de prévoir ces librairies sur son propre serveur.
Son utilisation implique de nombreux avantages :

Libération de ressources et de la bande passante sur son propre serveur ;
Parallélisation des téléchargements (un CDN est sur plusieurs serveurs) ;
Accélération du chargement ;
Diminution de la latence ;
Actualisation automatique des librairies ;
Amélioration du référencement…

trame de démarrage

Dans le template de base, vous trouvez dans les premières lignes :

Cette ligne concerne uniquement les mobiles. On demande que l’affichage occupe tout l’espace disponible avec une taille de 1, autrement dit sans zoom.

Vous devez également améliorer les <meta> pour le référencement.
Observez la dernière ligne qui vous permet d’intégrer un favicon dans l’onglet du navigateur 😉

Grid ? utiliser la bonne terminologie

A retenir pour structurer la mise en page.

comprendre la structure d’une grille

la grille de Bootstrap

La grille de Bootstrap n’est pas aussi stricte que celle présentée ci-dessus. La largeur des colonnes (.col) est bien contrainte mais la hauteur d’une rangée (.row) va dépendre de son contenu et prend la hauteur du contenu le plus gros.

organisation de la grille Bootstrap

Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l’on peut utiliser directement dans les balises HTML.

La première classe à connaître estrow, qui représente une rangée. Cette classe établit des marges négatives à droite et à gauche :

Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu’il y en a au maximum 12. On dispose de quatre « formats » types (xs = petit écran de smartphone / sm = grand écran de smartphone / md = tablette / lg = desktop) :

col-xs-1 oucol-sm-1 oucol-md-1 oucol-lg-1
col-xs-2 oucol-sm-2 oucol-md-2 oucol-lg-2
...
col-xs-12 oucol-sm-12 oucol-md-12 oucol-lg-12

Le nom des classes est intuitif :xs pour x-small, sm pour small, md pour medium etlg pour large.

La largeur des éléments de la grille est calculée en pourcentage selon la fenêtre de visualisation.
Plutôt que de réduire les éléments au risque de les rendre illisibles, le choix a été fait de les empiler petit à petit quand la fenêtre devient plus étroite.

Testez le code suivant pour comprendre les différents affichages des éléments selon la largeur de l’écran :

les conteneurs

La grille de Bootstrap doit être placée dans un conteneur. Bootstrap propose les classes container et container-fluid.

La classe container contient et centre la grille sur une largeur fixe, qui s’adapte en fonction de la largeur de l’écran.

Le centrage du conteneur est fait de façon classique avec de petites marges internes de 15 pixels et les marges droite et gauche automatiques :

Ce sont les mêmes règles pour la classe container-fluid.

Pour la classe container, on spécifie pour la limite de largeur par média :

sauter des colonnes

Vous pouvez décaler les éléments dans la grille en utilisant la classe .offset-, elle permet de déplacer les objets vers la droite en augmentant la marge de gauche d’une colonne par *colonnes. Par exemple, .offset-md-4 déplace .col-md-4 sur quatre colonnes :

aligner verticalement

On fait référence aux classes d’alignement de flexbox pour aligner les colonnes verticalement et horizontalement.

source : documentation bootstrap 4

Ici, le code utilisé dans notre exercice :

intégrer des images

Les images dans Bootstrap sont réactives avec .img-fluid . max-width: 100%; et height: auto; sont appliqués à l’image pour qu’elle soit redimensionnée avec l’élément parent.