Este documento proporciona una guía detallada sobre el uso de la cuadrícula de bootstrap, una herramienta poderosa y flexible para crear diseños web responsivos. Cubre temas como la creación de columnas de igual ancho, columnas de ancho variable, clases responsivas, mezcla y combinación de columnas, ajuste de paddings, bordes y estilos, saltos de columna, desplazamiento de columnas y anidamiento de cuadrículas. También se incluyen secciones sobre valores predeterminados de página, tablas y carruseles. Con esta información, los desarrolladores web podrán dominar el uso de la cuadrícula de bootstrap y crear diseños atractivos y adaptables a diferentes dispositivos.
¡Descarga Guía de uso de la cuadrícula de Bootstrap y más Apuntes en PDF de Diseño y Desarrollo Web solo en Docsity!
Introducción a Bootstrap
Un framework aporta una estructura completa en la que nosotros "encajamos" nuestro código, implementando la lógica concreta de la aplicación. Es mucho más que una librería. Impone unas condiciones a nuestra aplicación e incluso puede definir su arquitectura. Es un marco ( framework ) en el que nosotros vamos a definir piezas. El marco define las reglas del juego a las que nos tenemos que atener. (Fuente: notajs.blogspot.com) Bootstrap es un framework CSS , es decir, es un archivo CSS que se añade en los proyectos para tener una serie de estilos ya preparados para utilizar. Este tipo de librerías CSS suelen incluir estilos para los elementos más comunes de una página web, como por ejemplo, botones, tarjetas, navbars, etc. Además tiene una serie de estilos para crear columnas fácilmente. ¿Por qué usar Bootstrap? Ventajas ● Facilidad de uso. Lo único que tienes que hacer es poner clases a elementos HTML. ● Responsive. Perfecto para crear páginas web adaptables a cualquier dispositivo. ● Personalizable. Puedes personalizar su descarga para usar los elementos que necesites. ● Gran comunidad. Este framework está muy extendido y si tenemos un problema podremos encontrar mucha información en Internet.
Fuente: codingpotions.com / bootstrap.com
Descarga y instalación de Bootstrap
Para usar Bootstrap en un proyecto tenemos dos formas de hacerlo:
Instalación de forma manual
Para instalar Bootstrap de forma manual lo que tienes que hacer es descargar los archivos de Bootstrap desde su página web haciendo clic en Download dentro de Compiled CSS andJS: https://getbootstrap.com/docs/4.6/getting-started/download/ Además, para que funcione correctamente tienes que descargar también jQuery y Popper.js , un par de librerías que utiliza Bootstrap para que funcione correctamente. jQuery: https://jquery.com/ Popper.js: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js > Botón derecho > “Guardar cómo” y descargar.
Mediante CDN, más sencillo
Este método es más sencillo porque solo tenemos que llamar desde dentro de la etiqueta head del HTML a cada una de los archivos en la nube y por tanto no tienes que descargar nada (corroborar que sea la última versión estable disponible en la web de Bootstrap). Al día de realizarse este contenido, la última versión estable de Bootstrap es la 4.6 y se puede descargar del siguiente link: https://getbootstrap.com/docs/4.6/getting- started/introduction/
Hello, world!
Hello, world!
Se pueden consultar las distintas versiones en: https://getbootstrap.com/docs/versions/ Recordar que como buena práctica, las versiones alfa y beta no se suelen usar en sitios productivos. Siempre se trabaja con la última versión estable a la fecha. En el próximo apartado se realizará una comparación entre Bootstrap 4 y Bootstrap 5 (esta última, al día de la fecha de la creación de este material, en versión beta).
Fuente: codingpotions.com / bootstrap.com
Bootstrap 4 vs. Bootstrap 5
Como vimos anteriormente, Bootstrap es un framework (o conjunto de herramientas) que facilitan en gran medida el desarrollo de páginas web, con un diseño moderno y adaptativo. La
En esta nueva versión de Bootstrap se ha optado por no dar compatibilidad a los ya casi extintos navegadores web de Microsoft Internet Explorer 9 y 10. A partir de
ahora, Bootstrap solo será compatible con un navegador web de
Microsoft: Microsoft Edge.
INTRODUCCIÓN DE VARIABLES CSS
Bootstrap 5 por fin adoptará técnicas más modernas de diseño web, y entre ellas, podrás usar variables CSS. Se incluye la compatibilidad con Sass https://sass-lang.com/ y Less https://lesscss.org/. Estas variables facilitan en gran medida la realización de diseños web modernos sin necesidad de introducir interminables líneas de código.
NUEVAS FUNCIONALIDADES Y ESTILOS PARA LOS FORMULARIOS
Los formularios también han recibido una importante ración de mejoras en Bootstrap 5. A destacar los nuevos estilos visuales y la nueva funcionalidad de introducir características como los “switch”, que dotan a los formularios de un aspecto mucho más moderno.
SISTEMA DE CUADRÍCULA MEJORADO
Bootstrap 5 mejora y complementa un poco más el excelente sistema de rejilla de Bootstrap 4. Cada vez es más habitual usar monitores más grandes en el trabajo y en el hogar, por ello se ha añadido un nuevo breakpoint (xxl) para dar soporte a estos monitores. Además se ha modificado alguna de las clases creadas para gestionar la rejilla y los estilos visuales de esta. Los cambios referentes a la rejilla de Bootstrap son estos: Añadido un nuevo breakpoint a la cuadrícula de Bootstrap. El nuevo breakpoint es denominado: “xxl”.
Clases .gutter reemplazadas por la clase .g*. Nuevas clases creadas para controlar el padding de los containers, rows y cols. Las opciones de diseño de formulario se han reemplazado con el nuevo sistema de cuadrícula. Se han agregado clases específicas de relleno o padding vertical. Las columnas ya no tienen por defecto la declaración CSS de : position:relative;
CAMBIOS MENORES CONFIRMADOS
Algunos de los cambios menores que podrás disfrutar con la nueva versión de Bootstrap son los siguientes: Escritura de derecha a izquierda (RTL) : los idiomas que se escriben de derecha a izquierda estarán mejor implementados en Bootstrap 5. Menús fuera de lienzo : con los menús fuera de lienzo, aumentarán las posibilidades en cuanto al diseño de los menús de tu web. SVG en HTML : En las versiones actuales de Bootstrap, los archivos SVG se incrustan a través de CSS. Próximamente, podrá usarse el código HTML en su lugar.
CONCLUSIÓN
Bootstrap 5 no ha reinventado toda su estructura. Esto concuerda con la intención de sus desarrolladores, que pretendían hacer una transición fácil de la versión 4 a la 5. Lo que quizá más costará al principio a los usuarios de Bootstrap será la omisión de jQuery. Sin embargo, después de un período de familiarización, la herramienta presentará más ventajas que inconvenientes. Los cambios prometen unos procesos de trabajo más simples y un código más ligero y rápido.
Una de tres columnas
Una de tres columnas
El ejemplo anterior crea tres columnas de igual ancho en dispositivos
pequeños, medianos, grandes y extra grandes utilizando nuestras clases de
cuadrícula predefinidas. Esas columnas están centradas en la página con la
clase padre .container.
Desglosándolo, así es como funciona: Los contenedores proporcionan un medio para centrar y rellenar horizontalmente el contenido de su sitio. Utilizando .container para un ancho de píxel receptivo o .container-fluid para width: 100% en todos los tamaños de vista y dispositivo.
Las filas col-sm son representativas de columnas. Cada columna
tiene una horizontal padding (o margen interno) para controlar el espacio
entre
ellas. Esto padding luego se contrarresta en las filas con márgenes negativos. De
esta manera, todo el contenido de sus columnas se alinea visualmente en
el lado izquierdo.
En un diseño de cuadrícula, el contenido debe colocarse dentro de las columnas y solo las columnas pueden ser hijos inmediatos de las filas.
Gracias a la tecnología flexbox, las columnas de la cuadrícula sin
un especificado width se distribuirán automáticamente como columnas de
igual ancho. Por ejemplo, cuatro instancias de .col-sm tendrán
automáticamente un 25% de ancho desde el punto de interrupción
pequeño y hacia arriba.
Las clases de columna indican la cantidad de columnas que le gustaría usar de las 12 posibles por fila. Entonces, si deseas tres columnas de igual ancho, podés usar .col-4.
Las columnas width se establecen en porcentajes, por lo que siempre
son fluidas y tienen un tamaño relativo a su elemento principal.
Las columnas tienen horizontales padding para crear los margenes verticales entre columnas individuales, sin embargo, podés eliminar de las margin filas y padding de las columnas con .no-gutters en .row.
Para que la cuadrícula responda, hay cinco puntos de
interrupción de la cuadrícula, uno para cada punto de interrupción de
respuesta : todos los puntos de interrupción (extra pequeños),
pequeños, medianos, grandes y extra grandes.
Los puntos de interrupción de la cuadrícula se basan en consultas de medios de ancho mínimo, lo que significa que se aplican a ese único punto de interrupción y a todos los que están por encima de él (por ejemplo, se .col-sm-4 aplica a dispositivos pequeños, medianos, grandes y extragrandes, pero no al primer xs punto de interrupción).
Podés usar clases de cuadrícula predefinidas (como .col-4) o
mixins de Sass para un marcado más semántico.
Hay que tener en cuenta que existen limitaciones y en flexbox , como la imposibilidad de utilizar algunos elementos HTML como contenedores flexibles.
1 de 3 2 de 3 3 de 3
Código:
1 de 2
2 de 2
1 de 3
2 de 3
3 de 3
Multilínea de igual ancho
Cree columnas de igual ancho que abarquen varias líneas insertando un lugar
.w-100 donde desee que las columnas se dividan en una nueva línea. Haga
que los descansos sean receptivos mezclándolos .w-100 con algunas utilidades
de pantalla responsives.
Hubo un error en Safari flexbox que impidió que esto funcionara sin un explícito flex- basiso border. Existen soluciones para las versiones anteriores del navegador, pero no deberían ser necesarias si los navegadores de destino no caen en las versiones con errores. col col espacio col col
Código
col
col
espacio
col
col
1 de 3
2 de 3 (5 col)
3 de 3
Contenido de ancho variable
Use col-{breakpoint}-autoclases para dimensionar columnas según el ancho natural de su contenido.
Código
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
Clases responsivas
La cuadrícula de Bootstrap incluye cinco niveles de clases predefinidas para crear diseños complejos de respuesta. Personalice el tamaño de sus columnas en dispositivos extra pequeños, pequeños, medianos, grandes o extra grandes como mejor le parezca.
Apilado a horizontal
Con un solo conjunto de .col-sm-*clases, podés crear un sistema de cuadrícula
básico que comienza apilado y se vuelve horizontal en el pequeño punto de
interrupción ( sm).
Código
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Mezclar y combinar
Para que las columnas simplemente se apilen en algunos niveles de
cuadrícula podemos utilizar una combinación de diferentes clases para cada
nivel según sea necesario. Vea el ejemplo a continuación para tener una mejor
