Bootstrap.pdf

Páginas web responsive con BOOTSTRAP  ¿QUÉ ES BOOTSTRAP? Bootstrap es un framework de código abierto para el desarrollo de sitios web y aplicaciones. Proporciona herramientas y componentes listos para usar, facilitando el diseño de páginas web adaptables. ¿POR QUÉ USAR BOOTSTRAP...

Páginas web responsive con BOOTSTRAP  ¿QUÉ ES BOOTSTRAP? Bootstrap es un framework de código abierto para el desarrollo de sitios web y aplicaciones. Proporciona herramientas y componentes listos para usar, facilitando el diseño de páginas web adaptables. ¿POR QUÉ USAR BOOTSTRAP? Bootstrap proporciona una serie de componentes predefinidos, como grillas, botones, formularios y tablas, que ayudan a acelerar el desarrollo y a mantener consistencia en el diseño.  SISTEMA DE GRILLAS Una grilla (o "grid" en inglés) es un sistema que divide la página en filas y columnas para organizar el contenido de manera ordenada y flexible. Este sistema facilita el diseño responsive al permitir que los elementos se ajusten automáticamente según el tamaño de la pantalla. Bootstrap divide cada fila en 12 columnas iguales. Puedes usar una o varias de estas columnas para organizar tu contenido. No importa cuántas columnas uses, siempre deben sumar 12 para completar la fila. ¿CÓMO FUNCIONA EL SISTEMA DE GRILLAS ? Contenedor (container): Mantiene el contenido alineado y centrado en la página. Fila (row): Divide el contenedor en líneas horizontales. Columna (col): Divide las filas en secciones verticales. Con Bootstrap Sin Bootstrap  Las columnas se pueden ajustar automáticamente al tamaño de la pantalla utilizando clases como.col-sm-,.col-md-,.col-lg-. Bootstrap permite que las columnas cambien de tamaño según el tamaño de la pantalla (móvil, tablet, escritorio). Aquí es donde las clases como col-md-6 o col-sm-12 son útiles. col-12: La columna siempre ocupa el 100% del ancho de la fila sin importar el tamaño de la pantalla. col-md-6: La columna ocupa el 100% del ancho en pantallas pequeñas pero reduce a 50% en pantallas medianas y más grandes. col-sm-4: La columna ocupa 100% en pantallas muy pequeñas pero reduce a 33.33% en pantallas pequeñas y más grandes. col-lg-3: La columna ocupa 100% del ancho en pantallas más pequeñas pero cambia a 25% en pantallas grandes y superiores. col-xl-2: Ocupa el 16.66% del ancho de la fila solo en pantallas extra grandes.