CSS : Positionnement et mise en page

Ajouter un composant en s'appuyant sur le framework

Testez gratuitement nos 1333 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
À la différence des simples modes grilles, les frameworks proposent un ensemble d'éléments de page prédéfinis. Placez un composant qui vous mènera vers l'emploi de ces compléments.
07:38

Transcription

Pour mettre en place un composant de barre de navigation, du côté du code ici, nous avons une balise <nav qui contient une liste d'éléments <ul <li Et justement, si on regarde du côté maintenant des composants Bootstrap ici... Je ne l'ai pas pris, non ? On va pouvoir les prendre dans la première partie ici, voilà. On va demander d'accéder aux composants. Dans les composants sur la partie droite, on a accès à tous les composants. Et vous voyez qu'il y a une différence entre la navigation et les navbar. Nous ce qui nous intéresse, c'est la navbar. On peut prendre par exemple le default navbar, où on va retrouver toutes les informations nécessaires si besoin était. Je vous propose qu'on le fasse rapidement ensemble ici. Ce sera plus clair quelque part dans le sens où se dire, voilà la navigation, première chose, il va falloir indiquer toujours par un jeu de classes ici qu'il s'agit d'une navigation. Mais c'est pas une navigation tout à fait traditionnelle puisque navigation traditionnelle ça serait par exemple des éléments à onglets ou autre. Ici, on est dans une navbar une barre de menu, une barre de navigation. Donc on va rajouter la classe navbar et d'entrée de jeu on va dire dans cette classe navbar ici on va venir rajouter la navbar default qui va être la feuille de style par défaut. On pourrait rajouter inverse par exemple ici, pour avoir une barre de navigation couleur inverse, c'est-à-dire noir sur blanc au lieu d'avoir blanc sur noir. Donc ici, on va reprendre le défaut, voilà tout simplement. Une fois ceci défini, il va falloir qu'on rajoute un élément pour l'aspect responsive qui n'est pas prévu dans ce code ici. Alors on va essayer d'être le moins 'divite' possible. On va rajouter une balise div qui aura pour classe une navbar header qui sera l'en-tête de cette barre de navigation. Cet en-tête de barre de navigation contiendra le fameux menu sandwich que l'on place pour les éléments distribués sur les appareils mobiles. Donc on va mettre un bouton ici, tout simplement, et dans ce bouton, on va dire qu'il est de type button. Alors son rôle sera de dire, quand je clique là-dessus, on va activer la partie des menus dont on a besoin. Par contre, quand je suis en écran large, je ne veux pas qu'on me voie. Donc ce qu'on va faire, c'est rajouter une balise div, que l'on va encapsuler autour alors là ça fait un peu de divit mais c'est nécessaire pour le jeu de classes et de styles, l'affichage CSS propre à Bootstrap donc il est préférable d'encadrer et donc ici, à cet élément-là div, c'est cet élément-là qu'on va piloter par cet élément-là. Vous voyez au niveau de la barre de navigation. On aurait très bien pu utiliser directement cet élément-là puisque c'est un bloc. Mais au niveau des styles, ça ne sera pas tout à fait pile-poil au pixel près. Donc, pour mettre en relation ce bouton avec cette série, on va utiliser un data-toggle ici que l'on va passer sur collapse. Donc on va dire, ce bouton sert à collapser quelque chose. Quelle est l'origine de cet élément à collapser ? On va le placer sur ce div ici, classe collapse. Par contre, pour pouvoir identifier exactement la partie qui sera collapsée, parce qu'on pourrait avoir une partie qui reste émergée, qui reste visible dans l'intégralité de cette liste d'éléments. On va aller préciser le target à collapser on va faire un data target, et là on va définir un identifiant. On peut donner le nom que l'on veut à cet identifiant donc menubar-to-be-collapsed sera très bien, pour les mettre en relation tous les 2. Donc chaque fois qu'on cliquera sur le bouton, on va venir affecter cette partie-là qui devra changer visuellement et ça sera exactement la même partie qui sera changée. On aurait pu avoir une autre sous-partie, encore une fois je le répète. Donc maintenant, que notre bouton et la partie du menu sont en place. On va peupler ce bouton. Pour ce bouton, on a une série de classes qui sont les iconbars qui vont pouvoir être rajoutés dans des éléments span, et qui vont simplement faire des petites barres, donc là j'en mets 3, ça fera 3 barres. Si vous en voulez 4 ou 5 vous en rajoutez 2 de plus et automatiquement, tout se mettra en place. Tout se mettra en place, parce qu'on va rajouter une classe au niveau du bouton pour dire attention, cet élément de bouton ici, c'est une navbar-toggle, donc qui fait partie du groupe navbar et c'est l'élément qui va permettre de permuter et on va lui dire attention, au départ il est collapsed. C'est à dire qu'on ne veut pas le voir. Il n'activera que lorsqu'on est dans le petit écran. Et il est collapsed par rapport à l'ensemble de ce menu et sous-menu qui va s'ouvrir et donc ici, on va rajouter une classe en disant que lui c'est le navbar collapse, c'est-à-dire que c'est cet élément qui fait partie du groupe navbar qui va se permuter. Ensuite, on va rajouter une classe à l'élément ul qui est l'élément de liste également qui fait vraiment partie de la barre de navigation et on va dire, cette barre de navigation. Cette fois-ci, on est dans la navigation, on prend un élément nav, on dit que c'est un navbar-nav c'est la fameuse barre de navigation. Voilà, donc on a terminé cette mise en place. On peut re-basculer dans le navigateur, on avait un élément prévu à cet effet. Voilà, si j'actualise vous voyez qu'on a la barre de navigation qui est prête, et si je réduis, eh bien il va arriver un instant où on passe sur ce fameux élément où on avait les fameuses 3 lignes. Là, vous voyez c'est span icon-bar si nous avions ajouté d'autres span nous aurions plus de lignes et quand on clique dessus cela ouvre et ferme le menu. Juste un petit détail, c'est que cette image ici est gênante dans cette partie-là. Dès qu'elle est en partie 4, c'est pas gênant, mais en partie réduite c'est gênant. Donc ce qu'on peut faire, c'est venir au niveau de l'image ici maintenant et rajouter 2 classes ici. Donc on va faire un class. On va pouvoir rajouter une classe qui s'appelle soit hidden soit visible. Et là, pour utiliser la classe visible, il y a une certaine particularité. C'est-à-dire que si je viens dans la partie visible, on a plusieurs choix. Soit on va dire un hidden-xs et là elle sera visible dans toutes ces parties-là, soit on va utiliser visible mais il faudra l'utiliser de manière double, C'est-à-dire que je veux le voir dans les md et les lg. Donc ici on va revenir ici, on va faire visible-lg-block de type bloc. On veut le voir. Et la deuxième, on va venir la rajouter, ici visible-md-block aussi pareil. Alors, on peut avoir des affichages visibles en ligne inline-block, block, ou préserver l'état que l'on avait, ici ceci me convient. Je rebascule dans la partie et là l'image a disparu et elle réapparaitra uniquement lorsqu'on est en écran un peu plus large et très large. Donc notre aspect responsive est mis en place très rapidement. Comme vous avez pu vous en apercevoir, on ne voit pas la grille. Donc pour cela ce qu'on va faire, pour pouvoir visualiser la grille au moment du travail je vous invite à venir sur ce bookmark ici, qui va être un bookmarklet en réalité donc vous prenez simplement cet élément-là et vous le glisser sur votre barre de menu et ici si vous faites grid displayer, la grille va s'afficher, encore faut-il qu'elle soit utilisée. Donc si je viens ici dans mon élément et que je fais grid-displayer, vous allez voir la grille qui s'affiche et vous voyez bien comment les éléments sont positionnés sur la grille en fonction de vos paramètres, en fonction des éléments, que vous allez avoir utilisés dans chacune des classes présentées. Donc, vous voyez que l'intérêt de passer par un framework ça nous permet de faire rapidement une maquette à présenter au client. De pouvoir très rapidement mettre en place des éléments avant de pouvoir passer à un développement plus complexe, plus lourd, qui permettrait d'avoir une personnalisation globale des contenus et du site web mis en place.

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 !