TP M1106 n°5 - Partie 1 sur 2 - Durée 2h

Framework Bootstrap 4

html5 CSS3 M1106 rwd bootstrap

Objectif

La séance de ce TP est dédié à la réalisation de votre second site web personnel adaptatif (responsive) en employant le framework Bootstrap version 4.

Une introduction à Bootstrap 4

Ce TP et votre site sont à faire avec Bootstrap 4.

Vous trouverez une documentation w3school pour Bootstrap 4 ici => https://www.w3schools.com/bootstrap4/default.asp

Bootstrap est un framework ("une boîte à outils" en français) permettant de créer des sites web adaptatifs, mobile first (on commence à penser le design pour les petits écrans puis on adapte aux plus grands), avec du HTML, du CSS et du Javascript (Bibliothèques Jquery.js et Popper.js). Vous n'avez pas à avoir de connaissances en Javascript pour l'utiliser, juste des connaissances en HTML et CSS.

Ne téléchargez pas Bootstrap. Vous utiliserez uniquement des liens vers :

les habillages que fait Bootstrap pour vous

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

les codes javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Ces liens sont à ajouter à votre en-tête de site. Voilà vous êtes prêt(e) à utiliser les outils Bootstrap 4 !

Les liens concernent bien Bootstrap 4. Si vous tentez d'utiliser des classes Bootstrap 3, cela ne marchera pas forcément.

Testez votre première page nommée pageBootstrap4.html et contenant le code suivant

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Un exemple de page avec Bootstrap 4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Ma première page Bootstrap</h1>
  <p>Un paragraphe de ma page.</p>
</div>

</body>
</html>

Testez à nouveau cette page en changeant la classe container du div par la classe container-fluid (cette dernière octroie toute la largeur de page).

Bootstrap utilise le système de grille flexbox de CSS avec une grille de maximum 12 colonnes comme vous pourrez le voir plus en détail dans cette documentation w3schoools (Grille Boostrap 4) ou cette dernière par exemple.

Bootstrap 4 offre des classes pour regrouper les colonnes ensemble, mais aussi pour automatiquement s'adapter à l'écran :

col- (très petit écran - largeur d'écran plus petite que 576px)
col-sm- (petit écran - "small devices" - largeur d'écran égale ou plus grande que 576px)
col-md- (écran moyen - "medium devices" - largeur d'écran égale ou plus grande que 768px)
col-lg- (écran large - "large devices" - largeur d'écran égale ou plus grande que 992px)
col-xl- (écran extra large - "extra large devices" - largeur d'écran égale ou plus grande que 1200px)

On ajoute alors un numéro à la classe pour le nombre de colonnes recouvertes par le bloc, la somme sur une ligne devant faire 12 (comme pour la grille "à la main" du TP n°3). Si on ne précise pas de nombre, Bootstrap met des colonnes de même largeur.

Ajoutez le code suivant à votre page et testez la.

<div class="row">
    <div class="col" style="background-color:lavender;">Un bloc de classe col</div>
    <div class="col" style="background-color:orange;">Un bloc de classe col</div>
    <div class="col" style="background-color:lavender;">Un bloc de classe col</div>
</div>

Vous remarquez que les 3 blocs col occupent donc chacun 33% (i.e. chaque bloc occupe 4 colonnes sur 12).

Ajoutez maintenant le code suivant pour tester la classe col-sm.

<div class="row">
    <div class="col-sm" style="background-color:lavender;">Un bloc de classe col-sm</div>
    <div class="col-sm" style="background-color:orange;">Un bloc de classe col-sm</div>
    <div class="col-sm" style="background-color:lavender;">Un bloc de classe col-sm</div>
</div>

Remarquez qu'en rétrécissant la fenêtre, les blocs se placent avec cette classe les uns sous les autres dès que la fenêtre fait moins de 576px.

Ajoutez maintenant le code suivant pour tester la classe col-md.

<div class="row">
    <div class="col-md" style="background-color:lavender;">Un bloc de classe col-md</div>
    <div class="col-md" style="background-color:orange;">Un bloc de classe col-md</div>
</div>

Remarquez que cette fois-ci, les blocs se placent avec cette classe les uns sous les autres dès que la fenêtre fait moins de 768px.

Ajoutez maintenant le code suivant et testez le.
```
<div class="row">
    <div class="col-sm-4 text-white bg-primary">Un bloc de classe col-sm-4</div>
    <div class="col-sm-8 text-white bg-dark">Un bloc de classe col-sm-8</div>
</div>
```
Remarquez que le premier bloc occupe 4 colonnes et le suivant 8 soit 1/3 de la largeur pour le premier et 2/3 pour le second. Remarquez également que ces blocs se mettent l'un sous l'ordre seulement si la fenêtre fait moins de 576px. Enfin remarquez les classes de couleurs Bootstrap employées, vous avez une doc ici => https://getbootstrap.com/docs/4.0/utilities/colors/ et là => https://www.w3schools.com/bootstrap4/bootstrap_colors.asp
La classe Jumbotron permet de faire des bandeaux de texte et peut par exemple être utilisée pour créer un titre à votre page (où un pied de page "footer"). Ajoutez au début du corps (body) de votre page le code suivant :

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>My First Bootstrap 4 Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

La création d'une barre de navigation peut se faire avec une balise nav de la classe navbar et une balise ul de la classe navbar-nav. Testez l'exemple suivant :

<nav class="navbar navbar-expand-sm navbar-dark bg-dark ">
<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Page 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Page 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Page 3</a>
  </li>
</ul>
</nav>

La classe navbar-expand- sert pour le responsive design pour déterminer à partir de quelle largeur les menus passent les uns sous les autres.

D'autres exemples avec des détails supplémentaires, dont des menus déroulants, se trouvent sur cette page https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp.

Un menu avec un template de site se trouvent sur cette page https://www.w3schools.com/bootstrap4/bootstrap_templates.asp.

Vous pouvez trouver de nombreux templates bootstrap gratuits sur Internet.

Création de votre site

Créez maintenant votre second site avec Bootstrap 4 et les mêmes mêmes consignes que celles données au TP précédent.

Il vous est recommandé de développer votre site à partir d'un des nombreux templates gratuits existants.

Vous le personnaliserez et l'adapterez aux consignes demandées pour votre site.

Ce travail est à réaliser individuellement et n'est pas un copier-coller de code issu d'Internet.

Vous déposerez à la fin de ce TP obligatoirement une archive de votre site. Votre archive ne contient évidemment pas Bootstrap ! Vous avez utiliser des liens comme cela vous a été expliqué dans la première partie de ce TP.