EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Tablas en Bootstrap 4

            Tablas Bootstrap

            Tablas Bootstrap

            1. Tabla básica

            Mediante la clase .table le agregamos un estilo básico a nuestra tabla (divisiones horizontales.):

            Contenidos del artículo

            • 1. Tabla básica
            • 2. Tabla con filas en colores alternos
            • 3. Tabla con bordes
            • 4. Tabla con efecto hover
            • 5. Tabla negra / oscura
            • 6. Clases contextuales
            • 7. Colores del encabezado de la tabla
            • 8. Tablas responsive
                • Con la clase .table-striped en una tabla…
                • ¿Cuál es la clase que utilizamos en una tabla responsive?

            Ejemplo:

            default

            2. Tabla con filas en colores alternos

            Con la clase .table-striped agregamos filas con colores alternos:

            Ejemplo:

            default

            3. Tabla con bordes

            La clase .table-bordered agrega bordes en todos los lados de la tabla y celdas:

            Ejemplo

            default

            4. Tabla con efecto hover

            La clase .table-hover agrega un efecto al hacer :hover con el ratón en las filas de la tabla:

            Ejemplo:

            default

            5. Tabla negra / oscura

            La clase .table-dark agrega un fondo negro a la tabla:

            Ejemplo:

            default

            6. Clases contextuales

            Las clases contextuales se pueden usar para colorear toda la tabla ( <table> ), las filas de la tabla ( <tr> ) o las celdas de la tabla ( <td> ).

            Las clases contextuales que se pueden usar son:

            • .table-primary Azul: indica una acción importante.
            • .table-success Verde: Indica una acción exitosa o positiva.
            • .table-danger Rojo: indica una acción peligrosa o potencialmente negativa.
            • .table-info Azul claro: indica un cambio informativo neutral o acción.
            • .table-warning Naranja: indica una advertencia que podría necesitar atención.
            • .table-active Gris: aplica el color de desplazamiento a la fila de la tabla o celda de la tabla.
            • .table-secondary Gris: Indica una acción menos importante.
            • .table-light Fondo gris claro.
            • .table-dark Fondo Gris oscuro.

            Ejemplo:

            default

            7. Colores del encabezado de la tabla

            La clase .thead-dark agrega un fondo negro a los encabezados de la tabla, y la clase .thead-light agrega un fondo gris a los encabezados de la tabla:

            8. Tablas responsive

            La clase .table-responsive crea una tabla responsive: se agrega una barra de desplazamiento horizontal a la tabla en pantallas que tienen menos de 992px de ancho (si es necesario). 

            .table-responsive-sm < 576px
            .table-responsive-md < 768px
            .table-responsive-lg < 992px
            .table-responsive-xl < 1200px

            Con la clase .table-striped en una tabla...

            ¡Bien! ¡Has fallado!

            ¿Cuál es la clase que utilizamos en una tabla responsive?

            ¡Bien! ¡Has fallado!


            Navegación de entradas

            ← Texto, tipografía y colores en Bootstrap 4
            Imágenes en Bootstrap 4 →

            Tutorial BootStrap 4

            • 1. Frameworks de diseño web
            • 2. Cómo descargar e instalar Bootstrap
            • 3. Sistema de columnas y contenedores Bootstrap
            • 4. Texto, tipografía y colores en Bootstrap
            • 5. Tablas en Bootstrap
            • 6. Imágenes en Bootstrap
            • 7. Botones en Bootstrap
            • 8. Componentes de Bootstrap
            • 9. Plantillas y temas gratis para Bootstrap
            • 10. Referencias y recursos

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados