Outils pour utilisateurs

Outils du site


Panneau latéral

ACCUEIL

Support de cours

SNT

Semestre 1

Semestre 2

Semestre 3 et 4

Les livres du BTS SIO

Archives

Semestre 1


Semestre 2

—-

ICN

isn:bootstrapgridsystem

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 écrannomlargeurEquipement
Très petitxs< 576 pixelspetit smartphone
Petit (small)sm>= 576pxsmartphone
mediummd>= 768pxtablette
largelg>= 992pxécran d'ordinateur
extra largexl>= 1200pxgrand é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

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 : 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/bootstrapgridsystem.txt · Dernière modification: 2019/03/06 13:02 (modification externe)