Nous allons également discuter de la prise en charge du responsive avec Bootstrap ainsi que de l’ordre d’affichage des différents composants.
Le système d’utilisation des classes
La partie CSS pure de Bootstrap dispose de deux fichiers principaux : un fichier utilisant exclusivement des sélecteurs éléments et un fichier n’utilisant que des sélecteurs de classes.
Le principe de fonctionnement de Bootstrap est à la fois simple et efficace : le fichier de sélecteurs éléments va permettre de définir des styles de base qui vont être automatiquement appliqués aux éléments afin de normaliser le comportement de ceux-ci quel que soit le navigateur utilisé par nos visiteurs tandis que le fichier de classes va permettre de grouper des ensembles dans de styles dans des sélecteurs de classes.
Dans tous les cas, nous ne toucherons à aucun de ces deux fichiers directement. Nous allons simplement nous contenter d’ajouter des attributs class relatifs aux sélecteurs de classe définis dans le fichier Bootstrap CSS afin de leur appliquer les styles CSS liés.
Si vous êtes un développeur relativement débutant, cette approche peut vous dérouter car vous avez peut-être l’habitude de travailler dans l’autre sens, c’est-à-dire d’ajouter des attributs class à vos éléments HTML d’abord puis de définir les styles CSS liés à ces attributs ensuite.
Cependant, sachez qu’il est beaucoup plus courant, logique et intéressant de plutôt commencer par définir différentes des styles en CSS et de les grouper dans des sélecteurs de classes puis d’ajouter ensuite les attributs class correspondant à nos éléments HTML pour leur appliquer les styles liés. Cela permet généralement d’avoir un code CSS beaucoup plus propre et professionnel avec des ensembles de sélecteurs de classes qui font du sens.
Le fichier de classes CSS Bootstrap définit par exemple un sélecteur de classe .container et lui attribue les styles suivants :
On n’aura donc plus qu’à attribuer un attribut class="container" à un élément HTML de notre fichier pour que tous les styles définis ci-dessus lui soient automatiquement appliqués.
L’un des objectifs principaux de ce cours est de vous présenter la plupart des classes du fichier de classes Bootstrap et de vous apprendre à les utiliser de la meilleure façon.
La définition des styles de base avec Reboot
Le deuxième fichier CSS essentiel de Bootstrap est un fichier qui ne contient que des sélecteurs éléments et qui sert à définir les styles par défaut de chaque élément HTML afin que chaque utilisateur expérimente les mêmes comportements quel que soit le navigateur utilisé.
Ce fichier se nomme « Reboot » et réutilise lui-même de nombreux styles définis dans la feuille de styles normalize.css, feuille de style extrêmement connue issue d’un autre auteur et dont le but est de fournir un ensemble de « reset » CSS (redéfinition des styles) pour les éléments.
Nous présenterons les styles définis par ce fichier pour les éléments HTML usuels dans la suite de ce cours afin que vous puissiez vous faire une idée de l’allure des différents éléments avant application des classes.
La mise en place du mobile first et du responsive
Bootstrap 4 a été pensé avec l’idée « mobile first », ce qui signifie que les règles CSS sont créées pour les affichages mobiles. On utilise ensuite un système de « breakpoints » (points d’arrêt) qui reposent sur l’utilisation de règles @media pour définir les affichages sur les écrans plus grands.
En reprenant l’exemple de notre classe .container ci-dessus, on peut voir que Bootstrap définit déjà des styles généraux liés à ce sélecteur puis utilise ensuite différentes règles @media pour modifier les styles de la classe en fonction d’un critère de taille d’écrans.
Comme vous pouvez le voir, ces règles @media utilisent min-width, ce qui signifient qu’elles seront appliquées à partir d’une taille minimale d’écran ou autrement dit pour des écrans plus grands qu’une certaine taille.
Les propriétés CSS en dehors des règles @media vont donc s’appliquer pour tous les écrans par défaut puis ensuite des règles spécifiques vont être appliquées selon que l’écran fasse plus de 576px ou plus de 768px, etc.
L’idée à retenir ici est que les propriétés définies en dehors des règles média sont définies par Bootstrap de façon à ce que l’affichage sur mobile soit optimal. J’en profite également pour vous rappeler ici qu’en cas de conflit sur une propriété CSS, la règle la plus précise sera la règle appliquée.
Dans l’exemple ci-dessus, les styles s’appliquent automatiquement aux éléments disposant d’un attribut class="container" en fonction des tailles d’écrans de nos visiteurs sans qu’on ait aucun contrôle dessus.
Pour nous permettre de définir les comportements de nos éléments en fonction des tailles d’écran et créer ainsi des design responsive personnalisés, Bootstrap met bien évidemment à notre disposition de nombreuses classes qui vont nous permettre de définir un certain comportement pour des éléments pour une taille d’écran définie.
Ces classes vont être reconnaissables grâce à l’emploi des lettres sm, md, lg et xl dans le nom de la classe. Chaque nom correspond à un breakpoint différent et les règles médias associées vont être les suivantes :
A noter qu’il existe également un cinquième breakpoint représenté par les lettres xs qui correspond à l’affichage sur mobile (tailles d’écrans inférieures à 576px). Ce breakpoint est très peu utilisé car Bootstrap 4 a été développé avec l’idée du mobile first, ce qui signifie que xs est la taille par défaut et correspond donc aux classes « de base » (sans marquage « sm », « md », etc. supplémentaire).
Il est toutefois bon de savoir qu’il existe car dans certains rares cas ce ne sera pas l’affichage sur mobile qui sera privilégié par défaut et on pourra donc utiliser certaines classes avec un xs pour définir un comportement spécifique pour les petits écrans dans ces cas-là.
L’ordre général d’affichage des composants et des éléments
Bootstrap fournit différents composants, c’est-à-dire différents ensembles de code déjà prêt à l’emploi et qui nous permettent d’afficher des fenêtres modales, des barres de navigation, etc. sans avoir à écrire une ligne de code.
Bootstrap utilise la propriété z-index pour définir quel composant doit apparaitre au-dessus de quel autre dans le cas où on en insèrerait plusieurs dans une même page. Les valeurs du z-index des composants sont les suivants :
De plus, une valeur de z-index est également définie en fonction des états des éléments en cas de chevauchement de ceux-ci :
- 1 par défaut
- 2 pour hover
- 3 pour active
