Clases de tablas en Bootstrap 5 | Explicado
Tablas con un estilo básico
Con el fin de dar tablas, un estilo básico que tiene un cierto relleno y divisores horizontales usan el .mesa clase. Aquí hay una demostración de una tabla básica.
Cómo crear una tabla simple usando Bootstrap 5
Supongamos que desea generar una tabla simple, entonces así es como se hace.
Html
| Nombre del autor | Categoría | Artículos publicados |
|---|---|---|
| Max William | Ciencias de la Computación | 267 |
| Ana James | Física | 100 |
| Harry Robertson | Biología | 150 |
En el código anterior, estamos colocando la tabla dentro de un contenedor Div y luego para generar la tabla, estamos usando el
| , | Para crear la mesa. Producción La mesa recibió un estilo simple. Mesa con borde Para agregar un borde a su mesa, debe usar el .bordado clase. Cómo crear una mesa con borde Creemos una mesa con un borde. Html
La tabla generada aquí es la misma que la que se creó anteriormente con la única diferencia que aquí, además de darle un estilo básico, también estamos agregando bordes usando el .clase bordada de mesa. Producción Las fronteras se agregaron con éxito a la mesa. Mesa sin bordes Otra cosa interesante que puedes hacer usando Bootstrap 5 es hacer tablas completamente sin fronteras y para hacerlo tienes que usar el .sin borde clase. Cómo crear una mesa sin fronteras en Bootstrap 5 Así es como se genera una mesa sin fronteras. Html
El código anterior generará una tabla sin fronteras que tenga un estilo básico I.mi. Tendrá un cierto relleno y divisores horizontales, pero no tendrá fronteras. Producción La clase funciona correctamente. Mesa con filas a rayas Para embellecer su mesa generando filas despojadas, use las .rayado clase. Cómo crear una mesa con filas a rayas Para comprender el funcionamiento de esta clase, consulte el siguiente ejemplo. Html
El código anterior generará una tabla que tenga un estilo básico y filas a rayas. Producción Se generó una mesa con filas a rayas con éxito. Mesa holgadora Si desea darle el estado de flotas de sus filas, use .ratero de la mesa clase. Cuando el usuario trae el mouse sobre las filas, se generará un efecto flotante con un color de fondo gris. Cómo crear una mesa rolable Creemos una mesa rolable. Html
Usando el fragmento de código anterior, puede generar fácilmente una tabla de estilo simplemente con filas que tienen un efecto de desplazamiento. Producción Hemos generado una mesa rolable. Mesa con filas de colores También puede agregar varios colores a varias filas en una tabla utilizando las clases de color proporcionadas por Bootstrap 5. Cómo crear una mesa de filas de color en Bootstrap 5 Supongamos que desea darle a cada fila un color diferente y luego siga el ejemplo a continuación. Html
En el código anterior, en primer lugar, estamos dando un fondo oscuro a la cabeza de la tabla y luego a cada una de las otras filas se les ha asignado un color diferente. Producción Una mesa con filas de color se generó con éxito. Todas las clases de tabla asociadas con colores en Bootstrap 5 se dan a continuación.
Tablas receptivas Con el fin de crear tablas receptivas que corresponden al ancho de la pantalla y alterar su tamaño en consecuencia, use el .sensible a la mesa clase. Cómo crear una tabla receptiva usando Bootstrap 5 Supongamos que desea crear una tabla receptiva para su página web. Html
En el código anterior, para demostrar el concepto de capacidad de respuesta, hemos agregado más filas. Junto con esto, también hemos generado un contenedor DIV adicional y lo asignamos el .clase de respuesta. Además, la mesa tiene un estilo básico. Producción La clase funciona correctamente. A continuación se proporcionan varias clases que agregan capacidad de respuesta a las tablas dependiendo del ancho de la pantalla. 1 ... Table sensible a SM Para ancho de pantalla menos de 576px. 2 ... Table respondiendo-MD Para ancho de pantalla inferior a 768px. 3 ... Table sensible a LG Para ancho de pantalla menos de 992px. 4 ... Table respondiendo-XL Para ancho de pantalla menos de 1200px. 5 ... Table respondiendo-xxl Para ancho de pantalla menos de 1400px. Conclusión Las clases de mesa en Bootstrap 5 le permiten diseñar tablas de una manera muy fácil y rápida. Usando estas clases, puede darle a las tablas algunos acolchados, divisores horizontales, colores, borde, estado de desplazamiento, etc. Además, también puede hacer que sus tablas respondan utilizando las clases asociadas con tablas en Bootstrap 5. Se han discutido todas las clases de tabla junto con ejemplos relevantes en este informe.
|
|---|