Apprenez à ajouter et personnaliser rapidement des listes avec le Framework BootStrap 3.
Agrémentez vos listes avec des icônes et des couleurs très simplement.
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]…
Comment ajouter rapidement des listes avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur développement facile donc dans ce nouveau cours dédié au Framework CSS BootStrap 3, vous allez apprendre à utiliser les listes, les fameuses listes seront mises en forme automatiquement et qui vont s’afficher de manière homogène quel que soit le périphérique justement grâce aux options de BootStrap 3.
Les listes
Donc vous connaissez sûrement les listes s’affichent avec la balise ul et li. Bon BootStrap apporte peu de nouveautés par défaut après on va utiliser des classes CSS justement, vous allez découvrir les classes CSS pour avoir une mise en forme un peu plus 2.0, un peu plus moderne. Donc là, je vous ai mis le code classique d’affichage d’une liste et avec la classe list-inline vous allez apprendre, ça va vous permettre de créer des listes en ligne plutôt qu’elles soient les uns sous les autres, les éléments seront en ligne. Vous avez également, la possibilité de définir la mise en forme des listes en combinant les balises dl, td et dd. Je vous montre un exemple à la fin du cours ne vous inquiétez pas. Donc vous pouvez créer une liste horizontale et dl-horizontal donc il suffit d’appeler la classe d’ajouter à votre balise li la classe dl-horizontal, ça va afficher votre liste les unes à côté des autres au lieu que ce soit verticale par défaut.
Les listes avancées
Vous pouvez combiner des classes donc list-group, list-group-item, ça va vous permettre de créer des listes beaucoup plus complexe, je vous ai mis un exemple de code source donc des listes avec un ergonomie moderne et pour gérer la taille des listes complètes rappelez-vous les premiers cours, il y a deux cours sur le système de grille on va le réutiliser en définissant le nombre de colonnes que va occuper notre liste donc là je vous ai mis un exemple xs pour les Smartphones ça va occuper par toute la largeur de l’écran pour les tablettes uniquement cinq colonnes sur les 12 disponibles et pour les ordinateurs de bureau uniquement trois colonnes sur les 12 disponibles pour la taille de la liste. Donc ça permet de définir, grâce à la grille, la taille de la liste en fonction du périphérique vraiment très, très pratique. Bien évidemment vous pouvez ajouter une icône sur votre liste rappelez-vous la classe badge dans les cours précédents, une classe badge ça va vous permettre d’ajouter un petite icône dans votre liste pour mettre du contenu en valeur vous pouvez aussi ajouter un titre à votre liste avec les classes pannel, panel- l’option et panel-heading pour le titre de votre liste et ensuite vous avez tous les éléments. Bien évidemment la classe panel, je vais vous montrer comment l’utiliser et vous pouvez l’utiliser avec n’importe quelle contenue HTML. Rappelez-vous défaut primary success, info, warning pour les labels pour les messages d’alerte, là c’est exactement le même principe si vous connaissez défaut primary success, info, warning danger les couleurs correspondants, pour panel c’est exactement la même chose, vous pourrez choisir la couleur d’arrière-plan du titre ainsi que la bordure avec les mots-clés que vous commencez à connaître par cœur. Donc vous pouvez transformer votre liste menu verticale de navigation dans le cours dédiez sur les menus donc dans les prochain cours il y aura un cours dédié sur les menus donc on va tout simplement réutiliser les listes pour faire des menus de navigation verticaux donc suffira de remplacer les balises ul et li par de simples balises div avec les balises a href tout simplement.
Exemple d’application
Je vous montre un exemple de code source. Donc au tout début du code source vous avez la liste simple classique la liste en ligne donc que horizontale classique. Pour classique suffit de préciser (je vais vous rajouter des commentaires, il n’y a pas de commentaires dans ce fichier) donc ça, c’est affichage d’une liste, list-inline pour afficher une liste en vertical. List-inline pour afficher les éléments de la liste en vertical. Ensuite vous avez des listes de définition comme je vous l’ai dit en combinant les balises dl dt et dd, ça va vous donner ça sous forme de liste tout aligné correctement en fonction du périphérique. Donc je l’aligne ici ça permet de voir le code source et le résultat donc très, très parlant pour vous. Un alignement horizontalement, donc là il faut que ce soit sur grand écran comme ça vous voyez un petit peu la différence d’affichage. Ensuite les listes un peu plus complexes. Donc je vous montre pour les listes plus complexes. Déjà elles sont plus jolies, là on a pas définie de taille de liste et avec le système de grille vous allez pouvoir définir des tailles pour vos listes tout simplement. Donc liste utiliser justement la classe liste grouper enfin list-group pardon et avec tous les items. Ensuite vous pouvez définir la taille de la liste en fonction du périphérique donc sur un (je vais mettre juste trois, voilà, là ça va définir la … mais ce n’est pas très jolis donc je laisse à 5 en fait). Donc là, vous avez défini la taille de votre liste en fonction du périphérique sur lequel elle est affichée, tout simplement. Ensuite vous pouvez ajouter une icône donc les icônes badge pour mettre en valeur du contenu de places … donc vous avez votre tire, pour le titre « liste des formations » qui est ici en success, vous pouvez le mettre en primary tout simplement donc ça va changer la couleur du titre avec le contenu en valeur nombre de places restantes ou par exemple liste des articles cliquable avec le nombre de commentaires que vous pouvez mettre ici et vous pouvez transformer votre liste en menu tout simplement, en utilisant le lien a href. Donc là c’est un menu, si vous cliquez forcément là j’ai mis un dièse donc ça va renvoyer nulle part, ça va juste rappeler la page. Donc avec le « places restantes » en valeur grâce au badge. L’entête que vous pouvez changer très simplement avec heading, je ne sais pas si on met warning, je commence à les connaître par cœur aussi voilà ou danger pour mettre en valeur la liste. Donc c’est aussi simple que ça d’utiliser des listes avec le framwork BootStrap.
Votre plan d’actions
Maintenant c’est à vous de jouer, donc à votre tour de créer des sites de plus en plus magnifique donc que bon moi je le précise, je suis pas graphiste, c’est pour ça que les sites les couleurs ne sont pas très bien choisies. En tout cas je vous explique comment utiliser toutes les fonctionnalités CSS du framework BootStrap et après ç’est à vous de travailler avec graphiste ou si vous êtes vous-même graphiste vous avez de la chance ce sera beaucoup plus simple pour créer vos sites et de les rendre, grâce au framework BootStrap 3, compatible quel que soit le périphérique utiliser, les smartphones, les tablettes ou les ordinateurs de bureau. Donc retrouvez sous ce cours vidéo le code source complet, donc vous pouvez le copier-coller et l’utiliser évidemment dans vos applications Web. Si vous avez des questions posez-les directement sous cette vidéo et je vous invite à consulter la deuxième vidéo, c’est-à-dire, à la fin de cette vidéo, il y a un lien qui va apparaître, un lien cliquable, vous cliquez dessus et vous serez redirigés vers la deuxième vidéo et dans la deuxième vidéo vous allez aller beaucoup plus loin avec HTML 5, CSS 3, le framework BootStrap 3. Donc je vous invite à consulter dès maintenant la deuxième vidéo en cliquant sur le lien qui va apparaître pour créer des sites de plus en plus rapidement et qui soit compatible avec la majorité des navigateurs, donc je vous dis, à tout de suite, dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Téléchargez les exemples de listes avec BootStrap 3
Et voici le code source pour créer une liste avec BootStrap 3.
Téléchargement du code source Exemple de listes avec BootStrap 3
Cliquez ici pour télécharger le code source Exemple de listes avec BootStrap 3
Montrez-moi vos listes personnalisées
Utilisez la zone commentaires, pour partager le code source de vos listes personnalisées.