Comment changer la couleur d'arrière-plan des lignes de table ou des cellules individuelles dans Bootstrap
Dans Bootstrap, les classes prédéfinies sont utilisées pour ajouter divers style aux éléments. Ces classes aident les développeurs à créer des sites Web réactifs et visuellement attrayants. Plus précisément, les tables de style sont l'une des précieuses caractéristiques de Bootstrap. Tout en travaillant avec des tables, une tâche commune consiste à modifier la couleur d'arrière-plan des lignes ou des cellules individuelles.
Cet article décrira:
-
- Comment créer une table d'amorçage?
- Comment modifier la couleur d'arrière-plan des lignes de table en bootstrap?
- Comment changer la couleur d'une cellule de table individuelle en bootstrap?
Comment créer une table d'amorçage?
Pour créer une table en bootstrap, essayez les étapes suivantes:
-
- Tout d'abord, ajoutez un "”Élément pour faire une table. Attribuez-le le «tableau","de table bordée" et "tireur de table" Des classes.
- Ensuite, pour spécifier l'en-tête de la table, utilisez le ««Tag, qui se compose de«
«Élément, qui se compose du«"Pour la ligne et le"" étiqueter.- Pour définir la couleur de la cellule de table spécifique, spécifiez une classe pour ce particulier «
»Tags pour spécifier les titres. - Après la partie d'en-tête, créez la partie du corps en utilisant le «
" partie. Html
S non. Noms des étudiants Cours 1 A été un Systèmes d'exploitation 2 Marier Programmation orientée objet 3 Linda Systèmes informatiques 4 Pierre Conception graphique
Comme vous pouvez le voir, la table bootstrap a été créée avec succès:Comment modifier la couleur des lignes de table en bootstrap?
Les classes prédéfinies sont utilisées pour modifier les couleurs de table ou de ligne comme expliqué ci-dessous:
Des classes Description "Table-primaire" Cette classe est utilisée pour indiquer une action vitale. Il ajoute une couleur bleue aux éléments de la table. "danger de table" Cette classe est utilisée pour représenter l'action négative. Il applique une couleur rouge aux éléments de la table. "succès de table" Il montre l'action positive et applique la couleur verte aux éléments de la table. "avalage de table" Il affiche des avertissements qui nécessitent une certaine action et ajoute une couleur jaune aux composants de la table. "défaut de table" Cette classe ajoute de la couleur blanche aux composants de la table et est utilisé pour afficher la ligne sélectionnée. "table-seconde" Il applique une couleur grisâtre aux éléments de la table et indique les activités moins importantes. "actif" Il applique une couleur grise aux composants de la table sur volant. "table de table" Il applique une couleur bleu clair pour indiquer une action informative neutre. "noir de table" Il est utilisé pour créer une table gris foncé. "lumière de table" Il ajoute de la couleur grise et est utilisé pour spécifier l'arrière-plan de la ligne de table.
ExempleImplémentons chaque classe aux lignes de table:
S non. Classe bootstrap 1 Table-primaire 2 danger de table 3 succès de table 4 avalage de table 5 défaut de table 6 table-seconde 8 table de table 7 actif 9 noir de table dix lumière de table
SortirComment modifier la couleur des cellules individuelles dans bootstrap?
Pour changer la couleur des cellules individuelles, plusieurs classes peuvent être utilisées, comme:
-
- "bg-info»Signifie une action informative neutre et ajoute une couleur bleue.
- "bg-primaire»Représente l'action positive et applique une couleur bleue.
- "bg-danger"Indique l'action dangereuse et ajoute une couleur rouge.
- "bg"Est utilisé pour ajouter une couleur jaune et indique un message d'avertissement.
- "bg-succès»Indique une action positive.
Pour ajuster la couleur de la cellule individuelle, ajoutez la classe requise à la cellule de données spécifique "<td>". Consultez l'exemple qui démontre l'explication à la défense ci-dessus.
Exemple: Modification de la couleur d'une cellule de table spécifique dans Bootstrap
Dans l'exemple suivant:
-
- Pour modifier la couleur de la ligne de table, spécifiez la classe dans le «
" élément: S non. Noms des étudiants Cours 1 A été un Systèmes d'exploitation 2 Marier Programmation orientée objet 3 Linda Systèmes informatiques 4 Pierre Conception graphique
Sortir
Il s'agissait de modifier la couleur d'arrière-plan des rangées de table ou des cellules individuelles dans Bootstrap.Conclusion
Pour changer la couleur d'arrière-plan des lignes de table, le «tireur de table"La classe peut être utilisée. Plusieurs classes peuvent être utilisées pour spécifier la couleur d'arrière-plan de la ligne, comme «danger de table","avalage de table","noir de table","Table-primaire", et beaucoup plus. Plus précisément, pour modifier la couleur cellulaire de la table spécifique, plusieurs classes, telles que «bg-danger","bg-succès", et "bg-info"Sont utilisés. Cet article a expliqué comment changer la couleur d'arrière-plan des lignes de table ou des cellules individuelles dans Bootstrap.
- « Comment trouver l'ancêtre commun le plus récent de deux branches?
- Comment affecter plusieurs lignes de chaîne dans la console PowerShell »
slide 4 to 8 of 10
- Tout d'abord, ajoutez un "”Élément pour faire une table. Attribuez-le le «tableau","de table bordée" et "tireur de table" Des classes.