Introduction à Bootstrap¶

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

🌟 Points forts :

open-source
facilite la création d’interfaces web cohérentes à travers les différents nvigateurs
propose un ensemble de classes utilitaires, de composants prêts à l’emploi et un système de grille puissant, sans nécessiter de coder les fonctionnalités (en jQuery ou Javascript).

📚 Accéder à l’aide en ligne¶

Le site officiel de la documentation est : getbootstrap.com/docs/5.3

Méthode simple pour s’y retrouver :

Utiliser la barre latérale gauche pour naviguer par thème et composant (Layout, Components, Utilities…).
Utiliser la barre de recherche au haut de la page
Consultez les exemples de code interactifs sur les pages de chaque composant

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

✅ open-source et personnalisable en totalité
Utiliser la librairie compilée, disponible en ligne (Bootstrap CDN)

✅ dernière version la plus à jour garantie

Utiliser CDN pour le cours

Dans le cours d'Interfaces, nous allons utiliser la version en ligne (CDN) 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 juste avant la fermeture de la balise 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>Squelette avec Bootstrap</title>

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

  <body>

    <!--SCRIPT BOOTSTRAP-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 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ère feuille appelée est la plus importante

Si deux déclarations de style existent dans plus d'une feuille CSS, alors la dernière appelée sera toujours celle appliquée.

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.

Exemple :

color:blue !important;

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

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 de balise

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" dans une balise.

Une balise HTML ne peut avoir qu'un seul attribut class, mais peut avoir plusieurs classes de styles.

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 ou Breakpoints (points de rupture)¶

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.

On détecte les points de rupture à l'aide de requêtes média.

Bootstrap étant 100% réactif et mobile first, il utilise évidemment les requêtes média comme nous l'avons vu précédemment.

Bootstrap utilise 6 breakpoints :

Nom	Préfixe de classe	Largeur min.
Extra small	(aucun)	0px
Small	sm	576px
Medium	md	768px
Large	lg	992px
Extra large	xl	1200px
X-X Large	xxl	1400px depuis version 5

Source : documentation Bootstrap

Exemples¶

Pour cacher un bloc div par défaut (en mobile), puis l'afficher à partir d'écrans moyens :

<div class="d-none d-md-block">
  ...
</div>

Pour qu'une barre de menu soit verticale par défaut (en mobile) et horizontale à partir d'écrans larges :

<nav class="navbar navbar-expand-lg">
  ...
</nav>

Styles de base¶

Afin de fournir une base constante, simple et élégante, Bootstrap redéfini les styles de base des balises.

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é
Utilise une déclaration des éléments de police propres à chaque navigateur (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

🎯 Ainsi, peu importe le navigateur ou la plateforme utilisée, un site créé à l'aide de Bootstrap sera uniforme en tout temps.

Contenant et contenu¶

RAPPEL : 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 enfants pour le contenu

Ainsi, plusieurs des classes de Bootstrap utilisent la notion contenant / contenu pour générer les éléments visuels.

📦 Les containers¶

Les containers définissent la largeur maximale du contenu d'un bloc.

Lorsque l'espace le permet, le container prendra environs 75% de l'espace et sera automatiquement centré.

Par exemple :

container : largeur fixe selon les breakpoints.
container-fluid : toujours 100% de la largeur.
container-{breakpoint} : fluide jusqu’au breakpoint donné.

Containers

Exemple :

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

Containers

Rubrique Bootstrap sur les containers

🛑 Ce que Bootstrap NE FAIT PAS¶

Quelques éléments que Bootstrap NE FAIT PAS et nécessitera notre propre CSS :

Image de fond (sauf pour les cartes que nous verrons)
Effets de transition et de transformation
Effets sur le :hover
Polices personnalisées / Google Fonts
Couleurs personnalisées (Bootstrap offre une douzaine de couleurs de base)
Positionnements personnalisés (marges, padding, largeur, etc... Bootstrap offre des valeurs limitées)

💡 Astuce : Utilise Bootstrap pour la structure et les composants, et ta feuille CSS pour les styles créatifs et spécifiques à ton projet.