EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            texto tipografia Bootstrap
            Texto, tipografía y colores en Bootstrap 4
            05/12/2019
            bootstrap imagenes
            Imágenes en Bootstrap 4
            06/12/2019

            Tablas en Bootstrap 4

            Tablas Bootstrap

            Tablas Bootstrap

            Tabla de contenidos

            • 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

            1. Tabla básica

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

            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

            Comprueba tu aprendizaje

            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!


            Compartir

            UD7. Plantillas y frameworks de diseño

            • 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

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results