Aller au contenu

La mise en page facile avec le Framework BootStrap 3

Et voici la suite du cours précédent sur le système de grilles de BootStrap 3.

Maîtrisez tout le potentiel des grilles du Framework BootStrap. Réalisez la mise en page de votre site Web pour qu’il s’adapte au support de votre visiteur.

Cachez ou affichez les colonnes de votre grille pour une meilleur lisibilité.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La mise en page facile avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur développement facile. Dans le cours précédent vous avez commencé à aborder un concept fondamental du Framework BootStrap 3. C’est le système de grille, j’ai préféré diviser ce cours en deux parties car c’est un pilier du framework BootStrap 3. Il faut absolument que vous sachiez l’utiliser, que vous compreniez justement comment utiliser ce système de grille.

Imbriquer des grilles

Donc là, on va aller un peu plus loin voir les différentes possibilités qu’offre BootStrap avec son système de grille. Donc comme je vous l’ai dit vous pouvez imbriquer des grilles donc une grille principale votre page et une autre grille ici par exemple pour le contenu de votre page et une autre grille ici pour votre zone widgets si vous êtes sur un blog. Donc comme d’habitude vous avez la grille principale qui est divisée en douze colonnes, et les grilles secondaires qui sont chacune divisée en 12 colonnes. Après, il faut savoir que les grilles sont définir en partant de la gauche, donc ma gauche à moi vers la droite tout simplement.

Les options de BootStrap pour le contenu

Donc comme je vous l’ai dit BootStrap 3 dispose de plusieurs classes qui vous permet justement d’afficher du contenu, ou de le masquer en fonction du type de périphérique. Si vous êtes sur un ordinateur de bureau vous pouvez afficher tout votre contenu, par contre si vous êtes sur un écran réduit ça peut être intéressant de masquer certaines grilles de votre Web pour permettre une meilleure lisibilité pour votre internaute. Bien vous avez des champs hidden et visible qui permettent d’indiquer à BootStrap est ce que cette grille sera visible ou non en fonction du type de périphérique.

Je vous ai mis un exemple de code source sur votre écran donc classe toujours col-md pour les ordinateurs de bureau xs pour les smartphones, le nombre de colonnes et vous ajoutez hidden-xs, c’est à dire on va masquer cette div sur les Smartphones tout simplement. Donc  « Zone N°2 » sera masquer sur les smartphone par contre elle sera affichée pour les tablettes et pour les ordinateurs de bureau. C’est vraiment très pratique.

Exemple d’application

 

Je vous montre un exemple de code source  justement. Dans la première partie toujours dans le CSS justement pour afficher ce système de couleur de zone en couleur donc div row c’est pour le CSS, donc classe row comme d’habitude pour intégrer le système de grille et on a une première grille qui occupe neuf colonnes, zone occupant 9 colonnes et une deuxième grille, deuxième row avec trois colonnes, xs, rappelez-vous xs c’est les Smartphones, 3 colonnes pour les Smartphones et sur les périphériques de bureau md médiums device, il y a un espace de une  colonne, espace de une colonne et donc cinq colonnes zone de contenu, trois colonnes pour le widgets et si je change la taille vous avez vu que ça que md donc que pour les périphériques de bureau médium device, ordinateur de bureau, il y aura l’espace, sinon pour les autres il n’y a pas l’espace même  la tablette pas d’espace et on passe sur un ordinateur de bureau tout simplement. Donc ça c’est un premier exemple.

Deuxième exemple avec une partie cachée c’est le même principe si vous avez compris comment utiliser offset, et bien la partie cachée hidden-xs vous allez cacher cette zone uniquement sur les smartphones extra small device. Donc 1, 2, 3, la zone qui va disparaître ; périphérique de bureau elle est là, la tablette aussi, on passe sur un Smartphone elle disparaît sur les Smartphone. Tablettes ordinateur de bureau, tablette, Smartphone elle disparaît.

Votre plan d’actions !

Vous avez lu le la puissance du framework BootStrap, en fonction de la taille de l’écran à votre disposition, vous pouvez choisir de masquer ou d’afficher des éléments de rajouter des espaces de vide pour aérer votre site et c’est relativement simple à utiliser comme d’habitude posez-moi vos questions sous le cours vidéo. Vous trouverez le code source complet également directement sous cette vidéo et je vous invite dès maintenant à regarder la deuxième vidéo donc la deuxième il y a soit une icône, une bannière, une image au-dessus de cette vidéo cliquable ou alors cette vidéo va afficher un lien donc juste quand la vidéo va terminer, elle va afficher un lien ça va vous amener vers une deuxième vidéo qui va vous permettre d’aller beaucoup plus loin avec le framework BootStrap 3. Donc je vous invite à consulter cette deuxième vidéo. Je vous dis à tout de suite justement dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple BootStrap 3

Et voici le code source commenté pour créer simplement des mises en pages qui s’adaptent au périphérique du visiteur avec BootStrap 3.

Téléchargement du code source Les options du système de grilles de BootStrap 3

Cliquez ici pour télécharger le code source Les options du système de grilles de BootStrap 3

Partagez votre mise en page réalisée avec BootStrap 3

Partagez vous aussi, dans les commentaires, vos réalisation avec le Framework BootStrap 3

 

 

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>