Démarrer avec bootstrap

25/09/19 danny

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.

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.

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

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

Le site officiel de Bootstrap version 4.3.1 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 et la librairie javascript jquery
  • Les 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/4.3/getting-started/download/

Sauver le fichier bootstrap-4.3.1-dist.zip sur votre ordinateur.
En décompressant ce fichier nous obtenons un répertoire bootstrap-4.3.1-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.

Le javascript Bootstrap a besoin de la librairie javascript jquery.
Nous pouvons la télécharger sur le site officiel https://jquery.com/download/
Copier le fichier jquery-3.4.1.min.js dans assets/bootstrap/js

Etape 3

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

Pour plus de détails vous pouvez consulter notre tutoriel suivant "Démarrer avec Html"
https://www.ganatan.com/tutorials/demarrer-avec-html
 

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/jquery-3.4.1.min.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

Laissez un commentaire

Votre avis
Cette adresse ne sera pas publiée