Table bootstrap Exemple de lignes de survol
Cet article décrira:
- Comment faire une table d'amorçage avec des lignes survol?
- Comment ajouter des couleurs personnalisées aux lignes de table sur le plan de survol en bootstrap?
Comment faire une table d'amorçage avec des lignes survol?
Amorcer "de table bordée" et "tireur de table«Les classes sont utilisées pour créer une table bordée avec un effet de survol. Le "tireur de table«La classe a un style d'effet de volants prédéfini avec le«:flotter«Pseudo-classe et« le «Couleur de l'arrière plan«Propriété ayant la valeur»RGBA (0,0,0,.075)".
Exemple
Implémentons-le via un exemple:
- Créez une table en utilisant le HTML "
" étiqueter. Attribuez-le le «tableau","de table bordée", et "tireur de table" Des classes.
- Le "”La balise est utilisée pour mentionner l'en-tête de table.
- Dans l'exemple indiqué ci-dessous, nous faisons le corps de la table en utilisant le «" élément.
- Le "
»Les balises sont utilisées pour créer les lignes de table, le« «Les balises sont pour les titres, et le« »Les balises sont utilisées pour ajouter des données de table. Html
Nom Jake Marguerite Cours L'informatique La physique Pays États-Unis Chine Il est observé à partir du GIF ci-dessous, les lignes de table avec l'effet de survol ont été créées avec succès:
Comment ajouter des couleurs personnalisées aux lignes de table sur le plan de survol en bootstrap?
Vous pouvez également spécifier une couleur de survol en fonction de vos besoins. Pour ce faire, implémentez le code suivant dans la section CSS:
.TABLE-HOVER TBODY tr: Hover
Color en arrière-plan: RGBA (228, 33, 205, 0.075);
Ici:
- Le ".tireur de table"Est la classe.
- "tbody"Est l'élément parent du"
" étiqueter. - Le "TR: Rocher"Est utilisé pour appliquer l'effet de survol au«
" élément. Sortir
De cette façon, la table bootstrap avec l'effet de survol est créée.
Conclusion
La table bootstrap avec l'effet de survol est créée à l'aide du «tireur de table" classe. Cette classe ajoutera l'effet de survol sur les lignes de table avec le «Couleur de l'arrière plan«Propriété ayant la valeur»RGBA (0,0,0,.075)". Cependant, vous pouvez personnaliser la couleur de survol en utilisant CSS. Ce message a décrit comment ajouter l'effet de survol du tableau bootstrap.
l'effet de survol du tableau bootstrap.
- Le "TR: Rocher"Est utilisé pour appliquer l'effet de survol au«