Capítulos
Ejercicios

ico Bootstrap Bootstrap
El estilista de tu HTML

Luis Felipe Ramírez Varela
https://luis.ramirez.cl
luis@ramirez.cl
luisfel

en construcción

Conocimiento requerido
  • html
  • css

¿Qué es Bootstrap?

Historia y versiones de Bootstrap

Ventajas y desventajas de usar Bootstrap

Instalación y configuración

A través de CDN

Descarga e integración local

Estructura básica de un proyecto Bootstrap

Uso de clases de tipografía

Encabezados (h1, h2, ... h6)

Parrafos (<p>) y clases de estilo (lead, text-muted)

Estilos de texto (text-uppercase, text-lowercase, text-capitalize)

Listas (<ul>, <ol>, <dl>)

Enlaces y botones (btn, btn-primary, etc.)

Colores de fondo y de texto

Tablas y sus variantes (table, table-striped, table-bordered)

Fundamentos del sistema de grillas

Contenedores (container, container-fluid)

Filas (row) y columnas (col)

Uso de las clases de grilla

Colocación de columnas (col-, col-sm-, col-md-, col-lg-, col-xl-, col-xxl-)

Alineación y orden de columnas

Grillas anidadas (Nested Grids)

Breakpoints y diseño responsivo

Botones y Grupos de Botones

Tipos de botones

Grupos de botones y botones en bloque

Barras de Navegación (Navbar)

Creación de una barra de navegación básica

Añadir menús desplegables (Dropdowns)

Personalización de la barra de navegación

Formularios

Estructura básica de formularios

Campos de entrada (input, textarea, select)

Validación de formularios con Bootstrap

Alertas y Badges

Crear y personalizar alertas (alert)

Uso de insignias (badge) en textos y botones

Modales (Modal)

Carousels (Carrusel de imágenes)

Tabs y Pestañas (Navs, Tab)

Colapsables y Acordeones (Collapse)

Tooltips y Popovers

Clases de utilidad

Espaciado (margin, padding)

Alineación (align-items, justify-content)

Visibilidad (d-none, d-block, d-inline-block)

Uso de utilidades de color, sombra, y borde

Manipulación de CSS con clases utilitarias

Personalización de Bootstrap

Uso de variables SASS para personalizar temas

Sobrescritura de estilos predeterminados

Creación de temas personalizados

Integración con JavaScript y jQuery

Eventos y métodos JavaScript en Bootstrap

Personalización de los componentes interactivos

Optimización de rendimiento al usar Bootstrap

Buenas prácticas al usar Bootstrap en proyectos

Ejemplos de implementación en proyectos reales

Refactorización y mantenimiento de proyectos en Bootstrap

Bibliografía

Webliografía