Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

CSS : Positionnement et mise en page

Mettre en place un framework réactif

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À l'instar du modèle de grille, mettez en place Bootstrap, un des frameworks les plus utilisés. Vous apprendrez à utiliser cette grille de manière adaptée à chacun des supports.
04:40

Transcription

À l'instar de 960, nous allons cette fois-ci mettre en place un framework beaucoup plus complet, qui va au-delà du mode grille, qui permet d'accéder à des fonctionnalités interactives qui a un aspect intégralement responsive et donc à ouvrir vers une feuille de style de départ qui propose un ensemble de classes beaucoup plus complet pour pouvoir mettre des composants. Bien que ce ne soit pas le rôle de cette formation qui est basée sur le positionnement et la mise en page CSS : comment on utilise ce genre de framework ? Première chose à faire dans le Getting Started ici, c'est de récupérer le fichier ou alors vous pouvez aussi utiliser ce qu'on appelle ici des CDN qui vont permettre d'accéder au fichier. Attention toutefois, il faut quand même rajouter également jQuery. Alors, je vous propose qu'on parte sur la même base de HTML. Première des choses, d'entrée de jeu, puisqu'on va utiliser une distribution mobile, on va rajouter la balise <meta name="viewport" avec le content qui va être sur la définition de largeur sur le device width et l'initial-scale à 1 au départ. Ensuite, on va pouvoir placer le script jQuery. Alors, pour jQuery c'est pareil, il fonctionne en CDN. Vous pouvez le récupérer ici en toute version, en version 1 compressée ou minifiée. On va prendre la version minifiée ici qui va nous permettre de récupérer, copier directement le lien et venir l'intégrer dans notre document ainsi que pour le Bootstrap ici, on va pouvoir également récupérer l'intégralité des fichiers CDN, donc mis à disposition. Un intérêt aussi d'utiliser le CDN pour ce genre de librairie, c'est qu'en fait, cela veut dire que d'autres utilisateurs, ont peut-être utilisé ce même CDN et donc ça sera dans le cache des navigateurs et ça optimisera les temps de chargement. Bootstrap fonctionne comme tous les autres framework, c'est-à-dire ce sont sur des jeux de classe à ajouter. Ici, je vais l'ajouter directement sur le body, on va définir que le body est un container Il suffit de taper container et là toutes les classes qui apparaissent ici n'oublions pas sont des classes qui sont proposées par le framework Bootstrap puisqu'en fait c'est le seul qui est présent dans notre fichier source. Donc ici container, vous en avez deux, container et container fluid. C'est la même différence que ce qu'on avait vu dans une étape précédente entre responsive et adaptative. Alors ici on va prendre adaptative, on va prendre ce container ici. Et maintenant, on va pouvoir définir tour à tour chacun de ces éléments ici, par des classes. Rappelez-vous, ça commençait par col la dernière fois et là c'est col sauf qu'on a col avec 2 petites lettres. Alors retournons du côté de Boostrap ici et regardons dans cette partie-là dans les grilles d'options ici, on a les 2 petites lettres qui sont retrouvées pour xs pour 'extra small device', donc ce sont des téléphones généralement, 'small device' qui correspond aux tablettes, 'medium device' qui correspond aux ordinateurs de bureau à écran classique, puis 'col lg' pour les écrans très larges. Alors, qui peut le plus peut le moins, c'est-à-dire que si on marque un xs12 par exemple, n'oublions pas on est dans un container à 12, un xs12 ça va nous donner accès à ce paramétrage-là pour tous les écrans, que l'on soit sur téléphone portable ou que l'on soit sur écran très large. Donc, ici je vais venir mettre exactement la même chose au footer. Par contre ici au niveau de main et aside, en fait on avait une petite particularité qui était que sur des écrans larges ça se mettait en 4 et 8 au lieu d'en 12. Alors, ici on va dire que pour le main et le aside on va mettre un class qui sera un col, alors on va distinguer les 2 on va dire pour la partie xs, c'est-à-dire extra small on sera en 12, par contre à partir du medium, col-md, on sera pour le aside en 4. Je vais copier ça ira plus vite que de le taper ici pour le main. Sauf qu'au niveau du main on sera au niveau du mp en 8. Donc ici, ctrl + S, si on regarde dans un navigateur, je vais basculer ici dans Chromium. On se retrouve donc bien avec notre titre de la page, le header, le footer ici en bas, et ici si je réduis vous voyez qu'on passe en 12 et ici en 4 et 8, donc c'est parfait ! Voilà, on pourrait s'arrêter là pour ce qui concerne la mise en page. Vous avez compris on utilise le framework Bootstrap. Voilà, ce que je vous propose maintenant c'est de passer à une étape suivante et de regarder un peu comment on peut utiliser ce framework pour aller plus loin avec la mise en place d'un composant ce qui concernerait par exemple la barre de menu.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !