La grille Bootstrap [zonewebmaster.eu]

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.
====== La grille Bootstrap ======

**Bootstrap** utilise une grille pour le positionnement des éléments sur la page, c'est le cœur du système **Bootstrap**.

Bootstrap étant une bibliothèque //jQuery// permettant de créer facilement des //[[glossaire:r#responsive-design|responsive design]]//, vous comprendrez facilement l'utilité du système de grille de **Bootstrap**. Elle permet de positionner les éléments à l'écran en fonction de la largeur de celui-ci.


===== Le principe =====

**Bootstrap** décompose la page en ligne (row) et chaque ligne en 12 colonnes.
Un peu comme le tableau ci-dessous

|  Col1  |  Col2  |  Col3  |  Col4  |  Col5  |  Col6  |  Col7  |  Col8  |  Col9  |  Col10  |  Col11  |  Col12  |

Donc, nous devons imaginer notre page de site web comme une grille, voir l'image ci-contre. {{:grille-bootstrap.jpg?300|}}

Ce n'est pas une méthode parfaite, car si le découpage en colonne s'effectue en pourcentage de l'écran et donne un résultat probant. Ce n'est pas forcément le cas des lignes (row), surtout si la hauteur des cases n'est pas la même pour tout les éléments de la ligne.


Exemple de code (Voir les commentaires intégrés)
<code html>
<div class="row"> <!-- Création d'une ligne -->
<div class="col-md-3">  <!-- Création d'un bloc de 3 cases soit 25% (12 cases / 3 cases = 4) -->
Première case correspondant à 25% de la largeur de la page
</div>
<div class="col-md-9"> <!-- Création d'un second bloc de 75% de largeur -->
C'est la deuxième colonne
</div>
</div> <!-- Fin de la ligne -->
</code>


===== La syntaxe =====

**Bootstrap** gère plusieurs formats d'écran, 4 plus précisément. En voici le détail :

<file>

Format Smartphone     inférieur à 768 pixels de large                            Nom de la class .col-xs-*
Format tablette       compris entre 768 et 991 pixels                            Nom de la class .col-sm-*
Format "petit écran"  compris entre 992 et 1200 pixels                           Nom de la class .col-md-*
Format "standard"     pour tous les écrans supérieurs ou égale à 1200 pixels     Nom de la class .col-lg-*
</file>

Comme dans l'exemple ci-dessus, il suffit de spécifier la largeur (en nombre de colonne) derrière le nom de la //class// 

<div class="col-xs-12"> indique que cet élément occupera toute la largeur de l'écran lorsque celui-ci sera inférieur à 768 pixels.

Compliquons un peu les choses, je veux que mon élément possède une largeur différente suivant le type d'écran. On dira, toute la largeur de l'écran si c'est une smartphone et 75% de l'écran si c'est un écran plus grand.
Et bien rien de plus simple, on ajoute les //class// les unes derrières les autres.
<div class="col-xs-12 cols-sm-9"> 

Augmentons le niveau de complexité :-O , je veux que mon élément de 9 colonnes de large soit décalé d'une colonne par rapport au bord gauche de l'écran.


===== Le cas pratique =====

Rien de tel qu'un cas pratique, dans l’exercice suivant, l'objectif est d'afficher 2 éléments. Le premier de couleur bleu qui contiendra un menu et un second qui contiendra des données de type //"texte"//.

(A finir)

===== Notes de version =====

  * [18/11/2017] : Harmonisation de la page

===== Auteurs et sources =====

  * Auteur : [[:user:montuy337513]]

===== Navigation =====

  * [[:accueil|Accueil]]
  * [[:gestion-site-internet]]
  * [[:tutoriel-javascript]]
  * [[:tutoriel-html]]
  * [[:tutoriel-php-mysql]]
  * [[:tutoriel-referencement-seo]]

<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">