bootstrap-grid

Bootstrap : grille | cas pratique

Le design et la grille

www.teehanlax.com

Les dif­fé­rentes lar­geurs d’écran

Boots­trap iden­ti­fie plu­sieurs lar­geur d’écran : extra small (xs), small (sm), medium (md), large (lg).

  • xs cor­res­pond aux téléphones
  • sm aux tablettes
  • md aux ordi­na­teurs portables
  • lg aux ordi­na­teurs de bureau avec un grand écran

Ces dif­fé­rents type d’écrans sont asso­ciés à des class dans l’écriture HTML pour contraindre les com­por­te­ment des colonnes dans les dif­fé­rents cas de figures de tailles d’écrans.

  • .col-xs-#
  • .col-sm-#
  • .col-md-#
  • .col-lg-#

https://scotch.io

Docu­men­ta­tion en ligne

Un tuto­riel bien docu­menté en fran­çais pour reve­nir plus en détail sur le prin­cipe de la grille avec Bootstrap :

openclassrooms.com

Tuto­riel : réa­li­ser une mise en page avec un prin­cipe de grille grâce à Bootstrap

Télé­char­ger le code com­plet + fichier photoshop

Ce fichier est consti­tué du fichier d’exemple qui appa­rait dans la vidéo ainsi que le code HTML et CSS com­menté correspondant.

0