BootStrap 3 vous permet de facilement gérer les différents supports que vos utilisateurs utilisent pour naviguer sur votre site Web.
Que ce soit à partir d’un smartphone, d’une tablette ou d’un ordinateur fixe, votre site aura toujours la présentation idéal que vous voulez qu’il ai grâce au système de grilles de BootStrap 3.
Apprenez à utiliser la puissance du système de grille avec BootStrap 3 dans la formation ci-dessous
[ppmaccordion][ppmtoggle title= »Le texte de la vidéo ci-dessous. »]
Comment utiliser le système de grille du Framework BootStrap 3
Bonjour à tous et bienvenu sur le développement facile donc on continu ensemble l’utilisation donc la découverte des fonctionnalités du framework BootStrap 3 et cette fois, vous allez apprendre à utiliser le système grille, c’est à dire je vous ai expliquer dans votre page Web avec BootStrap 3 vous pouvez séparer en différentes colonnes votre page et chaque élément vous donnez le nombre de colonnes que ça prend bien évidemment vous pouvez définir pour un ordinateur de bureau ça prend 9 colonnes pour une tablette 6 colonnes pour un Smartphone ça peut prendre trois colonnes donc vous définissez la taille donc c’est juste un attribut dans la balise div avec une classe en fait pour donner le nombre de colonnes en fonction du périphérique donc on va voir tout ça ensemble
Les grilles
C’est très pratique ce système de grilles ou de colonnes ça dépend le nom que l’on utilise, pour créer un site « responsive » donc c’est à dire un site qui s’affiche très bien sur tous les périphériques donc c’est de 1 à 12 colonnes la classe row ça permet de créer une grille donc vous définissez une div avec la classe row ça va vous créer votre grille et dedans vous mettez les différents éléments donc comme je vous l’ai dit il y a quatre systèmes de grilles différentes en fonction des périphériques donc ces des … des options dans votre classe CSS que vous renseignez donc vous mettez le mot clé xs avec le nombre de colonnes donc le col-xs- le nombre de colonnes donc c’est pour les Smartphones enfaîte largeur inférieure à 768 pixel. Vous avez sm pour les small devices donc les petits périphériques comme les tablettes avec une largeur < 992 pixels donc c’est la col-sm- le nombre de colonnes. Vous avez md pour les périphériques de de taille moyenne c’est à dire <1200 pixels de largeur donc typiquement les ordinateurs de bureau donc la ç’est col–md– votre nombre de colonnes et vous avez les extras larges périphérique donc c’est les étend les écrans plasma de 1 m de 2 m je ne sais pas à combien ils en sont, donc des grandes télés écran plats donc > 1200 pixels donc là c’est la classe col–lg- 12 colonnes par exemple
Les pages multi-grilles
Donc ma comme je vous l’ai dit avec BootStrap 3 avec ce Framework, vous pouvez créer des sites Web qui s’adapte automatiquement à plusieurs périphériques donc l’affichage se modifie, les éléments se positionnent en fonction justement de la taille de l’écran du périphérique. Vous pouvez combiner plusieurs grilles donc une grande grille et avec une grille dedans, ça c’est vous qui voyez en fonction de la complexité que vous souhaitez développer dans votre site Internet tout simplement.
Donc un exemple d’utilisation avec les classes suivantes donc sur médium devices donc col-md-10 pour un ordinateur de bureau ça va occuper 10 colonnes, pour col-sm-7 donc small device c’est des smartphone euh non small device c’est les tablettes pardon excusez-moi, ça va occupez 7 colonnes, une petite erreur dans le PowerPoint excusez-moi col-sm-7 c’est bien évidemment 7 colonne et pas 8. col-xs donc extra Small -6 c’est pour un smartphone donc ça va occuper 6 colonnes sur l’écran
Ajout d’un espace multi grilles
Donc vous pouvez également définir comme je vous l’ai dit une page avec plusieurs systèmes grilles et définir la taille verticale de vos widget donc suivant le même principe deux colonnes pour un ordinateur de bureau avec md quatre colonnes pour une tablette avec sm avec xs extra Small donc six colonnes pour un smartphone. Donc là, on va essayer de ensemble, de créer un espace multi grille, donc je vais vous montrer le code source donc le but de créer une page type de bloc avec votre zone de widgets sur le côté et le contenu donc les articles donc la première zone elle va occuper un certain nombre de colonnes et la deuxième zone un certain nombre de colonnes donc en indique la première zone sur les ordinateurs de bureau elle va occuper quatre colonnes – quatre et la deuxième zone elle va être gérée par la classe MD elle va occuper six colonnes et on aura un décalage de deux colonnes c’est à dire un espace de deux colonnes entre les deux zones donc avec col – MD – offset, donc l’offset ça permet de faire un espace entre deux zone bah la de deux colonnes tout simplement.
Exemple d’application
Je vous montre un exemple de code source, ce sera beaucoup plus parlant pour vous. il y a toujours la balise viewport pour déterminer la résolution de l’écran en fonction bah du périphérique tout simplement, on inclut la feuille de style, jQuery et BootStrap les fichiers JavaScript. Là c’est pour afficher des couleurs sur row rappeler-vous row ça permet de créer votre système de grille donc une div avec classe et derrière on mets le système de grille donc la zone de contenu sur 9 zone de contenu et sur un ordinateur de bureau sur trois zones des widgets donc il y a douze colonnes en tout donc ça fait que lorsqu’on agrandit vous voyez que et bien ça prend l’emplacement que l’on a défini tout simplement.
Après on peut rajouter un système de d’offset également y’a pas de problème. Est-ce que j’ai un exemple, oui j’ai un exemple de système d’offset, je vous montre ça et avec les périphériques donc le temps d’ouvrir tout ça, voilà. Alors on va regarder avec le décalage bah qu’est-ce que j’ai fait comme je vous l’ai dit j’ai utilisé le système d’offset pardon pour décaler de deux colonnes et donc si on regarde avec le décalage vous voyez il y a les deux colonnes ici et bien évidemment en fonction du périphérique les deux colonnes sont supprimées pour permettre un affichage correcte donc l’offset et vous avez une grille pour les périphériques mobiles c’est à dire là vous avez votre div zone de contenu donc ordinateur de bureau 10 colonnes le commentaire n’est pas à jour en fait small device donc les tablettes ça va occuper huit colonnes extra Small pour les … les Smartphones ça va occuper six colonnes pareilles pour le widget deux colonnes pour les ordinateurs de bureau quatre colonnes pour les tablettes six colonnes pour les Smartphones donc qu’est-ce que ça donne ça donne ça donc ordinateur de bureau on passe sur une tablette est et on passe sur un Smartphone, Smartphone six et six tablettes huit et quatre donc huit et quatre tablettes voilà et ordinateur de bureau on est à 10 et deux, vous voyez la zone on passe sur la tablette donc vous avez un affichage le qui s’adapte automatiquement comme je vous le disais en fonction de la taille du périphérique tout simplement grâce à ses valeurs pour la classe à chaque fois
Votre plan d’actions !
Ecouter maintenant c’est ça vous de jouer donc à votre tour de commencer à créer des sites Internet avec justement en spécifiant la taille en fonction du type de périphérique donc de la largeur de l’écran de votre périphérique avec le système de grille vous définissez le nombre de colonnes que ça va occuper donc comme d’habitude vous retrouverez le code source sous ce cours vidéo et vous avez la possibilité de poser toutes vos questions. Sinon je vous invite dès maintenant à consulter la deuxième c’est à dire qu’à la fin de cette vidéo, il y a un lien qui va s’afficher donc suffira de cliquer sur cette vidéo sur ce lien et vous serez redirigés vers la deuxième vidéo pour aller beaucoup plus loin donc je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Téléchargez l’exemple d’utilisation de grille avec BootStrap 3
Et voici le code source commenté d’une utilisation des colonnes avec BootStrap 3
Téléchargement du code source Exemple d'utilisation du système de grille avec BootStrap 3
