Cómo cambiar el color de fondo de las filas de tabla o las celdas individuales en Bootstrap
En Bootstrap, las clases predefinidas se utilizan para agregar varios estilo a los elementos. Estas clases ayudan a los desarrolladores a crear sitios web receptivos y visualmente atractivos. Más específicamente, las tablas de estilo son una de las características valiosas de Bootstrap. Mientras trabaja con tablas, una tarea común es cambiar el color de fondo de las filas o las celdas individuales.
Este artículo describirá:
-
- Cómo crear una mesa de arranque?
- Cómo modificar el color de fondo de las filas de tabla en Bootstrap?
- Cómo cambiar el color de una celda de tabla individual en Bootstrap?
Cómo crear una mesa de arranque?
Para crear una tabla en Bootstrap, pruebe los siguientes pasos:
-
- Primero, agregue un ""Elemento para hacer una mesa. Asignarlo el "mesa","bordado" y "ratero de la mesa"Clases.
- Luego, para especificar el encabezado de la tabla, use el ""Etiqueta, que consiste en"
"Elemento, que consiste en el""Para la fila y el"" etiqueta.- Para establecer el color de la celda de tabla específico, especifique una clase para ese particular "
"Etiquetas para especificar los encabezados. - Después de la parte del encabezado, cree la parte del cuerpo usando el "
" parte. Html
S No. Nombres de estudiantes Curso 1 Sido una Sistemas operativos 2 Casar Programación orientada a objetos 3 Linda Sistemas informáticos 4 Péter Diseño grafico
Como puede ver, la tabla Bootstrap se ha creado con éxito:Cómo modificar el color de las filas de la tabla en bootstrap?
Las clases predefinidas se utilizan para cambiar la tabla o los colores de la fila como se explica a continuación:
Clases Descripción "primaria" Esta clase se utiliza para indicar acción vital. Agrega un color azul a los elementos de la mesa. "amenazador" Esta clase se usa para representar la acción negativa. Aplica un color rojo a los elementos de la mesa. "tesor" Muestra la acción positiva y aplica el color verde a los elementos de la mesa. "advertencia de mesa" Muestra advertencias que requieren algo de acción y agrega un color amarillo a los componentes de la tabla. "defensa de la mesa" Esta clase agrega color blanco a los componentes de la tabla y se usa para mostrar la fila que se selecciona. "mesa" Aplica un color grisáceo a los elementos de la tabla e indica las actividades menos importantes. "de la tabla activa" Aplica el color gris a los componentes de la tabla en el flotador. "info de la mesa" Aplica un color azul claro para indicar una acción informativa neutral. "oscuro" Se utiliza para crear una mesa gris oscuro. "luminoso" Agrega color gris y se usa para especificar el fondo de la fila de la tabla.
EjemploImplementemos cada clase a las filas de la tabla:
S No. Clase de arranque 1 primaria 2 amenazador 3 tesor 4 advertencia de mesa 5 defensa de la mesa 6 mesa 8 info de la mesa 7 de la tabla activa 9 oscuro 10 luminoso
ProducciónCómo modificar el color de las células individuales en Bootstrap?
Para cambiar el color de las celdas individuales, se pueden utilizar varias clases, como:
-
- "BG-Info"Significa una acción informativa neutral y agrega un color azul.
- "BG-Primary"Representa la acción positiva y aplica un color azul.
- "BG-Danger"Indica la acción peligrosa y agrega un color rojo.
- "BG-WARNING"Se utiliza para agregar un color amarillo e indica un mensaje de advertencia.
- "bisco"Indica una acción positiva.
Para ajustar el color de la celda individual, agregue la clase requerida a la celda de datos específica "<TD>". Mira el ejemplo que demuestra la explicación discutida anteriormente.
Ejemplo: Cambiar el color de una celda de tabla específica en Bootstrap
En el siguiente ejemplo:
-
- Para cambiar el color de la fila de la tabla, especifique la clase dentro del "
" elemento: S No. Nombres de estudiantes Curso 1 Sido una Sistemas operativos 2 Casar Programación orientada a objetos 3 Linda Sistemas informáticos 4 Péter Diseño grafico
Producción
Se trataba de cambiar el color de fondo de las filas de tabla o las celdas individuales en Bootstrap.Conclusión
Para cambiar el color de fondo de las filas de tabla, el "ratero de la mesaLa clase se puede usar. Se pueden usar varias clases para especificar el color de fondo de la fila, como "amenazador","advertencia de mesa","oscuro","primaria", y muchos más. Más específicamente, para cambiar el color celular de la tabla específica, múltiples clases, como "BG-Danger","bisco", y "BG-InfoSe utilizan. Este artículo ha explicado cómo cambiar el color de fondo de las filas de la tabla o las celdas individuales en Bootstrap.
- « Cómo encontrar el antepasado común más reciente de dos ramas?
- Cómo asignar una cadena de múltiples líneas en la consola PowerShell »
slide 4 to 8 of 10
- Primero, agregue un ""Elemento para hacer una mesa. Asignarlo el "mesa","bordado" y "ratero de la mesa"Clases.