En la conferencia anterior,
aprendimos sobre el diseño receptivo.
También mencionamos brevemente que el sistema de red de Bootstrap está
diseñado para admitir sitios web con capacidad de respuesta.
¿ Cómo soporta esto la cuadrícula Bootstraps?
¿ Y qué implica exactamente Bootstrap grid,
que nos permite diseñar sitios web sensibles?
Hablemos un poco más de detalle sobre el sistema de cuadrícula de Bootstrap,
y cómo soporta la capacidad de respuesta a continuación.
Vimos el uso de la metaetiqueta de ventana gráfica en la lección anterior,
cuando hicimos el ejercicio inicial sobre la configuración de Bootstrap en nuestra página index.html.
Me referí brevemente a esta línea en particular en el código entonces.
Tratemos de entender por qué usamos esto en nuestra página index.html.
Lo que estamos especificando aquí es que,
cuando nuestra página web está siendo renderizada por el navegador en un dispositivo particular, entonces,
su renderización en el navegador tendrá en cuenta el tamaño de la pantalla y
adaptará automáticamente el renderizado de la página al ancho de pantalla de los dispositivos.
De esa manera, entonces tenemos clases receptivas,
clases CSS integradas en nuestro marco de interfaz de usuario,
entonces eso asegurará que nuestra página web se
renderiza correctamente para ese tamaño de pantalla en particular.
Aquí es donde el sistema de red Bootstrap viene a nuestro rescate y
nos permite diseñar sitios web sensibles.
Por lo tanto, de nuevo, haciendo hincapié en este punto, la
cuadrícula de Bootstrap está diseñada para ser sensible.
Ya has visto lo que esto significa en la conferencia anterior,
y móvil primero, que ya hemos discutido en la conferencia anterior y luego fluido,
adaptándose automáticamente al ancho de la pantalla.
La cuadrícula Bootstrap aprovecha el diseño de Flexbox CSS.
El diseño CSS flexbox que está siendo soportado por
las versiones más recientes de los diversos navegadores,
permite opciones de diseño mucho más simples y flexibles en CSS.
Ahora, la discusión real de
cómo funciona el diseño de Flexbox CSS está más allá del alcance de este curso,
nos limitaremos a cómo CSS flexbox está siendo
aprovechado por Bootstrap para su sistema de cuadrícula.
Anteriormente Bootstrap tenía su propio sistema de cuadrícula que era anterior al diseño de Flexbox CSS,
pero la última versión de Bootstrap
ha hecho que el diseño de Flexbox CSS sea el estándar para la cuadrícula de Bootstrap.
Este diseño de flexbox puede manejar fácilmente
contenido dinámico y puede adaptar los contenedores al contenido dinámico,
y también puede adaptarse fácilmente al tamaño desconocido
del contenido real encerrado dentro de los contenedores.
El diseño Flexbox también admite el diseño independiente de la dirección.
Lo que el diseño de flexbox aporta a las cuadrículas de Bootstrap es la capacidad de
hacer una alineación vertical fácil del contenido dentro de un elemento principal.
Veremos el uso de esto en el ejercicio que sigue.
Además, permite reordenar fácilmente el contenido a
través de diferentes dispositivos y resoluciones de pantalla con la ayuda de consultas de medios.
Una vez más veremos un poco de eso en el ejercicio sobre cómo Bootstrap
aprovecha eso para admitir formas interesantes de diseñar contenido.
Además, ese contenido en sí,
los contenedores de contenido también se pueden diseñar para que sean columnas de altura igual, de modo que
el contenedor de contenido con
la mayor altura determine la altura de todos los contenedores restantes que están dispuestos en la misma fila.
Ahora hablemos un poco más de detalles sobre la cuadrícula de Bootstrap y cómo funciona realmente.
La forma en que funciona la cuadrícula Bootstrap,
es aplicando un contenedor más a la capa más externa.
Podemos usar un div para
definir el elemento para el que aplicamos la clase contenedor en general.
El contenedor es la unidad más externa dentro de la cual se presenta el contenido real.
Bootstrap soporta tanto la clase contenedor que es un diseño de ancho fijo,
lo que significa que el contenido en sí está restringido a un ancho fijo en la pantalla.
Esta clase de contenedor permite que esta anchura fija se adapte automáticamente al
tamaño de la pantalla mediante el uso de consultas de medios, de modo que
es donde el diseño sensible entra en nuestro rescate.
Más adelante, veremos cómo este contenedor se ajustará a diferentes tamaños de pantalla.
Ahora, también tenemos la flexibilidad de usar en
otro contenedor clásico fluido que permite que
el contenedor se adapte automáticamente al tamaño de la pantalla.
Pero el contenedor de ancho
fijo, fija el tamaño del ancho de diseño real.
Dentro del contenedor, el contenido se presentará en forma de filas,
por lo que típicamente lo que haríamos es dentro
y fuera de div a la que aplicamos la clase contenedor,
incluiremos un div interno al que aplicaremos la clase de fila.
Por lo tanto, el contenido en sí se dividirá verticalmente en varias filas.
Y una vez que esto se divide en filas, dentro de cada fila,
puede diseñar el contenido usando columnas.
Por lo tanto, cada fila en Bootstrap,
se dividirá en 12 columnas de igual tamaño.
Ahora, puede diseñar su contenido para ocupar cualquier número de estas 12 columnas.
Por lo tanto, y el hecho de que el contenido en sí se adapte
al ancho de la pantalla y a la fila que está
encerrada dentro del contenedor se adaptará automáticamente al ancho de la pantalla,
y también a las columnas,
se determinarán las 12 columnas.
Sus anchos serán determinados por la fila por sí misma.
Por lo tanto, lo que significa que para diferentes tamaños de pantalla,
independientemente del contenido que diseñe, todas esas 12 columnas
se ajustarán automáticamente al ancho que está permitido para el contenido.
Por lo tanto, así es como la capacidad de respuesta se
integra en la forma de cuadrícula de Bootstrap de diseñar el contenido.
Entonces, ¿cómo diseñamos exactamente el contenido?
Hablaremos de eso en las próximas diapositivas.
La cuadrícula Bootstrap en sí,
pone a disposición de nosotros cinco clases para especificar diferentes tamaños de pantalla por defecto.
Hay una clase predeterminada que se dirige a todos los tamaños de pantalla,
empezando de extra pequeño a extra grande.
Por lo tanto, toda la gama de anchos de pantalla en términos de Bootstrap,
se divide en
tamaños de pantalla extra pequeño, pequeño, mediano, grande y extra grande.
A continuación, observe cómo estas diferentes clases
de tamaños de pantalla se determinan en detalle en una de las diapositivas posteriores.
Por lo tanto, dentro de su código,
identificará la especificación de diseño
especificando sm para el tamaño de pantalla pequeño,
md para mediano, lg para grande
y xl para tamaños de pantalla extra grandes.
Entonces, cuando haces el diseño,
como vimos en la diapositiva anterior,
cada fila en un sistema de cuadrícula Bootstrap se divide en 12 columnas.
Ahora, vamos a diseñar el contenido utilizando lo que se llama como las clases de columna.
Para las clases de columna,
podemos especificar cómo se realiza el diseño para diferentes anchos de pantalla.
Mire los detalles de esto en las diapositivas posteriores.
Pero permítanme llamar su atención rápidamente sobre cómo especificamos los tamaños de las columnas.
Pueden especificar los tamaños de columna como col,
que es una de las clases que dirán col-sm para
pequeño y col-md para mediano y grande y extra grande y así sucesivamente.
Ahora, estas clases de columna se utilizan para especificar
exactamente cuántas columnas en una fila ocupará cada pieza de contenido.
¿ Cómo funciona esto?
Lo veremos en la siguiente diapositiva.
Por lo tanto, volviendo a nuestro Bootstrap Grid,
supongamos que tenemos una pieza de contenido y queremos exponer la tranquilidad del contenido.
Podemos especificar que ese contenido está encerrado dentro de otro div,
a lo que aplicamos la clase de columna,
como por ejemplo, col-sm-5.
Entonces, en ese caso, lo que estamos especificando es que para tamaños de pantalla pequeños o extra grandes,
esta pieza de contenido ocupará cinco columnas de esas 12 columnas.
Ahora, vas a preguntarme de inmediato,
¿qué pasa con el humo extra?
Si no se especifica explícitamente para el lockette inteligente adicional
por toda la anchura de las 12 columnas,
pueden especificar explícitamente desde
qué rango ocupará el diseño de la columna cuántas columnas.
Entonces, en este caso particular,
cuando especifico que solo los llamo sm-5,
lo que quiero decir es que este contenido en particular que está encerrado dentro de esos div,
ocupará cinco columnas para todos los tamaños de pantalla,
desde pequeño hasta extra grande.
Ahora, vemos que de las 12 columnas,
ya hemos ocupado cinco columnas.
Todavía quedan siete columnas más.
Podría tomar otra pieza de contenido y luego colocarla a la derecha de esto,
defendiendo otro div y luego aplicando la columna sm-7.
Ahora, en este caso,
verá que 5 más 7 es igual a 12.
Por lo tanto, estas dos piezas de contenido que están encerradas en los dos divs,
ahora se colocarán lado a lado,
y la suma total de ellas ocupa todo el ancho de la columna 12.
Por lo tanto, así es como podemos especificar y el trabajo con las 12 columnas
en la definición del diseño del nivel actual.
Con el uso del diseño de caja flexible CSS,
Bootstrap también admite lo que se llama Columnas de diseño automático.
Entonces, en este caso,
simplemente puedo especificar
la columna sm sin especificar cuántas columnas se supone que debe ocupar.
Pero en caso de que especifique tres Doobs ancho columna sm en mi dobladillo 5,
entonces la cuadrícula de arranque colocará automáticamente estos contenidos dentro de esos divs, uno
al lado del otro, de modo
que cada uno de ellos obtenga un tercio del ancho total.
Así que, dado que tenemos 12 columnas aquí,
cada una de estas tres obtendrá cuatro columnas cada una.
Y esto es automáticamente atendido por el mecanismo de diseño de bootstraps.
Ahora, podemos especificar explícitamente
el número de columnas que ocupa un determinado contenido.
Entonces, por ejemplo, supongamos que especifico tres clases de columna,
pero la central especifico columna sm 6.
Entonces lo que sucede es que cuando bootstrap hace
el diseño, el medio ocupará seis columnas,
y luego las partes izquierda y derecha de contenido ocuparán lo que quede fuera.
Así, de las 12 columnas que tenemos,
si 6 columnas que ocupan la pieza media de contenido,
entonces nos hemos dejado 6 columnas más y que se
dividirán por igual entre el contenido y los dos lados de esta columna central.
Por lo tanto, cada uno de ellos obtendrá columnas libres de espacio cada uno.
Entonces, así es como el diseño se realiza automáticamente con Bootstrap.
En el ejercicio, veremos varias combinaciones de uso de este tipo de
especificaciones de cuántas columnas ocupará cada pieza de contenido en el diseño de color.
Esta tabla resume la forma en que Bootstrap trata
las diferentes cuadrículas de pantalla y, en consecuencia, cómo identifica estas cuadrículas de pantalla.
Entonces, como especificé anteriormente,
Bootstrap divide todo el rango de ancho de la pantalla en 5 clases.
Las pantallas extra pequeñas son aquellas cuyas cuadrículas están por debajo de 776 píxeles.
Las pantallas pequeñas son aquellas que están entre 576 y menos de 768 píxeles.
Pantallas medianas de 768 a 992,
grandes de 992 a 1200 y cualquier cosa sobre 1200 píxeles de ancho
se trata como una pantalla extra grande.
Por lo tanto, así es como se configura la cuadrícula Bootstrap predeterminada.
Ahora, una vez que se sienta cómodo con Bootstrap,
también puede configurar estas divisiones usted mismo.
Pero para este curso,
vamos a seguir con la configuración predeterminada que soporta bootstrap.
Ahora, el comportamiento de la cuadrícula en este caso,
es que lo que esté dispuesto para extra pequeño,
será horizontal en todo momento,
para los bits más altos se colapsarán al ancho 2start,
pero horizontal sobre los puntos de ruptura.
Veremos cómo funciona esto en poco tiempo con algunos ejemplos.
Ahora, vimos el uso del contenedor en la diapositiva anterior.
Para pantallas extra pequeñas,
el ancho del contenedor se determina automáticamente por el ancho de la pantalla.
Pero para pequeños, medianos,
grandes y extra grandes,
el ancho del contenedor es el especificado.
Entonces, si usa el div con un contenedor de clase,
entonces para pantallas pequeñas es de 540 píxeles.
Por lo tanto, notarás que si tienes un ancho de pantalla entre 576 y 768,
tu contenido se distribuirá en 540 píxeles,
se centrará en el ancho de la pantalla.
Por lo tanto, el espacio sobrante se dejará como márgenes a cada lado de este contenido.
Del mismo modo, para el medio es de 720 píxeles y así sucesivamente.
Ahora, a continuación, especifique cuántas columnas ocupa cada contenido.
Luego, los prefijos de clase de columna que usará
es.col para extra pequeño, .col-sm para pequeño,
todo el camino a extra grande.
Si especifica algo con.col-md,
entonces eso se aplica a pantallas medianas a extra grandes.
Por lo tanto, cada vez que especifique cualquier col- y algunos números,
entonces eso se aplica a ese tamaño de pantalla en particular y todo lo relacionado con ese tamaño de pantalla.
Ahora, en todos los casos de tamaño de pantalla,
el número de columnas se define como 12 columnas.
La cuadrícula en caso de arranque está diseñada para ser 12 columnas y eso es configurable,
pero el valor predeterminado es 12 columnas.
La razón para elegir 12 es que 12 es un buen múltiplo de dos, tres,
cuatro y así sucesivamente.
Por lo tanto, le da mucha flexibilidad en términos de
cuántas columnas elige para diseñar su contenido.
Entre cada columna,
por lo que si dispones dos piezas de contenido al lado de sus divs,
entre estas dos piezas de contenido serán una pequeña canaleta que quedará.
Espacio en blanco vacío que se dejará de ancho el ancho de la canaleta,
que es solo 30 píxeles de forma predeterminada.
Por lo tanto, 15 píxeles son de una pieza de contenido y 15 píxeles de otra pieza de contenido.
SumTotal juntos 30 píxeles de
espacio en blanco se dejarán entre las dos piezas de contenido.
Piense en cómo
se hace un diseño de columna de periódico y comienza a ver la correspondencia entre
el diseño de la columna de periódico se hace y cómo
la cuadrícula del bootstrap hace el diseño del contenido en ese tono.
La cuadrícula de Bootastrap le permite hacer contenido de siguiente nivel,
por lo que puede incluir contenido dentro del contenido y luego hacer un diseño de contenido anidado.
Además, admite desplazamientos.
Veremos el uso de compensaciones también en algunos ejemplos más adelante.
Así que veamos nuestro primer ejemplo de cómo aplicaría clases de columna de bootstraps,
y cómo se representarían en realidad en diferentes tamaños de pantalla.
Aquí hay un ejemplo de una situación en la que aplicé a los dos divs,
guión de columna 12 y luego guión de columna sm guión cinco para
la pieza roja de contenido y para
la otra aplicé guión de columna 12 y columna sm siete.
Así que la forma en que se presentará este contenido es para pantallas extra pequeñas,
las dos piezas de contenido se apilarán una encima de la otra.
Así que el rojo se apilará en la parte superior del color verde del mar.
Pero para pantallas pequeñas o extra grandes,
las dos piezas de contenido se colocarán una al lado de la otra.
La razón de esto es porque dijimos columna sm cinco y columna sm siete para los dos.
Por lo tanto, para pequeños a extra grandes, están dispuestos lado a lado para
que el contenido rojo ocupe
las cinco columnas más a la izquierda y el contenido verde mar ocupará las siete columnas correctas de su fila,
todo el camino desde tamaños de pantalla pequeños a extra grandes.
Así es como especificaríamos el diseño de contenido para diferentes tamaños de pantalla.
Bootstrap también proporciona clases adicionales llamadas como
clases de guión de orden que le permiten reordenar el contenido en la pantalla.
Así, por ejemplo, si aplica una orden sm primero,
una orden de alguna última clase a los divs,
como se muestra en el ejemplo aquí, en este caso,
el div para el que aplica orden sm last será empujado hacia
el lado derecho de la pantalla y el orden
sm first div será empujado hacia el lado izquierdo del pantalla.
Por lo tanto, la aplicación de estas clases de orden le permite reordenar el contenido en el script.
No sólo esto, el orden sm también le permite especificar el mismo orden sm uno para
ordenar sm 12 para especificar el orden en el que el contenido debe ser renderizado en la pantalla.
Por lo tanto, al usar un número mayor,
puede desplazar el contenido al lado derecho de
la fila y un número menor desplazará el contenido al lado izquierdo de la fila.
Veremos un ejemplo de esto también en el ejercicio.
El interesante soporte mezclado que Bootstrap Grid trae con el uso
del diseño Flexbox es la alineación vertical del contenido.
Las versiones anteriores de Bootstrap,
como Bootstrap 3 y anteriores,
no tenían la capacidad de hacer alineación vertical del contenido.
Con el uso de Flexbox para diseñar la cuadrícula Bootstrap en Bootstrap cuatro,
obtenemos la flexibilidad que CSS Flexbox aporta en términos de alineación vertical.
Entonces, si desea que el contenido esté centrado verticalmente,
luego a la fila,
aplicaría la clase llamada «alinear elementos centro».
Así que en este caso, cualquiera que sea el contenido que se presente,
se colocará verticalmente alineado dentro de esa fila en particular.
Por lo tanto,
el contenido que ocupa la altura más grande será aquel al que se
alinearán los restantes cuando se coloque en esa fila o si preespecifica la altura de la fila,
entonces todo el contenido se centrará verticalmente dentro de esa fila en particular allí.
No solo eso, la cuadrícula de Bootstrap también admite la alineación horizontal del contenido.
Veamos un ejemplo.
Entonces, si especifica su contenido de esta manera.
Digamos, tiene tres columnas y la primera especifica la columna de clase div tres,
luego la media dirá columna de clase div automática.
Voy a volver a esa columna automática en poco tiempo.
Y el correcto dice la columna de clase div 3.
Entonces, en este caso, lo que estamos especificando es que
las partes izquierda y la derecha de contenido ocuparán tres columnas cada una.
El medio, cuando digo, «columna automática»,
significa que el número de columnas que
ocupa este div en particular será determinado automáticamente por el contenido que está encerrado allí.
Por lo tanto, en función del contenido,
el número de columnas ocupadas por el div se ajustará automáticamente.
En este caso particular, en este diseño,
ese contenido concreto se acomodará en cuatro columnas.
Así que ahora tiene cuatro columnas siendo utilizadas por el div central,
tres columnas a la izquierda y tres columnas a la derecha.
Así que suma total, tienes 10 columnas.
Por lo tanto, tiene dos columnas que se dejan vacías.
Ahora, si especifica para la fila,
especifica justificar el centro de contenido, entonces,
todo el contenido de esta fila en particular se centrará con
respecto a la fila horizontal.
También puede tener el contenido justificado a la izquierda,
justificado a la derecha y un par de otras opciones.
Los detalles están en la documentación de bootstraps.
Bootstrap también le permite hacer desplazamientos de columna.
¿ Cómo funciona esto? Veamos un ejemplo.
En este desplazamiento de columna,
podemos especificar una pieza de contenido,
añadir a eso si aplicamos la clase como guión de desplazamiento sm guión uno.
Lo que estamos especificando es para pantallas pequeñas o extra grandes,
esta pieza de contenido debe desplazarse a la derecha por una columna.
Así que cuando se presenta este contenido, como puede ver,
la columna situada más a la izquierda se deja en blanco y el contenido se desplaza a la derecha por una columna.
Y puede diseñar el contenido restante en el lado derecho.
Así que suma total, puede ver que los dos divs
ocuparán 11 columnas pero una columna desplazada a la derecha.
Así es como podemos controlar el diseño del contenido usando un desplazamiento de columna.
Como puede ver,
usando las especificaciones de tamaño de columna,
la alineación vertical y horizontal,
el desplazamiento, el empuje y el tirón,
y flexión primero y flex último,
somos capaces de obtener mucho control sobre cómo diseñamos los
contenidos para diferentes anchos de pantalla y diferentes tamaños de pantalla .
Bootstrap va aún más allá al permitirle anidar contenido dentro de divs.
Así, por ejemplo, si especifica dos divs,
como se ve con la columna sm cinco y la columna sm siete,
los dos contenidos se presentarán como se ve aquí.
Ahora, dentro del div derecho,
puedo volver a entrar y dividir el
ancho de ese div en una fila y luego esa fila me dará automáticamente
otras 12 columnas para esa parte de la pantalla y luego puedo hacer el diseño usando
anidación de los divs y hacer el diseño para diferentes partes de esa columna .
Así que anidar como este,
le brinda aún más flexibilidad en la forma en que diseña el contenido en su tono.
Con toda la discusión sobre Bootstrap Grid System y cómo
Bootstrap Grid soporta varias formas de diseñar el contenido
, ahora vamos a pasar a nuestro siguiente conjunto de ejercicios.
Vamos a aplicar la cuadrícula de Bootstrap a nuestra página index.html con el
fin de hacer el diseño del contenido dentro de la página index.html.
También usaremos algunas clases CSS personalizadas.