Semana 02: haciendo repsonsivo nuestro diseño web

Si yo bajo el tamaño de la ventana visualizamos que los objetos se van desordenando

La cabecera y banner van a quedar igual quiero que tengan ancho completo, pero con los
servicios vamos hacer los cambios yo quiero que los servicios tengan 3 columnas a partir del
tamaño mediano en adelante y en tamaño pequeño necesitamos que tenga 4 columnas y en la
ultima que tenga 12 columnas en tamaño pequeño. Lo hacemos mediante multicursor el
ingreso de código.
Ahora previsualizamos

Vamos reduciendo el tamaño de la ventana y verificamos que se mantienen las 4 columnas

Ahora modificamos para que md este a 4 y lg a 3

Si previsualizamos
Modifico los tamaños y cambio el nombre de la columna para que en main.css pueda asignar
las propiedades.

Si previsualizamos
Ahora modificamos sobre nosotros y las listas para ello asignamos a la visualización en tamaño
large que se muestre a razón de 9 y 3 columnas respectivamente y que en tamaño mediano se
ajuste de manera automática la distribución de las columnas.

Si previsualizamos
Ahora vamos a configurar el footer
Estas modificaciones responsivas son rapidas de implementar gracias a bootstrap
Utilizando columnas automáticas

Vamos a decirle a bootstrap ahora que el tamaño de la columna sea proporcional al tamaño de
su contenido. Para ello nos ubicamos en el footer y modificamos el col

Podemos hacer que el col-auto sea usado en tamaños de ventana específicos, dejamos que en
tamaño medio tenga 6 columnas y en tamño extra largo sea automatico su tama;o de columna
dependerá del contenido.

Si visualizamos

Si bajamos el tamaño de la ventana: Automaticamente pasa a 6 columnas en cada columna.

Alineando columnas verticales

Nos vamos a la row servicios:

Vamos a modificar agregando texto a la primera columna con un lorem de 100

A la segunda lorem de 20 y a la tercera lorem de 50 quedarian asi:

Previsualicemos

Tenemos columnas que tienen la misma altura pero esto es por que las row tienen un display
flex y el display flex por defecto le coloca la misma altura a todas las columnas y todos los
elementos que están dentro. Para verificar ello en la pagina damos clic derecho inspeccionar y
verificamos la propiedad.
Sin embargo nosotros podemos hacer que esas columnas se alineen de forma vertical y su
altura deje de ser la misma y pase hacer la altura que se necesita. Para alinear de forma
vertical usamos align ítems le decimos start si queremos que todo se alinee al inicio.

Ahora van a dejar de tener altura igual y no dependiendo de su contenido y van a mantenerse
en su mismo lugar vamos a recargar la altura de la columna depende del contenido ya no
tienen la misma altura por defecto pero se mantengan en la posición que tienen.

Ahora si queremos centrarla le damos el siguiente código en la row servicios lo remplazamos

en vez de start

Previsualizamos y queda de la siguiente manera: verificamos que todas están en el eje vertical.
Ahora podemos decirle que se coloquen al final todas, todas estén hacia abajo cambio el align
por end en vez de center.

Guardo, actualizo y veo que todas se alinean al final:

Otra cosa que podríamos hacer es que se alinee solamente una primero quitamos la clase
align:
Recargamos:

Supongamos que yo deseo alinear solo la segunda columna las demás las quiero dejar igual me
voy a la segunda columna y agrego el código de alineación con la clase align

Grabamos y previsualizamos: la única que se alineo al centro fue la segunda todas las demás se
quedaron sin modificaciones podemos usar las mismas clases start, center, end y también va a
funcionar.
Si previsualizamos

Podemos hacer que sea responsivo podría decir que tenga una alineación de dispositivos
pequeños en adelante se deben centrar pero cuando llegue a un dispositivo largo quiero que
tenga una alineación al final. Verificar la segunda columna también donde modificamos el align
debemos eliminarlo.
Previsualizamos y verificamos que cuando esta a partir de large se ubica todo al final

Si redimensionamos el tamaño de la ventana veremos como queda, todo se alinea al centro,

Ahora también verificamos que una columna salta abajo esto debido a que definimos que esta
col en una pantalla pequeña debería tener 12 columnas:

Ahora probamos cambiando a md y lg

En large esta en center

Y si reducimos el tamaño de la ventana: llegamos a md y todo se alinea hacia abajo
Alineando columnas horizontalmente

Primero voy a eliminar las alineaciones realizadas.

Previsulizo para ver como va quedando

Ahora voy a eliminar esos textos adicionales dejamos a todos los servicios con párrafos de 10
palabras:
Previsualizamos y debería quedar asi:

Y ahora me voy a quedar solo con dos servicios:

Previsualizamos y debería quedar de la siguiente manera:

En este momento las columnas están alineadas a la izquierda yo quiero alinearlas al centro o a
la derecha.

