Activité Bootstrap - les bases

Bootstrap est une collection d'outils ou framework utiles à la création du design des pages web. Bootstrap utilise les langages HTML, CSS et Javascript pour gérer des formulaires, des boutons, des outils de navigation et autres éléments interactifs. C'est Twitter qui a développé Bootstrap et qui le met à disposition sous licence open source.

Bootstrap permet de créer des pages Web responsive c'est à dire des pages qui s'adaptent au navigateur utilisé sur ordinateur ou sur smartphone.

Préparation de son environnement

Bootstrap peut être utilisé de deux manières :

en téléchargeant les librairies (fichiers) nécessaires et en les copiant dans le dossier de son site Web,
en utilisant un CDN (Content delivery network), c'est à dire un lien vers un serveur disposant de ces librairies. C'est cette solution qui va être utilisée.

Site de Bootstrap : https://getbootstrap.com/
- la dernière version au 03/20 est v4.3.1 (Currently v4.3.1)
- le site permet cependant d'utiliser des versions plus anciennes

Bootstrap utilise aussi la bibliothèque javascript jQuery.

Site de jQquery : https://jquery.com/

Créer son premier projet

je crée un dossier appelé projet dans lequel :
- je crée un fichier index.html avec le contenu suivant en utilisant les CDN. Ceux-ci sont indiqués dans la rubrique téléchargement (Download) des sites web de Bootstrap et de jQuery.

Attention : je mets les CDN pour les scripts Javascript de Bootstrap et d jQuery à la fin de la page Web c'est à dire avant la balise </body>. Je procède de la même manière que pour tout script javascript. Cela permet avoir les éléments html de la page Web entièrement chargés avant l'exécution des scripts.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

Page web responsive avec Bootstrap

Bootstrap permet d'avoir des pages Web responsive c'est à dire des pages web dont le contenu s'adapte à l'équipement utilisé : ordinateur, tablette ou smartphone.

Pour que cela soit possible, il faut inclure dans la balise (tag) head de la la page le méta tag viewport qui permet de préciser d'adapter le contenu à la largeur (width) du périphérique (device) et définir un niveau de zoom initial :

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>

Pour pouvoir gérer avec Bootstrap les différents éléments de la page, il faut les mettre dans des conteneurs définis avec la balise div et utiliser les styles CSS de Bootstrap.

les conteneurs peuvent être soit de largeur fixe

<div class="container" style="background:blue">Contenu de largeur fixe</div>

soit utiliser toute la largeur de la page, c'est à dire la largeur du viewport

<div class="container-fluid" style="background:blue">Contenu de la largeur du viewport</div>

Activité Les langages pour créer des sites Web ...

Les langages pour créer des sites Web