¿Qué es Bootstrap?
Bootstrap es un marco de trabajo de código abierto utilizado para desarrollar sitios web de forma más rápida. Incluye estilos CSS, componentes prediseñados y herramientas de JavaScript.
Su sistema de grilla permite organizar el contenido en filas y columnas que se adaptan a diferentes tamaños de pantalla. Entre sus componentes se encuentran botones, barras de navegación, alertas y formularios.
Breve evolución
- 2011: se publica la primera versión.
- 2013: Bootstrap 3 adopta el diseño móvil primero.
- 2018: Bootstrap 4 incorpora Flexbox.
- 2021: Bootstrap 5 elimina la dependencia de jQuery.
Ventajas e inconvenientes
Ventajas
- Permite desarrollar interfaces rápidamente.
- Facilita el diseño adaptable.
- Incluye muchos componentes listos para usar.
- Tiene buena documentación y una comunidad amplia.
- Es compatible con los navegadores modernos.
Inconvenientes
- Los sitios pueden verse similares si no se personalizan.
- Puede agregar estilos que el proyecto no necesita.
- El HTML puede contener muchas clases.
- Es necesario aprender su sistema de grilla.
- Una personalización profunda requiere CSS adicional.
Configuración inicial
Para comenzar un proyecto se necesitan dos archivos de Bootstrap:
- La hoja de estilos, que se encarga de la apariencia de la página.
- El archivo JavaScript, que permite utilizar elementos interactivos como el menú desplegable.
Ambos archivos pueden enlazarse desde Internet, por lo que no es necesario descargarlos para realizar una página sencilla.
Diseño móvil primero y adaptable
¿Qué significa diseñar primero para móviles?
Significa que el diseño se piensa primero para pantallas pequeñas. Luego se agregan cambios para tabletas, computadoras portátiles y monitores.
Bootstrap permite que las filas, columnas, textos y menús se acomoden automáticamente según el tamaño de la pantalla.
¿Qué es el área visible?
Es la parte de una página que se muestra dentro del navegador. En un celular, corresponde aproximadamente al ancho de la pantalla.
La configuración del área visible hace que la página use el ancho real del dispositivo y se muestre con un tamaño adecuado desde el primer momento.
Presentación
A continuación se puede consultar la presentación utilizada para complementar los contenidos de la actividad.