Para configurar dicha alineación me voy de nuevo a la row servicios:

Previsualizamos y verificamos que se mantiene en esa ubicación:

Ahora cambiamos la configuración por end si quiero alinear las columnas a la derecha es decir
al final.

Si previsualizamos verificamos que las columnas se alinean a la derecha:

Ahora las voy a ubicar las columnas al centro.

Si previsualizamos

Ahora voy hacer que se distribuyan las columnas en el espacio disponible del cuerpo de la
página.

Si previsualizamos las columnas se estarían distribuyendo de la siguiente manera:

Y ahora tenemos la capacidad de distribuir ubicando las columnas en los contornos de la
pagina lado derecho e izquierdo.

Si previsualizamos

Tambien podemos usarlo de manera responsiva centro en tamaño normal en pequeño en

adelante y en extralargo sea between
Si previsualizamos

Y si reducimos el tamaño de la ventana vemos como las columnas se alienan al centro de la

ventana.
Tambien podemos agregar que en dispositivo largo sea around

Vista between

Vista around

Vista center
Usando offset en las columnas

Es decir el espacio que le podemos agregar a la izquierda de las columnas

Al ejemplo voy a quitarle ls justificaciones para que vuelva a su alineación natural de columnas
a la izquierda.

Previsualizamos

EL offset es espacio de columnas en blanco que podemos agregar para mover nuestras
columnas como nosotros queramos vemos que las columnas de servicios están pegadas.

Voy agregar offset a la segunda columna recuerda que offset es el espacio desde la iquierda
que se puede dar a una columna offset-1 significa que estoy agregando una columna en blanco
a la izquierda de donde se esta definiendo.
Recargamos para previsualizar y verificamos como se genero la columna en blanco:

La columna en blanco se añade y puedo moverlo cuantas columnas yo quiera por ejemplo le
pondré 4

Y si recargo quedaría de la siguiente manera:

Tambien podemos hacerlo de forma repsonsiva puedo decirle que partir del tamaño pequeño
tenga un offset de 1 y a partir de tamaño largo 4.
Recargo y veo que en tamaño grande tengo un offset de 5

Y si bajamos el tamaño de la ventana tendremos un offset de 1

Fijate que aquí tengo 1 todavia como no cabe en la ventana salta pero mantiene el offset de la
iquierda a 1

Recuerda que ello ocurre por que en tamaño pequeño le configuramos que tenga 6 columnas

Ya cuando llega al tamaño mas pequeño no tiene offset por que no lo especifique
REORDENANDO COLUMNAS

Vamos a ver como reordenar columnas de manera responsiva con bootstrap

Lo primero que hare es quitar los offset.

Las columnas se visualizan de la siguiente manera:

Y Ahora agrego otro servicio

Recargamos
Voy agregarle de manera general en la row un between para que se repartan las 3 columnas

Recargamos

Y ahora quiero reordenarlos pero para que se note, voy a camibar los títulos de la siguiente
manera:
Recargamos

Que pasaría por ejemplo si yo desearía que la caja 1 pase al ultimo lugar por defecto todos los
elementos en flex tienen una propiedad order que se coloca en valor 0, es como si los
colocaramos todos en el grupo 0 como todos están en el mismo grupo todos se colocan en el
orden en el que aparecen en el html pero si yo digo que al primer elemento en order 1 primero
estaría en 0 y luego los que tengan 1 por ejemplo
Como vemos primero aparecen los que por defecto tienen el order cero y después el que tiene
el order 1 recuerd que esta propiedad es de flex. Ahora intercambiamos los orders de la
siguiente manera:

Si recargamos
Tambien podemos hacer que eso sea responsivo: por ejemplo configuramos a partir de largo el
siguiente orden:

Recargamos y visualizamos

Vista en large

Vista a partir de médium

Esto nos sirve mucho si necesitamos reordernar los contenidos para dispositivos móviles.

COLUMNAS ANIDADAS

Las columnas anidadas son columnas que están dentro de otras columnas, nosotros podemos
crear una fila con columnas y columnas dentro de otras columnas.

Vamos a modificar nuestra sección de sobre nosotros la cual es una sección de 9 columnas y
luego tenemos las 3 restantes con side bar.

En vez de tener el párrafo dentro de las 9 columnas tenga otra fila y esta fila tenga a su vez 3
columnas. A las cuales les colocare contenido párrafo de 10 palabras.

Agregamos multicursor en las columnas y contenido en cada columna con párrafo de lorem de
10 palabras.

Voy a recargar:
Basicamente dividi una columna agregando una nueva fila, agregando 3 columnas, ahora
puedo decir que la primera tenga 6 y las demás que se acomoden.

Vamos a recargar

6 teniendo en cuenta el ancho de la columna padre que es de 9 son 6 en la primera y 3 en cada

una siguiente y asi puedo incluir columnas dentro de otras columnas eso se llama columnas
anidadas.

Ahora vamos a ubicarnos dentro del aside