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
            bootstrap imagenes
            Imágenes en Bootstrap 4
            06/12/2019
            componentes de bootstrap
            Componentes de Bootstrap 4
            06/12/2019

            Botones en Bootstrap 4

            bootstrap botones

            Tabla de contenidos

            • 1. Estilos de botones
            • 2. Botones con contorno
            • 3. Botones y sus tamaños
            • 4. Botones activados y desactivados
            • 5. Grupos de botones
            • 6. Botones desplegables o dropdown

            1. Estilos de botones

            Bootstrap 4 nos ofrece diferentes clases para darle estilo a nuestros botones: btn, btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger, btn-dark, btn-light y btn btn-link.

            En primer lugar debemos incluir la clase btn y después podemos combinarla con el resto de clases. Las clases de botón se pueden usar sobre enlaces, botones o inputs.

            Ejemplo:

            Sdefault

            2. Botones con contorno

            Tenemos también clases para darle contorno a los botones: btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-info, btn-outline-warning, btn-outline-danger, btn-outline-dark y btn-outline-light.

            Ejemplo:

            default

            3. Botones y sus tamaños

            Disponemos de diferentes clases para definir el tamaño de los botones: btn-sm, btn-lg y btn-block.

            Ejemplo:

            default

            4. Botones activados y desactivados

            Para que un botón aparezca activado o desactivado utilizamos las siguientes clases: .active y .disabled. Se pueden usar para botones, inputs y enlaces.

            Ejemplo:

            default

            5. Grupos de botones

            Para hacer grupos de botones de forma horizontal utilizamos la clase .btn-group y de forma vertical utililzamos la clase .btn-group-vertical.

            Ejemplo:

            default

            6. Botones desplegables o dropdown

            Podemos hacer botones desplegables utilizando la etiqueta <button>, las clases anteriormente vistas e incluyendo nuevos componentes.

            • Botones desplegables: https://getbootstrap.com/docs/4.4/components/dropdowns/

            Comprueba tu aprendizaje

            ¿Con qué clase indicamos que el botón ocupe el tamaño horizontal de su contenedor padre?

            ¡Bien! ¡Has fallado!

            ¿Qué clase utilizamos para hacer un grupo de botones de forma vertical?

            ¡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