Ma reconversion pro

Du bâtiment au développement web

Le Sytème de Grille avec Bootstrap

Bonjour,le système de grille avec Bootstrap

On continue la série consacrée à Bootstrap avec cet article sur ce qui est pour moi l’élément fondateur du frawework:  le système de grille. Ce système permet assez facilement de construire des pages responsives, puisqu’il est pensé Mobile First. Il est assez simple de faire des pages qui s’adaptent à tout types d’écrans, de ton PC 30″ à ton smartphone. Assez simple, mais il faut quand même un peu de temps pour bien comprendre comment ça marche, et j’avoue qu’au départ il y a 2-3 trucs un peu perturbant…

La grille Bootstrap

Le principe élémentaire au départ c’est qu’il faut se forcer à suivre une routine qui fait un peu penser aux poupées russes… Pour que tout soit bien responsive, il faut suivre plusieurs « couches » de blocs:

  • le conteneur;
  • la ligne;
  • les colonnes.

La mise en place de la grille doit toujours suivre ces 3 étapes. Si par exemple, tu oublies la ligne, il peut se passer des trucs très bizarre et c’est assez agaçant de ne pas trouver… oui celle là je l’ai faite aussi… Mais voyons plus en détail chacune de ces poupées russes…

Un autre grand principe de Bootstrap est d’ajouter des classes CSS qui permettent de faire de la mise en forme directement sans forcément écrire beaucoup de CSS, la mise en place de la grille adopte également ce principe.

Le Conteneur

Le premier bloc à mettre en place est une div qui servira de « grande boîte » dans la quelle tu mettras tout ton code. Assez souvent , on fait une première grande boîte pour mettre tout le contenu de la page. Tu auras donc souvent la choses suivante (je ne noterai pas le DOCTYPE pour ne pas surcharge inutilement la lecture):

<body>
	<div class="container">
		
		<!-- ICI LA STRUCTURE ET LE CONTENU DE TA PAGE -->
		
		
	</div>
</body>

Cette grande boîte pourra prendre 2 valeurs de classe CSS:

  • .container: (comme dans l’exemple ci dessus) Cette valeur te permet de centrer ton contenu en milieu de page si tu as un écran avec une grande résolution. Sur un écran de PC plus petit le conteneur aura une valeur max de 1200px  (comprenant des marges internes, padding, de 15 px de chaque coté);
  • .container-fluid: cette valeur étirera ton contenu sur toute la place disponible, il n’a pas de largeur fixe contrairement au container.

Il est possible d’imbriquer une boîte ayant pour valeur container dans une boîte ayant pour valeur container-fluid. Par exemple tu souhaites avoir un bandeau qui fait toute la largeur de l’écran contenant la navigation, et ton contenu qui est centré sur la page. Tout est possible!

Comme d’habitude, je crée un projet Codepen pour que tu puisses voir à quoi tout cela ressemble.

La ligne

Après avoir créé un conteneur ayant pour classe container ou container-fluid,  il faut à l’intérieur de ce bloc créer un sous-bloc qui portera la classe row (ligne en français). Ce conteneur définit donc une ligne à l’intérieur de laquelle nous pourrons créer  d’autres sous blocs. A présent ton code doit ressembler à cela:

		<div class="container-fluid">
			<div class="row">
					
			</div>
		</div>

Jusque là rien de très compliqué , voyons la suite…

Les colonnes

Dans Bootstrap, chaque ligne (.row) est composé de 12 colonnes maximum. Quelle que soit la largeur de ton écran, les lignes aurons toutes la possibilité d’accueillir 12 colonnes. En revanche, suivant la taille du contenu, il faudra adapter la distribution des colonnes.

Voici pour commencer la distribution des colonnes.

le système de grille avec Bootstrap

Il est assez facile de comprendre sur cette photo comment est divisée chaque ligne.

