====== 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 ****. 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. ===== 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** : ... 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
Contenu de largeur fixe
 * soit utiliser toute la largeur de la page, c'est à dire la largeur du viewport
Contenu de la largeur du viewport
 ==== Activité Les langages pour créer des sites Web ... ==== * [[isn:langageweb|Les langages pour créer des sites Web]]