====== Activité Bootstrap N°2 - le système de grille Grid System ====== ===== Présentation ===== Bootstrap utilise un système de grille pour positionner les différents éléments de page Web. En détectant la largeur de la page du navigateur Bootstrap utilise différentes catégories de viewport : ^Taille écran^nom^largeur^Equipement^ |Très petit|xs|< 576 pixels|petit smartphone| |Petit (small)|sm|>= 576px|smartphone| |medium|md|>= 768px|tablette| |large|lg|>= 992px|écran d'ordinateur| |extra large|xl|>= 1200px|grand écran d'ordinateur| Bootstrap peut détecter la largeur de la page web pour adapter la largeur des conteneurs. * sur les smartphones dont l'écran est petit les éléments sont à être présentés les uns au dessous des autres, * sur ordinateur, dont l'écran est plus large; les éléments peuvent être placés les uns à côté des autres ===== La grille ===== Bootstrap découpe la page en une grille de 12 colonnes dans laquelle on définit la rageur de chaque élément. voici un exemple de gtile avec 3 éléments {{ :isn:bootstrap_01.png |}} Quand la page est affichée sur un **écran plus petit,** soit les conteneurs sont **empilés** soit ils sont **réduits** au risque de devenir **illisibles** : {{ :isn:bootstrap_02.png |}} Le rôle des catégories d'équipement permet de préciser ce comportement (réduire ou empiler) en fonction de l'équipement. ==== Exemple pour le positionnement de 2 éléments sur un écran d'ordinateur : ==== ==== Gérer le positionnement des éléments pour tablette et ordinateur ==== Voici un exemple permettant l'afficher * **deux** éléments par ligne sur une smartphone avec la classe CSS col-sm-6 soit la moitié des 12 colonnes; * **trois** éléments par ligne pour une tablette avec la classe CSS col-md-4 soit un tiers des 12 colonnes; Il est bien sûr possible de gérer plusieurs lignes avec des éléments définis avec un nombre de colonnes différents : ==== Activité Les langages pour créer des sites Web ... ==== * [[isn:langageweb|Les langages pour créer des sites Web]]