Bootstrap 5 : principes

Bootstrap est un framework CSS et JavaScript qui simplifie la création de designs web complexes grâce à des classes prédéfinies et des composants interactifs (barres de navigation, modals, etc.).

Bootstrap adopte le principe du design responsive, permettant aux sites web de s’adapter aux différentes résolutions et types d’appareils (smartphones, tablettes, ordinateurs). Son objectif est d’optimiser l’expérience utilisateur en ajustant la mise en page en fonction de la taille de l’écran.

Pour cela, il s’appuie sur des techniques comme les media queries, l’utilisation d’unités relatives (em, rem, %, vh, vw), ainsi qu’un système de grille flexible.

Une synthèse de l’utilisation de Flexbox est disponible sur https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Deux options :

Installez VSCode et Firefox sur votre machine.

Ajoutez à VScode les extensions :

De même, pourra être utile W3C Web Validator

Avec une page vide comme suit, liez les sources de Bootstap par CDN ou en téléchargeant les fichiers .css et .js en local.

Vérifiez dans les outils de développement de votre navigateur (onglet Réseau) que chaque source est chargée avec un code http 200 ou 300. Notez que lorsque l’on recharge une page avec la touche Shift⇧, on ne passe pas par le cache du navigateur.

Pour la suite des manipulations de découverte de Bootstrap enregistrez la page qui inclue Bootstarp localement sous le nom template.html. Vous pourrez ainsi copier ce fichier pour chaque nouvelle manipulation et tester les fonctionnalités indépendament les unes des autres.

Bootstrap utilise principalement deux fichiers CSS : un avec des sélecteurs d’éléments pour des styles de base, et un autre avec des sélecteurs de classes pour appliquer des styles prédéfinis.

Le fichier de classes CSS Bootstrap définit par exemple un sélecteur de classe .container et lui attribue les styles comme par exemple :

Nous utiliserons ces classes directement dans nos éléments HTML sans modifier les fichiers CSS.

Editez le fichier bootstrap.css et retrouvez les déclarations pour la classe .container. Observez les différentes valeurs de largeur d’écran prises en compte.

Le fichier Reboot définit les styles par défaut pour tous les éléments HTML afin d’assurer une expérience homogène, quel que soit le navigateur. Il repose sur normalize.css pour une remise à zéro des styles de base des différents navigateurs.

Bootstrap 5 suit la philosophie "mobile-first", avec des règles CSS adaptées d’abord aux écrans mobiles. Il utilise des breakpoints avec des règles @media pour ajuster les styles sur des écrans plus grands. Ces règles @media avec min-width s’appliquent aux écrans dépassant une certaine taille. Les classes .container et d’autres sont ajustées en fonction des tailles d’écran (sm, md, lg, xl). Le breakpoint xs est principalement pour les écrans mobiles, mais rarement utilisé directement.

Retrouvez dans bootstrap.css la définition en pixel des différents breakpoints.

Bootstrap utilise ausi la propriété CSS z-index pour gérer l’ordre d’affichage des composants (par exemple, fenêtres modales, barres de navigation) en cas de chevauchement de ceux-ci.

La classe .col permet de définir des colonnes personnalisées pour une ligne sans leur affecter de taille explicite.

Testez ce bloc de code dans un nouveau fichier html.

Observez la répartition des colonnes et modifiez la taille de l’écran.

Testez ce bloc de code dans un nouveau fichier html.

Observez la répartition des colonnes dans chaque ligne.

Pour définir précisément le nombre de colonnes de base que doivent occuper nos colonnes personnalisées, nous utiliserons les classes .col-1, .col-2, …​ .col-12. La classe .col-1 indique qu’on souhaite créer une colonne d’une taille équivalente à celle d’une colonne de base de la grille. .col-2 crée une colonne avec l’espace de deux colonnes de base etc.

Testez ce bloc de code dans un nouveau fichier html.

Si on essaie de créer des colonnes débordants des 12 colonnes de base, alors les colonnes débordantes seront positionnées en dessous des précédentes (à la ligne).

Testez ce bloc de code dans un nouveau fichier html.

On peut mélanger des éléments utilisant .col et .col-1, .col-2… .col-12 dans une même ligne. Les colonnes avec une taille spécifiée prendront d’abord l’espace disponible, puis l’espace restant sera réparti entre les colonnes définies avec la classe .col.

Testez ce bloc de code dans un nouveau fichier html.

Enfin, si le contenu d’une colonne dépasse l’espace qui lui est attribué, l’espace de la ligne sera réajusté pour permettre à la colonne de s’adapter, ce qui peut provoquer un passage à la ligne automatique des autres colonnes.

Testez ce bloc de code dans un nouveau fichier html.

Observez la répartition des colonnes avec le changement de taille d’écran.

Les grilles Bootstrap varient en fonction de la taille de la fenêtre, car elles dépendent de la taille du conteneur défini par les classes .container ou .container-fluid, qui sont flexibles. Ainsi, les colonnes peuvent occuper un nombre différent de colonnes de base selon la taille de l’écran.

Cela permet d’optimiser l’affichage pour différentes résolutions. Par exemple, on peut vouloir qu’un élément occupe 3 colonnes sur un grand écran et 6 colonnes sur un écran plus petit.

Pour ce faire, on utilise les classes .col-sm, .col-md, .col-lg, .col-xl et .col-xxl en plus de .col. Ces classes correspondent aux breakpoints prédéfinis par Bootstrap, qui appliquent les styles en fonction de la taille de la fenêtre. Par défaut, la classe .col s’applique à tous les écrans si aucune autre règle plus spécifique n’est définie.

Les classes liées aux tailles d’écran sont les suivantes :

Cela permet de définir des tailles de conteneur maximales qui varient en fonction du breakpoint. Par exemple, les colonnes peuvent être réparties différemment selon la taille de la fenêtre : une colonne peut occuper 6 colonnes de base sur des écrans moyens (plus de 768px) et prendre toute la largeur sur des écrans plus petits.

Notons que la classe .col est implicite dès lors qu’une autre classe .col-{breakpoint} a été définie.

Testez ce bloc de code dans un nouveau fichier html.

Observez la répartition des colonnes avec le changement de taille d’écran autour du breakpoint.

Les classes .col-{breakpoint} prendront priorité les unes après les autres dès qu’un certain seuil de taille d’écran est atteint. Par exemple, En utilisant uniquement la classe .col-sm-, cette classe déterminera le comportement des colonnes pour tous les écrans de plus de 576px. Par ailleurs, si l’on applique à la fois les classes .col-sm- et .col-lg- pour des colonnes, la classe .col-sm- déterminera la taille des colonnes pour les écrans supérieurs à 576px jusqu’au breakpoint de 992px, où la classe .col-lg- prendra le relais et ajustera les dimensions des colonnes.

Testez ce bloc de code dans un nouveau fichier html.

Observez la répartition des colonnes avec le changement de taille d’écran autour des deux breakpoints.

Enfin, si on souhaite que la largeur des colonnes s’ajuste automatiquement en fonction de leur contenu, vous pouvez utiliser les classes .col-{breakpoint}-auto.

Testez ce bloc de code dans un nouveau fichier html.

Changez les classes .col-md en .col-md-auto des différents éléments pour observer l’ajustement automatique.