Introduction à Bootstrap¶

Bootstrap est une librairie front-end (dédié à l'interaction avec l'utilisateur) qui permet de faciliter la création d'interfaces réactives avec l'approche mobile first.

Inclure Bootstrap¶

Pour qu'un projet web puisse utiliser Bootstrap, on doit le lier à nos pages web.

Il existe deux façons de travailler avec Bootstrap :

Télécharger le code et l'héberger nous-mêmes sur notre serveur web

personnalisable en totalité
Utiliser la librairie compilée, disponible en ligne

dernière version la plus à jour garantie

Dans le cours d'Interfaces, nous allons utiliser la version en ligne pour s'assurer de travailler avec la version la plus à jour.

Bootstrap CDN (Content Delivery Network) est une version pré-compilée accessible de partout, hébergée sur des serveurs ultra-rapides.

On doit ajouter deux lignes dans notre code HTML :

Lien CSS dans le head
Lien Script au bas du body

Squelette HTML avec Bootstrap :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Mon nom ici">
    <title>Base Bootstrap</title>

    <!--FEUILLE DE STYLES BOOTSTRAP-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  </head>

  <body>

    <!--SCRIPT BOOTSTRAP-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

  </body>
</html>

Source : documentation Bootstrap https://getbootstrap.com/docs/5.3/getting-started/introduction/

Notions importantes¶

Plusieurs feuilles de styles¶

Il arrive que Bootstrap ne réponde pas entièrement à nos besoins de mise en page.

On ajoute alors nos propres feuilles de styles en plus de celle de Bootstrap.

Exemple :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Mon nom ici">
    <title>Base Bootstrap</title>

    <!--FEUILLE DE STYLES BOOTSTRAP-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <!--FEUILLES DE STYLES PERSONNALISÉES-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/gallerie.css">
  </head>

  <body>
   ...
  </body>
</html>

Les feuilles de style CSS ont donc la capacité d'être utilisées en cascade, d'où leur nom Cascading Style Sheet (CSS).

Quel est l'ordre d'importance ?

La dernères feuille appelée est la plus importante, en remontant la liste vers le haut de la page HTML.

Finalement, si deux déclarations de style ont le même poids, alors le dernier appelé sera toujours celui appliqué.

De par ces informations sur l'ordre d'importance, il est donc recommandé d'appeler d'abord Bootstrap, suivi de nos feuilles de style personnelles, dans l'en-tête de nos pages HTML.

En dernier recours

En dernier recours, quand une déclaration de style doit à tout prix avoir le dessus sur tout le reste, il est possible d'utiliser le terme !important à côté d'une ligne CSS.

color:blue !important;

Selon les standards du web par contre, on ne devrait utiliser cette possibilité qu'en dernier recours, lorsqu'absolument nécessaire.

Plusieurs scripts¶

De même qu'on peut faire appel à plusieurs scripts dans une même page HTML.

Exemple :

<!doctype html>
<html lang="fr">
  <head>
    ...
  </head>

  <body>

   ...

    <!--SCRIPTS LOCAUX-->
    <script src="script/traitementFacture.js"></script>
    <script src="traitementPanier.js"></script>
    <!--SCRIPT FONTAWESOME-->
    <script src="https://kit.fontawesome.com/d6973d5988.js" crossorigin="anonymous"></script>
    <!--SCRIPT BOOTSTRAP-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

La spécificité¶

Petit rappel

Au niveau de la spécificité des sélecteurs, on retrouve, en ordre d'importance :

1. identifiants
2. classes et pseudo-classes
3. sélecteur d'élément

Des classes, des classes, des classes!**¶

Bootstrap est programmé afin de rendre disponible une longue liste de classes.

Dans le HTML, on utilise l'attribut class="valeur".

Une balise HTML ne peut avoir qu'un seul attribut class.

On sépare donc chaque classe appelée par un espace.

Exemple:

<nav class="navbar navbar-expand-sm bg-light">

**Ne pas oublier : Dernière classe appelée, plus importante! **

On appelle donc nos classes personnalisées en tout dernier.

Limites de largeur¶

Nous avons vu, en discutant de pages réactives, qu'on doit se doter de limites de largeur d'écran (breakpoints) afin d'appliquer des styles différents selon la taille d'écran détectée.

Bootstrap étant 100% réactif et mobile first, il utilise évidemment les media queries comme nous l'avons vu à la semaine 7.

Voici les limites de largeur détecétes par les requêtes média et appliquées dans Bootstrap :

écrans extra-petits (par défaut, à moins de 576 pixels)
petits écrans (sm, au moins 576 pixels)
écrans moyens (md, au moins 768 pixels)
grands écrans (lg, au moins 992 pixels)
écrans extra-grands (xl, plus de 1200 pixels)
écrans extra-extra-grands (xxl, plus de 1400 pixels) depuis version 5

Source : documentation Bootstrap

Note: Puisque Bootstrap est basé sur un système de grille de 12 colonnes de large, les limites de largeurs sont des multiples de 12.

Classes et limites

Plusieurs classes Bootstrap utilisent ces limites pour la réactivité.

Par exemple:

Une barre de menu est naturellement verticale (en colonne pour le mobile-first). En ajoutant la classe navbar-expand-xx (où xx peut prendre les valeurs sm, md, lg, xl, xxl), on indique la limite de largeur sur laquelle la barre de menu doit s'afficher horizontalement (sur une ligne).

Contenant et contenu¶

L'utilité principale de Bootstrap se trouve dans les classes permettant de faciliter la réactivité et le mobile first.

La réactivité d'éléments HTML s'atteint non seulement avec des requêtes média (media queries), mais énormément avec des flexbox et des grid.

On se rappelle qu'autant pour les grilles que les flexbox, on doit :

