Comment créer des listes magnifiques avec le Framework BootStrap 3

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Apprenez à créer des listes très ergonomiques et même des menus de navigations grâces aux listes de BootStrap 3.

C’est bien sûr la suite du cours précédent sur les listes, où vous allez découvrir d’autres possibilités d’utilisation avec le framework BootStrap 3.

Tout est dans la formation ci-dessous.

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

Comment créer des listes magnifiques avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur développement facile. Donc dans le cours précédent vous avez découvert les listes et comment avec le Framework BootStrap 3, ça vous permet d’afficher des listes très ergonomiques, un petit peu Web 2.0 ou même de créer des menu de navigation grâce à des listes et de rajouter certains éléments de les mettre en valeur directement dans les listes. Et donc pour les listes il y a énormément de possibilités avec le Framework BootStrap 3. On passe à la deuxième partie où vous allez voir d’autres possibilités d’utilisation avec les listes.

Les listes avec contenu HTML complexe

Grâce aux listes vous pouvez créer insérer dans les listes du contenus HTML beaucoup plus complexes pour reproduire la mise en forme qu’il y a dans les blocs, tout simplement. Donc vous avez la classe list-group-item-heading qui va permettre de mettre un titre, vous  créez une balise div, vous mettez cette classe list-group-item-heading, ça va vous créer le titre de votre liste, tout simplement. Bien évidemment je vous montrerais un exemple de code source à la fin de ce cours avec le résultat visuel.

Les listes avec media object

Vous avez les médias objects, je ne sais pas si vous connaissez les médias objects. Les médias objects ça permet de créer des listes avec la possibilité d’inclure tout type d’éléments, vous pouvez inclure des vidéos, des fichiers audio, des images, et donc là il faut utiliser la classe média justement pour créer un média object.

Exemple d’application

Donc on voit tout ça en application à travers un code source. Donc vous avez le résultat juste en dessous. Rappelez-vous la classe list-group-item-heading en h4 « Formation ActionScript », « Formation PHP », list-group-item-text donc vous avez votre texte en dessous. Après c’est des liste cliquable, j’ai fait des listes cliquable semaine parce que c’est une balise a. Par exemple si je change en div ici, la première n’est pas cliquable, elle a la même mise en forme que les autres, mais elle n’est pas cliquable, et les autres sont cliquable, tout simplement. Donc ça c’est le premier exemple pour créer des listes un peu plus complexes et vous avez le deuxième exemple avec les médias objects. Comment ça marche ? Vous avez un lien href qui renvoie sur développement facile une icône, donc la classe média, on définit notre média object avec une icône, on aurait pu mettre bien évidemment une vidéo, comme je vous l’ai dit.  Ensuite le corps du média object avec du texte et un titre ici, là on n’a pas mis le lien par exemple, mais on aurait pu mettre un lien aussi sur tout le contenu de la liste, il suffit de réutiliser ce même principe de fonctionnement avec les liens et de prendre en compte tout votre contenu donc là il y aurait un lien pour prendre en compte tout votre contenu avec une balise a. Et ensuite vous mettez plusieurs éléments donc là je vais rajouter un petit commentaire deuxième élément de la liste. Enfin c’est pas vraiment une liste c’est une pseudo liste, il faudrait juste mettre deuxième élément, le corps, le titre et le contenu « Les Formations Développement Facile » ou les formation … oui c’est vrai que j’ai mis le même mot clé, on peut changer pour différencier les deux items donc là, y’a pas de lien, là y’a des lien, et là 2 items différents avec un clique sur l’icône, et donc ça s’affiche en fonction du périphérique de la même façon c’est géré tout simplement.

Votre plan d’actions

Donc là on a fait le tour avec les listes. Vous avez de quoi faire pour créer des listes plus ou moins complexe avec du contenu HTML, des images, des vidéos, des fichiers audio, tout ce qui est nécessaire pour créer un site Internet Web 2.0. Comme d’habitude vous trouverez le code source disponible sous ce cours vidéo. Vous pouvez également me poser toutes vos questions si vous avez des difficultés à utiliser telle ou telle fonctionnalité en rapport avec ce cours bien évidemment si vous posez une question Ajax sur le cours sur BootStrap, je vous renverrais au cours gratuit et donc à la formation gratuite Ajax. Et maintenant je vous invite à consulter la deuxième vidéo. A la fin de cette vidéo y’a un lien, la vidéo va se transformer en lien, il suffira de cliquer sur ce lien et vous serez redirigés vers la deuxième vidéo pour aller beaucoup plus loin avec BootStrap 3, HTML 5, CSS 3. Donc je vous invite à cliquer sur le lien à la fin de cette vidéo et on se retrouve tout de suite dans la deuxième vidéo donc à tout de suite.

[/ppmtoggle]

[/ppmaccordion]

Téléchargez l’exemple d’utilisation des listes avec BootStrap 3

Et voici le code source pour voir ce que vous pouvez faire avec une liste et le framework BootStrap 3.

Downloads

  • Exemple de liste avec BootStrap 3
    Exemple de liste avec BootStrap 3

    Code source commenté pour réaliser de magnifiques listes personnalisées avec BootStrap 3
    Ce fichier contient également le Framework BootStrap version 3.2.0, jQuery version 1.10.2 et Font Awesome version 4.1.0

Partagez vos listes menus

Utilisez la zone commentaires, pour partager le code source de vos listes/menus personnalisées.

 

Créez des Sites Web Magnifiques avec la Formation Gratuite CSS3 Facile !

Apprenez comment utiliser les nouveautés de CSS3, les balises supplémentaires, la gestion simplifiée des blocs div...