Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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 : ====

<html><iframe src="https://trinket.io/embed/html/9dbaef48d3" width="100%" height="300" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe></html>
==== 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;

<html><iframe src="https://trinket.io/embed/html/7f2bf6446a" width="100%" height="300" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe></html>

Il est bien sûr possible de gérer plusieurs lignes avec des éléments définis avec un nombre de colonnes différents : 
<html><iframe src="https://trinket.io/embed/html/60e9169602" width="100%" height="300" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe></html>

  
==== Activité Les langages pour créer des sites Web ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>
Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Outils de la page