Pour répartir ces colonnes dans notre ligne, il faut créer une div (ou article ou section) par colonne et lui attribuer une classe CSS reconnu par Bootstrap pour ce genre de chose. Par exemple, si je prends l’exemple de la deuxième ligne du tableau ci dessus, j’écrirais le code suivant:

		<div class="container-fluid">
				<div class="row">
					<div class="col-md-8">
						<h1>Titre 1</h1>
					</div>
					<div class="col-md-4">
						<h1>Titre 1</h1>
					</div>
				</div>
		</div>

Ma ligne comprend alors 2 grandes colonnes :

  • une de 8 colonnes de larges ,
  • une de 4 colonnes de large.

Comme tu peux le voir la syntaxe de la colonne est un peu complexe, elle se décompose comme suit:

  • col: préfixe de colonne,
  • md: définit la taille de l’écran pour laquelle cet affichage est demandée, ici md signifie Medium, 
  • 4:  le nombre de colonne à réunir (un peu comme fusionner les cellules dans Excel…).

Bootstrap propose 4 tailles d’écrans qui sont définies comme cela:

  • XS: Extra-Small, concerne les écrans de Smartphones, inférieures à 768 px,
  • SM: SMALL (contrairement à ce que tu as pensé 2 secondes…), concerne les écrans un peu plus grands comme les tablette spar exemple,  inférieures à 768 px, également,
  • MD:  MEDIUM, concerne les écrans de PC « standard » , inférieur à 992 px,
  • LG: LARGE, concerne les très grands écrans ayant une largeur de plus de 1200px.

Pour plus de détail, je te conseille de jeter un oeil sur le site Bootstrap dans l’onglet CSS, tu trouveras un tableau résumant tout cela, dans la partie Grid Option.

Tu peux aller voir le projet Codepen, tu verras j’ai fait plusieurs exemples, dont un cas où il n’y a pas la classe .row pour que tu puisses voir de que ça donne.

La suite…

Voilà donc pour la présentation de la grille et des premiers grands principes de Bootstrap. Les articles de la semaine prochaine seront consacrés à quelques points particuliers de la grille Bootstrap., qu’on manipulera plus en profondeur. J’espère que ces articles plus courts son plus sympa à lire.

Si tu veux tester de ton coté ce système de grille, veille à faire un fichier CSS afin de définir les hauteurs de colonnes ou saisis simplement du texte pour remplir un peu ta div. Sinon tu auras un rendu à l’écran un peu bizarre…

Je commence à pas mal comprendre comment cela fonctionne mais j’ai encore énormément de chose à apprendre sur Bootstrap.

Bon week-end, et à la semaine prochaine,

 

Guillaume

 

2 Comments

  1. Salut et félicitation pour avoir franchi le pas. la reconversion, c’est pas facile, je suis passé par là aussi, mais … il y a 15 ans ^^

    Petit conseil en passant, tu devrais te pencher sur Bootstrap 4 (en version alpha.6 à ce jour), au lieu de la 3. La version 4 finale sortira dans quelques semaines (mois au pire), et cela introduit pas mal de nouveauté CSS (flex, suppression de glyphicon, cards….).

    Le système de grille est similaire, hormis …. qu’on oubli le XS (principe du mobile First)

    L’idée étant de ne pas te faire perdre du temps sur bootstrap 3 qui sera obsolète l’an prochain et de partir directement sur des technos modernes.

    Bonne continuation

     
    • guillaume

      2 juillet 2017 at 22 h 50 min

      Merci pour le commentaire. J’ai vu passer l’info mais j’avais un livre sur Bootstrap 3 et j’avais envi de mettre le pied à l’étrier rapidement. Après Flexbox je connais un peu grace à un livre encore une fois, reste à voir comment ils l’intègrent dans Bootstrap.
      J’ai pas trouvé de formation sur la V4 et j’ai pas eu trop le temps de chercher non plus. Mais tu as raisons de m’interpeller sur le fait qu’il va falloir que je me mettes à jour très bientôt!!
      Merci beaucoup pour ta bienveillance et ton conseil, c’est exactement ce que je recherche avec ce blog!
      Bonne soirée,

      Guillaume

       

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

© 2019 Ma reconversion pro

Theme by Anders NorenUp ↑

%d blogueurs aiment cette page :