Apprenez à créer des tableaux beaucoup plus élégants et ergonomique grâce au framework BootStrap 3.
Vous verrez également les options que vous pouvez rajouter sur vos tableaux BootStrap.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer des tableaux magnifiques avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur Développement Facile.
Encore un nouveau cours consacré au Framework CSS BootStrap 3, et cette fois vous allez apprendre à créer des tableaux, des tableaux beaucoup plus élégants et ergonomiques un peu Web 2.0.
Les tableaux
Vous allez voir, il suffit d’utiliser des classes CSS pour créer l’affichage de votre tableau, c’est aussi simple que ça. Si vous connaissez le langage HTML, un tableau se déclare avec la balise table, excusez-moi pour la faute d’orthographe sur le mot avec il manque le C.
Et vous avez l’entête de la balise, il suffit d’utiliser thead et le contenu de la balise avec tbody. Pour utiliser la mise en forme proposée par le framework BootStrap, vous avez la classe CSS table que vous ajoutez, que vous appelez dans la balise table, c’est aussi simple que ça. La classe table affiche les éléments du tableau par défaut avec un padding avec un espacement de huit pixels, si vous souhaitez réduire l’espacement parce que votre site va s’afficher sur un smartphone, sur un petit écran, vous pouvez utiliser spécifier la classe.table-condensed le padding va être réduit à cinq pixels au lieu de huit.
Vous pouvez également ajouter des bordures sur votre tableau, pour cela, il suffit d’utiliser la classe table–bordered. Donc votre tableau avec la classe table, l’entête avec la balise thead et le contenu avec la balise tbody pour créer votre tableau et vous utilisez les classes CSS pour la mise en forme.
Les tableaux – les options
Là vous allez apprendre les différentes options, si votre tableau contient plusieurs lignes c’est très intéressant d’afficher une ligne sur deux d’une couleur différente, avec par exemple un fond grisé, un fond blanc, un fond grisé, un fond blanc, c’est très pratique quand on a plusieurs lignes, et bien vous avez une classe CSS pour ça, vous avez aussi une classe CSS lorsque vous survolez les éléments de votre tableau, vous pouvez utiliser la classe CSS table-hover, ça va les mettre en surbrillance, vous avez deux options, un pour mettre un fond de couleur différent une ligne sur deux, et une autre pour changer la couleur lorsque l’utilisateur passe au-dessus d’un élément.
Vous avez les fameuses classes active, success, warning et danger que vous connaissez par cœur, vous l’avez vu avec panel, avec tooltip, alert, etc. donc ça va vous permettre de mettre en avant les lignes d’un tableau, soit vous pouvez mettre en avant la ligne complète d’un tableau, soit un seul élément dans le tableau, il suffit de rajouter cette classe CSS au niveau de la balise tr pour modifier la ligne complète, la faire ressortir, ou au niveau de la balise td, pour faire ressortir seulement un seul élément.
Et vous avez aussi la classe table-responsive ça c’est à vous de voir ça peut être très utile lorsque vous avez un tableau avec énormément de colonnes et vous ne voulez pas qu’il soit réduits sur un Smartphone, si vous utilisez la classe table-responsive, ça va ajouter des barres de défilement en haut et en bas, au lieu d’écraser votre tableau qu’il soit illisible, il va rester bien lisible sur un smartphone ou une tablette et il y aura des barres de défilements que l’utilisateur pourra se servir, justement, pour voir le contenu de votre tableau.
Exemple d’application
On passe ensemble à un exemple de code source, comme ça vous allez voir un peu ce que ça donne visuellement.
Ca on n’en a pas besoin, je le supprime on ne va pas utiliser jQuery, vous définissez le nombre de colonnes que votre tableau va occuper, 12 pour les smartphones, 10 sur les tablettes, 6 pour les ordinateurs de bureau, ordinateur de bureau, tablette, smartphone, on va se mettre en mode smartphone, la balise table, pour définir votre tableau avec les options pour la bordure du tableau, strip c’est pour l’arrière-plan qui change une ligne sur deux, vous avez vu ici, une ligne sur deux, over lorsque l’on passe au-dessus du tableau over, j’ai créé un deuxième tableau avec des options différentes, c’est pour ça que le survol ne fonctionne pas dans le deuxième, ça fonctionne dans le premier avec une ligne sur deux qui change de couleurs, et voilà, pour l’entête du tableau ce sera surement le type de colonnes dans vos tableaux que vous allez créer, identifiant formations, durée et le contenu à chaque fois un élément, success pour mettre en valeur une ligne complète ou sinon dans le deuxième tableau qui est condensé avec un padding de cinq pixels au lieu de huit comme il y a ici, vous pouvez, sur juste JavaScript montrer l’élément actif, mettre une zone de danger sur une ligne complète ou alors mettre un warning uniquement sur un seul élément, là, un seul élément est mis en warning, il est activé, une ligne complète, il est en danger, une ligne complète, il est en succès, je peux très bien rajouter sur un seul élément, par exemple, le CSS, facile, je mets la classe success vous allez voir CSS facile qui change de fond.
Votre plan d’actions !
Ça devient un jeu d’enfant maintenant de créer des tableaux qui s’affichent correctement quel que soit le navigateur, sur les Smartphones, les tablettes, et les ordinateurs de bureau. Vous retrouverez sous cette vidéo le code source, que vous pouvez bien évidemment réutiliser dans vos sites Internet, si vous avez des questions posez-les également sous ce cours vidéo et je vous invite dès maintenant à consulter la deuxième vidéo, dans la deuxième vidéo, vous allez aller plus loin, avec le framework BootStrap 3, avec HTML 5, avec CSS 3. A la fin de cette vidéo il y a un lien qui va apparaitre, la vidéo va devenir cliquable, vous cliquez sur cette vidéo, à la fin, et vous serez automatiquement redirigés vers la deuxième vidéo ou vous allez apprendre énormément de choses avec le framework BootStrap 3, HTML 5 et CSS3, je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Téléchargez l’exemple de tableau BootStrap 3
Retrouvez le code source commenté de l’implémentation des tableaux avec BootStrap 3
Téléchargement du code source Exemple de tableau BootStrap 3
