article(s) dans votre panier VOIR

Styliser vos tableaux

  • Vidéo 9 sur 23
  • 2h58 de formation
  • 23 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Styliser vos tableaux
00:00 / 07:10
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Détails de la formation

Dans cette vidéo, le formateur expert vous apprend comment styliser vos tableaux avec Bootstrap. L’objectif est de personnaliser non seulement le contenu mais aussi l’ensemble d’un tableau. Pour ce faire, vous ajoutez un tableau sur une page en choisissant d’abord le nombre de colonnes. Le réglage du nombre des colonnes se fait à l’aide des balises à inscrire dans les codes de Bootstrap. A l’intérieur de ses balises, vous mettez les éléments pour remplir les colonnes. Après sauvegarde, le tableau apparaît sur votre page avec les colonnes contenant les éléments inscrits depuis les balises. Pour styliser ce tableau, vous utilisez les Classes prédéfinies par Bootstrap. Vous choisissez simplement les styles à appliquer sur votre tableau, comme ajouter une bordure pour les colonnes, mettre en avant une case, valoriser une ligne en surbrillance ou ajouter une animation sur chaque élément. Afin d’effectuer tous ces styles, vous avez besoin de retourner dans les codes et d’ajouter la classe nécessaire pour chaque style. De ce fait, vous constatez que le tableau a subi plusieurs styles. Les colonnes sont encadrées, la case choisie est mise en valeur, la ligne se distingue des autres par une autre couleur et chaque fois que le curseur passe sur un élément, il se met en brillance. Afin d’affiner encore plus ces styles, vous pouvez redimensionner la page. Ainsi, les colonnes diminuent et le tableau est rétréci par défaut. Pour régler cette taille, il vaut mieux créer une nouvelle Classe dans laquelle vous regroupez toutes les Classes récemment inscrites sur les codes. Dorénavant, le tableau est remis en bloc et un Scroll de défilement permet de visualiser son intégralité. En conclusion, votre tableau est facile à lire. Les éléments qui le contiennent sont parfaitement distincts.