La suite du cours précédent sur la création de tableaux avec BootStrap 3.
Ici vous allez apprendre une mise forme un peu plus évoluée de vos tableaux.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique de création de tableaux avancés avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur Développement Facile.
Dans le cours précédent, vous avez appris à utiliser les tableaux, leurs mise en forme avec BootStrap 3, là vous allez découvrir dans ce cours, les tableaux « avancés » bien vous allez mettre une mise en forme un peu plus évoluée dans vos tableaux, vous allez voir c’’est aussi très simple.
Les tableaux avancés
Toujours avec le jeu de classe CSS et de panel, rappelez-vous le panel que vous avez vu dans les cours précédents, vous allez le réutiliser ici, comme je vous l’ai dit, une balise div avec la classe panel, un entête avec la classe panel-heading pour le titre, votre contenu avec panel-body, toujours la classe CSS, et le pied de page avec la classe panel-footer.
Dans chaque élément, l’entête, le contenu, le pied de page, vous pouvez mettre votre contenu HTML, soit un tableau, soit une image, soit mélanger les deux, c’est ce que vous allez voir dans l’exemple un mélange des deux.
Les tableaux avancés – les options
Vous pouvez également utiliser les fameuses classes informatives de BootStrap 3 que vous avez commencé à connaitre par cœur, primary bleu, success vert, info bleu clair, warning orange, et danger rouge. C’est une nouvelle zone de tableau avancée peut vous proposer uniquement des tableaux ou alors, ou et, tout type de contenu HTML, des balises HTML.
Je ne vais pas résumer, je vous renvoie au cours précédent c’est exactement les mêmes options que le tableau simple, elle s’applique les options des tableaux simples, aux tableaux compliqués donc ça permet, ça ne sert à rien que je répète deux fois la même vidéo, je préfère vous montrer tout de suite l’exemple de code source.
Exemple d’application
Alors vous voyez, là j’ai mis une mise en forme pour les smartphones sur huit colonnes pour le premier tableau, et le deuxième tableau, sur quatre colonnes, les tablettes sur trois colonnes pour le petit tableau ici et le grand tableau sur neuf colonnes, et les ordinateurs de bureaux sept colonnes le grand tableau et cinq le petit tableau. Vous avez votre tableau évolué, on a dit qu’on utilisait la classe panel, vous définissez une div qui englobe tout juste ici, avec panel-defaut et après vous avez le haut du tableau en primary par exemple, on peut mettre en danger si on veut, panel-danger, la couleur change au niveau du tableau. Moi je préfère primary je remets primary, c’est le titre du tableau, ensuite vous avez votre contenu, vous pouvez rajouter votre tableau juste en dessous, un tableau complet et encore le bas du tableau, vous pouvez mettre des éléments, des liens pour informer les utilisateurs.
Là, j’ai fait un tableau comme ça, ça vous montre le type widget, en haut du petit tableau avec du gras, son contenu, et le bas, ordinateur de bureau ça s’affiche comme ça, on réduit, tablette, et on passe sur un smartphone, ou alors vous avez, il suffit de regarder, là c’est l’entête, il suffit de supprimer l’entête, c’est ce que j’ai fait, j’ai supprimé l’entête ici, pour mettre uniquement le haut du tableau, donc afficher beaucoup plus discrètement avec le tableau directement avec les systèmes de une ligne sur deux qui changent de couleur, le roll hover au-dessus lorsque la souris passe au-dessus des éléments, ça c’est pris en compte grâce table-hover, table-striped, table-bordered pour la bordure et vous avez votre tableau directement.
J’ai également supprimé le bas du tableau, vous avez vu il n’y a pas de panel footer, il y a juste le panel-heading, le tableau, directement le tableau. Vous avez vu vous pouvez mettre des images, si vous souhaitez, donc soit vous faites un tableau de ce type-là, où un tableau un peu plus sympa avec un haut mieux dessiné, un titre, un paragraphe, ou alors un petit widget là, vous pouvez mettre votre image comme sur les blogs finalement.
Votre plan d’actions !
Maintenant c’est à vous de jouer, à vous d’utiliser le framework BootStrap3 pour créer des sites Web qui soit compatibles à la fois sur les Smartphones, les tablettes, les ordinateurs de bureau, des sites Internet qui soient lisibles et qui s’affichent correctement quelques soit le navigateur Chrome, Internet Explorer, Firefox, safari, etc.
Vous retrouverez le code source sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo, et je vous invite dès maintenant à regarder la deuxième vidéo, à la fin de cette vidéo, il y a un lien qui apparaît et cette vidéo va se transformer en lien cliquable, vous pourrez cliquer sur la vidéo au lieu de mettre la vidéo en pause à la fin de cette vidéo, ça va vous renvoyer automatiquement vers la deuxième vidéo, et qu’est-ce que vous allez découvrir dans la deuxième vidéo ?
Vous allez apprendre dans le détail le framework BootStrap 3, les nouveautés HTML 5, les nouvelles balises CSS 3, vous allez tout savoir à travers une multitude d’exemples, on se retrouve tout de suite dans la deuxième vidéo, je vous dis à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Exemple de mise en forme évoluée de tableaux avec BootStrap 3
Retrouvez le code source commenté de la mise en forme avancée d’un tableau avec BootStrap 3
Téléchargement du code source Exemple de tableau avancé BootStrap 3
Cliquez ici pour télécharger le code source Exemple de tableau avancé BootStrap 3
Allez vous utiliser BootStrap 3 dans vos applications Web ?
Utilisez la zone commentaire pour nous donner votre avis sur le Framework BootStrap 3