Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

CSS : le framework Bootstrap

Présentation

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.

Le fichier "boostrap.css"

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.

Des pages 'responsives'

Description de la classe "container".

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@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 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.

Alignement horizontal du texte dans sa boite

Quelques classes disponibles :

...
.text-justify {
  text-align: justify !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
...

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 :

.text-lowercase {
  text-transform: lowercase !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-capitalize {
  text-transform: capitalize !important;
}

Si vous connnaissez la propriété CSS text-transform, la compréhension de ces classes ne devrait pas poser de problème.

Des boites avec des angles arrondis

Elles reposent sur la propriété border-radius :

.rounded {
  border-radius: 0.25rem !important;
}
.rounded-circle {
  border-radius: 50% !important;
}

Des classes pour remplir le fond de la boite (background)

.bg-primary {
  background-color: #007bff !important;
}
.bg-secondary {
  background-color: #6c757d !important;
}
.bg-success {
  background-color: #28a745 !important;
}
.bg-info {
  background-color: #17a2b8 !important;
}
.bg-warning {
  background-color: #ffc107 !important;
}
.bg-danger {
  background-color: #dc3545 !important;
}
.bg-light {
  background-color: #f8f9fa !important;
}
.bg-dark {
  background-color: #343a40 !important;
}
.bg-white {
  background-color: #fff !important;
}

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".

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.

Exemple

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 :

	p {text-align : left; }

Extrait du code de la partie BODY d'une page :

<p class ="text-center">Blablabla ... <br>Blabla suite ... <br>Blabla ... </p>

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".

Les bordures

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.

.border {
  border: 1px solid #dee2e6 !important;
}
.border-primary {
  border-color: #007bff !important;
}
.border-secondary {
  border-color: #6c757d !important;
}
.border-success {
  border-color: #28a745 !important;
}
.border-info {
  border-color: #17a2b8 !important;
}
.border-warning {
  border-color: #ffc107 !important;
}
.border-danger {
  border-color: #dc3545 !important;
}
.border-light {
  border-color: #f8f9fa !important;
}
.border-dark {
  border-color: #343a40 !important;
}
.border-white {
  border-color: #fff !important;
}

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).

Des classes pour définir les marges externes

Il existe de très nombreuses marges pour définir les "margin".
J'en cite quelques unes :

.m-1 {
  margin: 0.25rem !important;
}
.m-2 {
  margin: 0.5rem !important;
}
.m-3 {
  margin: 1rem !important;
}
.m-4 {
  margin: 1.5rem !important;
}
.mr-auto,.mx-auto {
  margin-right: auto !important;
}

.ml-auto,.mx-auto {
  margin-left: auto !important;
}

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 basées sur la propriété display

Des classes très utiles pour positionner les DIV et les éléments IMG.

.d-none {
  display: none !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-block {
  display: block !important;
}
.d-flex {
    display: flex !important;
}

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 = ...

Des classes dans le cadre de l'outil flexbox (boites flexibles)

Je vous rappelle que la version 4 de Boostrap utilise entre autres l'outil de positionnement FLEXBOX (les boites flexibles).

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;

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.

Découvrez vous même la feuille de style "boostrap.css"

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.

Le fichier boostrap-reboot.css

Cette deuxième feuille de style est beauoup plus légère que la précédente.

Un extrait de ce fichier

...
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", ...
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
figure {
  margin: 0 0 1rem;
}
img {
  vertical-align: middle;
  border-style: none;
}
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: #0056b3;
  text-decoration: underline;
}
...

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).

Première utilisation de Boostrap

Passons aux travaux pratiques : une page mise en forme grâce à Boostrap.

Le code de la partie BODY de la page

... <main class ="container border rounded"> <header> <h1 class ="bg-dark text-white text-center">Titre général de la page</h1> </header> <nav> <h2 class ="bg-info text-danger text-center w-50 mx-auto">Zone de navigation</h2> <a href ="#">Lien 1</a> <a href ="#">Lien 2</a> <a href ="#">Lien 3</a> <a href ="#">Lien 4</a> </nav> <section> <h2 class ="bg-info text-danger text-center w-50 mx-auto">Titre de la section</h2> <div class ="d-flex row" style ="justify-content : space-around;"> <p class ="text-center border w100-200" >Texte centré : <br>Il existe aussi les classes .text-left, .text-justifiy, .text-right <br>Blabla ... </p> <p class ="border w100-200"> <span class ="text-capitalize">Première lettre de chaque mot est en majuscule ! </span> <br><span class ="text-uppercase">Texte converti en majuscules !</span> <br><span class ="text-lowercase">TEXTE CONVERTI EN MINUSCULES ! </span> </p> <ul class ="border w100-200">Liste à puces : <li>item1 <li>item2 <li>item3 </ul> <ol class ="border w100-200">Liste ordonnée : <li>item1 <li>item2 <li>item3 </ol> </div> <!-- fin du conteneur flexible--> <div class ="d-block w-75 border mx-auto"> <h3 class ="text-danger text-center w-40 mx-auto">Le peinte Bernard Buffet</h3> <p>L'oeuvre de Buffet est impressionnante. <img src ="buffet.jpg" class ="float-left w-20"> <img src ="buffet2.jpg" class ="float-right w-20"> <br>Blabla .... <br>Blabla .... <br>Blabla .... <br>Blabla .... <br>Blabla .... <br>Blabla .... <br>Blabla .... <br>Blabla .... <br>Blabla .... </p> </div> </section> <footer> <h2 class ="bg-info text-danger text-center w-50 mx-auto shadow">Pied de page</h2> </footer> </main> ...

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".

Le code de la partie HEAD - première solution

<!doctype html> <html><head> <title>Onglet à fermer</title> <meta charset = 'utf-8'> <meta name ="robots" content ="noindex" /> <meta name="viewport" content= "width=device-width, user-scalable=yes" /> <link href ="bootstrap.css" rel = "stylesheet" > <link href ="bootstrap-reboot.css" rel = "stylesheet" > </head> <style> .w-20 {width: 20% !important;} .w-40 {width: 40% !important;} .w100-200 {min-width : 100px ; max-width : 200px; } </style></head>

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 HEAD - deuxième solution

Le code de la partie BODY est, quant à lui, rigoureusement identique !

<!doctype html> <html><head> <title>Onglet à fermer</title> <meta charset = 'utf-8'> <meta name="viewport" content= "width=device-width, user-scalable=yes" /> <meta name ="robots" content ="noindex" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384 ... "> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHf ... "> </script> <style> .w-20 {width: 20% !important;} .w-40 {width: 40% !important;} .w100-200 {min-width : 100px ; max-width : 200px; } </style> </head>

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.