Démarrer avec bootstrap

Mis à jour : 19/01/2023 danny

Bootstrap est un Framework CSS.

Il contient des codes HTML et CSS ainsi que des extensions Javascript.

Bootstrap est l'un des plus connus et des plus utilisés des Framework CSS.

Qu'allons nous faire ?

Frame signifie Cadre et Work signifie Travail.
Framework pourrait être traduit mot à mot par cadre de travail.
Pour simplifier nous pourrions dire que c'est un ensemble de règles à suivre pour effectuer une tâche particulère.

L' objectif de ce tutoriel n'est pas de devenir un expert de Bootstrap mais d'avoir une connaissance pratique de ce Framework.

Nous verrons rapidement quels sont les grands principes utilisés par Bootstrap.
Nous créerons des exemples simples qui nous serviront de base dans nos projets de site web.

Avant de commencer

Quelques références à connaitre

Août 2011: Twitter place Bootstrap sous licence open source.
v2.3.2 : 27 Juillet 2013
v3.3.7 : 25 juillet 2016
v4 Alpha 6 : 6 janvier 2017
v4.0.0 : 18 janvier 2018
v4.2.1 : 21 Décembre 2018
v4.3.1 : 13 Février 2019
v5.0.0 : 16 Juin 2020
v5.2.3 : 24 Novembre 2022

La liste des différentes versions est indiquée sur github
https://github.com/twbs/bootstrap/releases

Le site officiel de Bootstrap version 5.2.3 https://getbootstrap.com/

Principes

Bootstrap est basé sur un système de grille (grid).
Ce système utilise une série d'éléments qui permettent d'aligner le contenu de nos pages

containers
lignes(rows)
colonnes(columns)

L'exemple suivant offre quelques possibilités

  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 col-xl-3"> col </div>
      <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 col-xl-3"> col </div>
      <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 col-xl-3"> col </div>
      <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 col-xl-3"> col </div>
    </div>
  </div>

Les options offertes par le système de grille sont les suivantes

Taille		Pixels	Code
Extra small	xs	<576px	.col
small	sm	≥576px	.col-sm
medium	md	≥768px	.col-md
Large	lg	≥992px	.col-lg
Extra Large	xl	≥1200px	.col-xl

Première page

Nous allons créer notre premiere page avec Bootstrap.

Procédons étape par étape.

Créer une page de base
Télécharger le Framework
L' intégrer à notre page
Rajouter un composant Bootstrap

Etape 1

Créer une page de base que nous nommerons index.html

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>titre de notre page</title>
</head>

<body>
  Contenu de notre page
</body>

</html>

Etape 2

Télécharger les éléments utiles
Nous allons récupérer les fichiers compilés CSS et JS.

La dernière version est téléchargeable sur le site officiel https://getbootstrap.com/docs/5.2/getting-started/download/

Sauver le fichier bootstrap-5.2.3-dist.zip sur votre ordinateur.
En décompressant ce fichier nous obtenons un répertoire bootstrap-5.2.3-dist.
Créer un répertoire assets/bootstrap dans votre projet.
Copier les répertoires CSS et JS récupérés dans notre répertoire assets/bootstrap.

Etape 3

Rajouter dans le fichier Html les données CSS et JS via le nom des fichiers correspondants.

Etape 4

Rajouter dans le corps du fichier Html un simple composant Bottstrap (ici un bouton).
Le fichier final obtenu est le suivant.

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>titre de notre page</title>

  <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  Contenu de notre page<br>

  <button type="button" class="btn btn-primary">bouton Bootstrap exemple</button>

  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>