Traduction
Tutoriel CSS - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur, etc.) de sites
et d'applications web.
En d'autres termes, Boostrap est un framework CSS ; ce qui signifie que vous pouvez utiliser les fichiers d'extension .css proposés par cette
librairie pour mettre en forme les pages de votre site. La partie CSS pure de Bootstrap propose en effet deux feuilles de style :
une feuille utilisant exclusivement des sélecteurs éléments et une feuille n’utilisant que des sélecteurs de classes.
L'utilisation de Boostrap suppose une bonne connaissance de CSS.
La version 4 de Boostrap repose, concernant le positionnement, sur l'outil Flexbox.
Il s'agit du fichier qui contient les classes génériques.
C'est le fichier le plus important : plus de 8 000 lignes ...
Je vous présente ci-dessous différents extraits de cette feuille de style afin de vous familiariser avec toutes les classes proposées.
Description de la classe "container".
Vous reconnaissez l'emploi des media queries.
Donc si vous utilisez le framework CSS et plus précisément si vous appliquez la classe "container" vos pages seront "responsives".
L'écriture du code CSS ci-dessus repose sur la technique des "breakpoints" (points d'arrêt) présentés par ordre croissant.
Si l'écran a une largeur inférieure 576px le containeur (élément 'block' affecté de la classe "container") aura une largeur de 100% de l'écran.
Par contre si la largeur de l'écran est comprise entre 576px et 768px alors le containeur aura une largeur de 540px.
etc.
Quelques classes disponibles :
Il existe de nombreuses classes préfixées "text-" pour formater le texte. Ici, je présente les classes qui permettent d'aligner horizontalement le texte
dans sa boite.
Il existe aussi des classes pour une certaine casse :
Si vous connnaissez la propriété CSS text-transform, la compréhension de ces classes ne devrait pas poser de problème.
Il s'agit donc des classes pour attribuer une couleur de fond à une boite. Elles sont toutes préfixées "bg-".
Il existe aussi les classes pour affecter une couleur au texte donc basées sur la propriété "color" et qui sont préfixées "text-" et suivies
des mêmes codes couleurs (primary, secondary, success, etc.)
Ainsi les classes "bg-success" et "text-success" correspondent à la couleur verte (pour le fond ou le texte).
Notez que chaque propriété est affectée de la clause "!important".
Lorsque l'on créer une feuille de style "à la main" on utilise rarement cette clause. Or on la trouve très souvent dans les classes définies dans le fichier "boostrap.css".
Associer "!important" à une propriété CSS permet de donner la priorité à celle-ci, quelle que soit la position dans la feuille de style ou elle est déclarée.
Ci-dessous un exemple pour vous montrer à quoi sert cette clause.
Extrait de la feuille de style interne de la page contient entre autres la règle :
Extrait du code de la partie BODY d'une page :
D'après vous, le texte sera aligné à gauche ou centré dans son conteneur ???
Réponse : le texte sera centré horizontalement dans sa boite car "text-align : center" est prioritaire sur "text-align : left".
Ci-dessous quelques classes qui proposent des bordures complètes (des quatre côtés). Mais il existe aussi des classes pour des bordures hautes, gauche, etc.
Toutes les classes relatives aux bordures sont préfixées "border-".
On retrouve ensuite les mêmes termes que pour les classes "bg-*" et les classes "text-*" :
primary (bleu), secondary (gris-bleu), success (vert), info (nuance de bleu), warning (jaune), danger (rouge), light (gris clair), dark (gris foncé),
white (blanc).
Quelques classes pour obtenir des bordures arrondies.
Attention il faut utiliser l'une de ces classes avec une classe préfixée "border-".
Bootstrap 4 ne propose pas de classes pour changer l’épaisseur ou le style (solid, dotted, etc.) d’une bordure.
Il faut créer vos propres classes (reposant sur les propriétés border-width & border-style.
Il existe de très nombreuses marges pour définir les "margin".
J'en cite quelques unes :
Notez l'usage de l'unité de mesure rem que je définis plus loin.
Deux règles de style pour définir la classe "mx-auto" qui prévoit un centrage de l'élément dans son conteneur.
Des classes très utiles pour positionner les DIV et les éléments IMG.
Ainsi si par exemple, vous voulez transformer la balise IMG en élément block, il suffit d'écrire :
img class ="d-block"
Admettez que c'est plus concis d'écrire img class ="d-block" src = ... que img style ="display : block;" src = ...
Je vous rappelle que la version 4 de Boostrap repose, pour le positionnement, sur l'outil flexbox.
La direction n'est pas précisée. Mais vous savez que la valeur par défaut de "flex-direction" est "row".
Avec "flex-wrap : wrap" les sauts de ligne sont possibles.
Vous pouvez vous même explorer ce fichier.
En général tous les éditeurs de texte proposent un outil de recherche dans un document.
Sous Notepad je produis la commande "Recherche/Rechercher dans le document actuel" et je tape dans la zone de texte ".border", par exemple.
Cette deuxième feuille de style est beauoup plus légère que la précédente.
Les éléments structurants introduits par HTML5 sont définis "block".
Par contre l'élément IMG est par défaut "inline".
Notez l'emploi fréquent de l'unité de mesure "rem".
Un lien change d'aspect lors du survol (changement de couleur de texte et soulignement).
Passons aux travaux pratiques : une page mise en forme grâce à Boostrap.
Notez que pratiquement chaque élément HTML a l'attribut class avec plusieurs pour valeur plusieurs noms de classe.
Si vous avez bien lu la première partie de ce chapitre, vous ne devez pas être dépaysé. les classes utilisées ci-dessus y ont été présentées.
Prénons quelques exemples.
main class ="container border rounded" : La boite "main" sera responsive, bordurée avec des angles légèrement arrondis.
h1 class ="bg-dark text-white text-center" : 3 classes : une pour la couleur de fond, une deuxième pour la couleur de texte et une troisième
pour le centrage du texte dans sa boite.
h2 class ="bg-info text-danger text-center w-50 mx-auto" : 5 classes : une pour la couleur de fond, une pour la couleur de texte, une troisième
pour le centrage du texte, une quatrième pour la largeur relative de la boite et une dernière pour le centrage de la boite dans son parent.
div class ="d-flex row" style ="justify-content : space-around;" : je crée un conteneur de boites flexibles. J'applique au DIV les classes
"d-flex" et "row". Je n'ai pas trouvé de classe basés sur "justify-content : space-around;". J'ai donc du utiliser l'attribut STYLE pour encoder
du CSS de façon traditionnelle.
Il est à noter la souplesse de l'outil Boostrap; Si vous ne trouvez pas votre bonheur, écrivez le CSS de façon traditionnelle !
p class ="border w100-200" : Le conteneur de boites flexibles conprend quatre items, tous affectés de la classe "w100-200" ; classe que j'ai créé. Voir
plus loin.
div class ="d-block w-75 border mx-auto" : je crée un DIV de type "block" via la classe "d-block". Cette boite est centrée horizontalement
dans son conteneur via "mx-auto".
J'ai téléchargé la dernière version de Boostrap en allant sur le site "https://getbootstrap.com/docs/4.0/getting-started/download/".
J'ai récupéré un dossier nommé "bootstrap-4.0.0".
Dans le sous-dossier "dist" il y a un répertoire "css" qui contient les feuilles de style qui nous intéressent et en particulier :
Dans la partie HEAD de la page il suffit donc de créer deux liens ; un vers chacun de ces deux fichiers css (qui sont stockés dans le même répertoire que
la page web).
Cependant pour compléter les classes proposées par Bootstrap j'en ai rajouté trois.
En effet Bootstrap proprose les classes w-25, w-50, w-75, w-100 (respectivement 25%,50%,75%,100% de large de celle du parent). Mais ici
je veux une largeur de 20% ou 40% pour certains éléments.
Je veux aussi que les items du conteneur flexible aient des largeurs mini et maxi. Je crée donc la classe "w100-200".
Essayez !
Réduisez progressivement la largeur de la fenêtre, vous verrez que la page est responsive et que les items du conteneur flexible peuvent passer à la ligne, si nécessaire.
Si l'outil flexbox vous est étranger, visitez dans ce tuto le chapitre "CSS3 - révolution dans le positionnement avec gridlayout et flexbox ".
Le code de la partie BODY est, quant à lui, rigoureusement identique !
Si vous voulez être certain de disposer de la dernière version stable de Boostrap et à condition de disposer d'une connection Internet, vous pouvez
utiliser une autre technique : celle du CDN (Content Delivery Network ou réseau de distribution de contenu).
Dans la partie HEAD il faut donc insérer deux liens.
Le code de ces deux liens est complexe mais il vous suffit de récupérer le code sur le site officiel de Bootstrap :
https://getbootstrap.com/docs/4.0/getting-started/download/
Capture d'écran de cette page :
Essayez cette deuxième version
Vous obtenez le même rendu qu'avec la première solution.
Si vous n'êtes pas satisfait de la disposition des items du conteneur flexible, vous pouvez changer dans la page la valeur de la propriété justify-content associée au DIV flexible.