Déclarer un bloc parent comme contenant principal
Insérer des blocs enfants pour le contenu

Ainsi, plusieurs des classes de Bootstrap utilisent la notion contenant / contenu pour générer les éléments visuels. Le contenant étant l'élément de base et est nécessaire pour utiliser le système en forme de grille ou de flexbox de Bootstrap.

Nous utiliserons d'ailleurs régulièrement les classes : container, container-xx (où xx fait référence à une taille d'écran) et container-fluid.

Le tableau suivant, tiré de la documentation de Bootstrap, indique la taille de chaque type de contenant (container) par limite de largeur d'écran. Lorsque le container atteint sa taille maximale, les marges gauches et droites sont automatiquement à auto pour centrer le bloc.

Containers

Exemple :

<header class="container-md text-center bg-dark text-light py-5">
  <p>
    Voici un "container" de largeur 100% jusqu'au écrans
    médium. Sur écran médium, le containeur a une largeur de 720 / 768 et des marges auto. Le texte est centré, couleur de fond foncé, texte pâle, padding en Y de niveau 5 (=3rem).
  </p>
</header>

Containers

Rubrique Bootstrap sur les containers

Reboot¶

Afin de fournir une base constante, simple et élégante, sur laquelle bâtir nos pages HTML, Bootstrap défini un premier fichier de styles de base nommé Reboot. Ce fichier défini quelques paramètres de base.

Redéfini les valeurs par défaut des navigateurs pour fonctionner avec l'unité rem plutôt que l'unité em pour les espacements
Retire toutes les valeurs par défaut de la propriété margin-top des éléments HTML
Utilise l'unité rem pour les marges, afin d'assurer une meilleure réactivité
Limite la déclaration des éléments de police (police, taille, etc.)
Tous les éléments utilisent la propriété box-sizing:border-box pour assurer une uniformité de la taille des éléments sur différentes tailles d'écran
Applique la taille de police par défaut des navigateurs (16 pixels) et assure la réactivité en appliquant font-size:1rem sur la balise body
Défini une police, hauteur de ligne et alignement de texte généraux applicable à tous les éléments de la page
Applique un souligné sur les liens cliquables seulement sous l'état :hover

Titres, paragraphes et transformation de texte¶

Titres

En plus des balises <h1> à <h6> qui sont redéfinies, Bootstrap fourni aussi des classes .h1 à .h6.

Ces classes produisent les mêmes styles que sur les titres.

Lien vers les exemples pour les titres

Les classes display permettent aussi de créer des textes de tailles beaucoup plus importantes.

Lien vers les exemples pour les titres display

Paragraphes

Afin de rendre un paragraphe un peu plus visible sur une page et le mettre en évidence, on peut utiliser la classe lead :

lead

Textes

Des classes d'alignement de contenu sont aussi fournies et vont remplacer les text-align.

De même qu'il existe des classes pour :

la taille de police (css font-size)
le gras (css font-weight)
l'italique (css font-style)
les soulignés (css text-decoration)

etc...

Rubrique sur les classes de transformation de texte

Images¶

Grâce à la classe img-fluid, Bootstrap défini une image réactive en suivant 100% de la taille du parent.

<img src="..." class="img-fluid" alt="Responsive image">

Classes pour images

Bordures¶

Plusieurs classes existent pour la gestion de bordure d'éléments HTML tels que les images.

On début par identifier si on veut une bordure tout le tour ou uniquement sur des côtés spécifiques :

<span class="border"></span> <!--Tout le tour-->
<span class="border-top"></span>
<span class="border-end"></span> <!--À droite-->
<span class="border-bottom"></span>
<span class="border-start"></span> <!--À gauche-->

Ensuite, on ajoute une couleur :

<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<!--Plusieurs autres couleurs disponibles dans la rubrique d'aide-->

On peut aussi indiquer une épaisseur de 1 à 5 (qui représente des pixels) :

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-primary border-4"></span> <!--Avec une couleur-->
<span class="border border-primary border-5"></span>

Et ajouter des coins arrondis :

<!--Les coins arrondis peuvent être utilisés sans bordure, notamment sur les images-->
<img src="..." class="rounded" alt="..."> 
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

Rubrique d'aide sur les bordures

Couleurs¶

Bootstrap offre une variété de couleurs pour attribuer des significations plus ou moins d'importance sur des éléments de la page.

Pour appliquer une des couleurs sur du texte, on débute la classe avec text- suivi de la couleur :

<div class="text-primary">This is default primary text</div>
<div class="text-secondary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-success text-opacity-50">This is 50% opacity primary text</div>

Pour appliquer une des couleurs en couleur de fond sur un élément, on débute la classe avec bg- suivi de la couleur :

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary bg-opacity-50 text-white">.bg-secondary</div>
<div class="bg-success bg-gradient text-white">.bg-success</div>

Rubrique d'aide sur les couleurs de texte

Rubrique d'aide sur les couleurs de fond

Boutons¶

Bootstrap donne accès à un éventail de boutons pré-stylisés pour faciliter l'ajout de tels éléments dans la page.

Les classes associées aux boutons ont été créées pour la balise <button>.

Toutefois, elles peuvent aussi être appliquées aux balise <a> et <input>.

Balise et sémantique

Lorsqu'on utilise les classes de boutons sur la balise <a> pour obtenir un effet autre que créer un lien cliquable, il faut alors ajouter l'attribut de rôle role=button à la balise pour que le code soit sémantiquement correct.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="button">Button</button>

Exemple:

Buttons

Finalement, on peut aussi jumeler un style de base à un style de contour :

Buttons

<a href="#" class="btn btn-secondary btn-outline-danger">Secondary</a>
<a href="#" class="btn btn-dark btn-outline-warning">Dark</a>

Documentation Bootstrap sur les boutons