En las conferencias anteriores,
hemos aprendido sobre el diseño responsive y el sistema de red de arranque.
Hemos visto cómo la rejilla de arranque nos permite diseñar sitios web adaptados.
Es hora de que vayamos al siguiente ejercicio.
Empezaremos a trabajar con la página html de índice que creamos en
nuestro ejercicio anterior y aplicaremos las clases de cuadrícula de bootstrap para que responda.
Echando un vistazo rápido a nuestra página web en el navegador vemos
que sigue siendo terrible aunque las fuentes han mejorado un poco,
y ahora estamos usando las fuentes predeterminadas de bootstraps.
Ahora intentemos aplicar las clases de cuadrícula de arranque a index.html para mejorar su diseño. Al
ir a la página index.html,
permítanme llamar rápidamente su atención sobre esta línea en particular en la
página index.html que ya incluimos en el ejercicio anterior.
Me había referido a esta línea,
entonces estábamos hablando del sistema de red de arranque.
Así que aquí, vemos que hemos especificado las metaetiquetas con un puerto de vista y el contenido, el
ancho como ancho del dispositivo,
y la escala inicial uno y reducir para ajustarse a no.
Así que esta metaetiqueta nos permite hacer que
nuestra página web responda mirando el carácter del puerto de vista.
Avanzando al siguiente paso.
Vamos a bajar al cuerpo de esta página index.html,
y luego buscar el primer div que viene justo debajo de la etiqueta de encabezado allí,
a este div va a aplicar el contenedor de clase.
Ya hemos aprendido acerca de la clase de contenedores en la conferencia anterior.
Así que una vez que aplicamos la clase contenedor,
luego echando un vistazo a nuestra página web vemos
que parte del contenido allí mismo ya se ha adaptado.
Mira la diferencia entre el contenido aquí arriba y el de abajo aquí.
Ahora este contenido abajo aquí,
está en el pie de página de nuestra página index.html y este contenido está en el encabezado.
Pero ese contenido en el medio es el contenido real de nuestra página web,
que está dentro del div al que aplicamos el contenedor.
Por lo tanto, al aplicar la clase de contenedor, puede ver inmediatamente que el ancho de la página dentro de la
cual se presenta nuestro contenido ahora se ha
reducido y luego tiene algo de espacio adicional a cada lado,
por lo que con este ancho del contenedor siendo un contenedor de tamaño fijo,
nuestro contenido se fijará a este ancho particular en
la pantalla dejando suficiente margen en cada lado como espacio en blanco.
Vamos a aplicar la misma clase de contenedor tanto a la cabecera como al pie de página también,
y luego ver cómo cambia el contenido.
Volviendo a nuestra página web,
lo que voy a hacer ahora es para el contenido
interno aquí, el div interno dentro del contenedor,
voy a aplicar la clase como la clase de fila aquí
, a esta primera,
y simplemente copiaré esto.
Voy a aplicar lo mismo al segundo div aquí que está alineado para el div,
y también desplazarme hacia abajo y luego al tercer div aquí,
también estoy aplicando la clase de fila aquí.
Así que ahora, el contenido dentro de esta clase de contenedor más externa,
ahora está dividido en tres filas,
así que lo que sea que esté dentro de aquí será una fila,
lo que sea que esté dentro aquí,
será la segunda fila y la que esté aquí será la tercera fila.
Más adelante aplicaremos las clases de columna a esto.
Vamos ahora a pasar a la cabecera en el cuerpo de nuestro index.html.
Y al encabezado, voy a aplicar una clase llamada jumbotron.
El componente jumbotron le permite
separar el contenido dentro del jumbotron del resto de la página.
Vamos a ver el resultado en un corto tiempo cuando en la página web resultante.
Ahora, al div dentro de este encabezado,
voy a aplicar la clase como contenedor, para
que lo que esté dentro del contenido
ahora esté restringido por el ancho del contenedor allí.
Del mismo modo, al bajar al pie de página aquí,
en el pie de página también,
el primer div dentro del pie de página,
voy a aplicar la clase como contenedor.
Y el div dentro de allí,
voy a aplicar la clase como fila allí,
al div dentro de allí.
Así que este div nos llevará todo el camino a este div en particular aquí.
Y luego el siguiente div también que está justo debajo de eso,
aplicaré la clase como fila.
Así que ahora mi pie de página contiene dos filas aquí,
vamos a diseñar el contenido usando columnas,
clases en poco tiempo.
Al ir al encabezado también,
aplicaré la clase de fila al segundo div dentro del contenedor div aquí.
Entonces, este div que coincide con lo que tengo,
será una sola fila en el encabezado.
Echemos un vistazo a nuestra página web resultante.
Ir a nuestra página web,
ahora puede ver que el contenido del encabezado está ahora separado del
resto dentro de esta caja gris en la parte superior de aquí.
Pero el contenido en sí está alineado con el contenido abajo aquí.
Ahora, este es el resultado de usar el contenedor.
Al pasar al pie de página,
ahora puede ver que el contenido del pie de página también está alineado dentro del contenedor.
Pero la página todavía no se ve tan bien,
ahora aplicaremos las clases de columna a los divs internos ahora.
Volviendo a la página index.html,
ahora comenzaremos a aplicar las clases de columna.
Así que yendo al encabezado, al segundo div interno dentro del jumbotron aquí,
permítanme aplicar una clase como columna 12, columna sm-6.
Entonces, aquí el contenido en
este primer div ocupará toda la fila para tamaños de pantalla extra pequeños,
y luego ocupará la mitad de la fila, por lo que la columna
sm-6 para tamaños de pantalla pequeños a extra grandes.
Ahora, de manera similar para el segundo div aquí,
aunque no contiene ningún contenido allí,
voy a definir las clases de columna aquí como columna 12 y luego columna sm.
Por lo tanto, observe que aquí al especificar la columna 12,
estoy declarando explícitamente que para tamaños de pantalla extra pequeños, cualquier contenido que esté
dentro de este div se apilará debajo del contenido sobre aquí.
Y luego, para tamaños de pantalla pequeños o extra grandes,
este contenido ocupará la cantidad sobrante de
columnas en la fila para tamaños de pantalla pequeños o extra grandes.
Así que aquí, en este caso, dado que seis columnas están ocupadas por
este contenido, esto obtendrá las seis columnas restantes allí.
Bajando a las filas de contenido aquí,
para el contenido aquí,
así que para este primer contenido,
que es una etiqueta aquí,
voy a aplicar las clases como columna 12,
columna sm-4, columna md-3.
Entonces, indicando que para tamaños de pantalla extra pequeños,
esto ocupará toda la fila, para pequeñas,
ocupará columnas completas,
y luego para medianas a extra grandes,
ocupará tres columnas en la fila.
Ahora, por lo que la parte restante estará ocupada por el contenido abajo aquí, por
lo que, aplicaré las clases como col,
lo que indica que esto se apilará debajo
del contenido aquí en los tamaños de pantalla extra pequeños,
y luego diré columna sm,
lo que significa que esto ocupará el quedando ocho columnas aquí,
porque cuatro columnas son ocupadas por esta,
y luego diremos columna md,
lo que significa que esto ocupará
las nueve columnas restantes porque tres columnas son ocupadas
para tamaños de pantalla medianos a extra grandes por el contenido de arriba aquí.
Ahora que he definido para la primera fila de contenido,
voy a tomar la misma aplicación de clase de columna aquí,
y luego aplicar eso a la segunda fila aquí,
y también a la tercera fila de contenido aquí.
Del mismo modo, voy a copiar este y luego aplicar lo mismo a
los divs de contenido aquí abajo.
Así que ahora hemos configurado tanto el encabezado como las columnas de contenido allí.
Ahora vamos a bajar al pie de página.
En el pie de página, notarás que este div contiene tres divs internos aquí,
por lo que para cada uno de estos tres divs internos aquí,
voy a aplicar las clases de columna correspondientes.
Así que para el primero,
que contiene enlaces a las diversas páginas que formarán parte de este sitio web,
voy a aplicar una clase de columna,
como columna cuatro, columna sm-2 aquí.
Lo que significa que para tamaños de pantalla extra pequeños,
esto ocupará cuatro columnas y para pequeñas a extra grandes,
ocupará solo dos columnas aquí.
Luego, para el segundo,
el segundo div allí aplicaré las clases como columna siete.
Así que note que tengo cuatro aquí y luego siete aquí,
por lo que el total ocupa 11 columnas.
He dejado una columna vacía.
Volveré más tarde para aplicar un desplazamiento para cuidar la columna adicional.
Así que esta es la columna siete,
y luego col-sm-5 a la segunda.
Así que esto es dos más cinco, siete.
Así que todavía tengo cinco columnas sobrantes,
que puedo usar para el tercer div aquí.
Ahora, para tamaños de pantalla extra pequeños,
estos dos contenidos se colocarán uno al lado del otro,
y luego este div que contiene enlaces a
un sitio de redes sociales estará en una fila separada apilada a continuación.
Pero para tamaños de pantalla pequeños o extra grandes,
la primera ocupará dos columnas,
la segunda ocupará cinco y el resto será
ocupado por enlaces de redes sociales aquí.
Así que para el tercero,
voy a aplicar la clase
como col-12 col-sm-4 aquí.
Así col-12 col-sm-4, lo que significa que esto ocupará
un conjunto separado de 12 columnas
apiladas debajo del contenido anterior para tamaños de pantalla extra pequeños,
pero para pequeños a extra grandes ocupará cuatro columnas.
Así que aquí estamos cuatro más cinco,
nueve más dos 11.
Así que una columna sigue siendo sobrante para pequeño a extra grande.
Así es como voy a aplicar esa columna más cercana a esto.
Ahora, todavía tenemos el de abajo aquí donde contenemos los derechos de autor de esto.
Voy a aplicar la clase como columna automática,
lo que significa que este contenido ocupará
solo suficientes columnas como lo requiere el contenido allí.
Más tarde verá que colocaré este contenido en el centro de
la pantalla usando otra clase CSS bootstrap.
Llegaremos a eso en el próximo ejercicio.
Así que con esto hemos aplicado varias clases de columna al encabezado,
el contenido y el pie de página.
Este es un buen momento para guardar los cambios y luego ir y echar
un vistazo a la página indexada o HTML actualizada.
Echando un vistazo a nuestra página index.html,
notará cómo en el encabezado que es el Jumbotron,
el contenido ocupa ahora solo la mitad de la pantalla allí.
La otra mitad de la pantalla de esta fila en particular ahora se deja vacía.
Al bajar a las filas de contenido,
se ve que la etiqueta en el lado izquierdo ocupa
tres o cuatro columnas dependiendo del tamaño de pantalla que estaba utilizando,
y el resto está ocupado por el resto del contenido.
Así que aquí tenemos una fila,
la segunda fila, y la tercera fila.
Y luego el pie de página aquí se puede ver que los enlaces están en el lado izquierdo,
los otros en el medio,
y luego los enlaces de las redes sociales en el lado derecho.
Así que esto es para una pantalla de tamaño mediano.
Ahora, si desea mirar la misma vista para un tamaño de pantalla extra pequeño o pequeño,
si está utilizando Chrome,
entonces Chrome tiene las herramientas de desarrollador que puede
activar haciendo clic en las herramientas de desarrollador de vista,
y cuando las herramientas de desarrollador aparecen,
se dará cuenta, déjame reducir el tamaño aquí.
Usted notará este pequeño a las ventanas allí.
Así que al hacer clic en eso se activará la vista receptiva para estos sitios allí.
Así que se puede ver que aquí la vista de esta misma página web en un píxel a sitio,
que es 411 por 731 en modo retrato, por
lo que corresponde a un tamaño de pantalla extra pequeño, para
que pueda ver cómo se presenta el contenido.
Así que usted puede ver el contenido de Jumbotron allí
y luego la parte restante del contenido abajo aquí abajo.
Y luego al pie de página.
Así que en el pie de página se puede ver cómo los enlaces y el anuncio se han presentado uno al lado del otro.
Ahora reduciendo el tamaño de la pantalla para que podamos ver cómo se presenta ese pie de página aquí.
Así que la parte restante, usted tiene los enlaces en el lado izquierdo,
usted tiene la dirección en el lado derecho,
y luego los enlaces de las redes sociales abajo en una fila separada aquí,
y luego los derechos de autor en la parte inferior allí.
Así que esta es la vista interesante que vemos para tamaños de pantalla extra pequeños.
Volviendo a nuestro código aquí,
ahora voy a aplicar las clases de orden y desplazamiento a
este contenido para mostrar el contenido de una manera ligeramente diferente.
Así que yendo a la fila de contenido aquí,
para los dos divs aquí que contienen el contenido,
voy a aplicar las clases como
order-sm-last para la primera fila aquí.
Y luego para ese abajo aquí abajo aplicaré orden sm primero a la fila abajo.
Lo que significa que cuando se muestra este contenido,
este contenido se tirará hacia el lado izquierdo de la pantalla y luego
esta columna se empujará hacia el lado derecho de la pantalla.
Así que esto se ordenará en el lado derecho y esto se ordenará en el lado izquierdo.
Como he explicado acerca de las cláusulas de orden en la conferencia anterior.
Del mismo modo, desde la segunda fila,
voy a dejarlo como tal, pero desde la tercera fila voy a aplicar
el mismo conjunto de clases de orden.
Así que voy a ir a la tercera fila aquí,
y luego aplicar el order-sm-last a este,
y luego aplicaré el order-sm-first a este.
Y así esta otra vez será reordenada de
tal manera que este contenido aparezca en
el lado izquierdo y este contenido aparezca en el lado derecho.
Esta es solo una forma de posicionar el contenido de una manera un poco más interesante.
Ahora bajando al pie de página aquí,
ahora voy a aplicar una clase de desplazamiento aquí.
Así que noten que he mencionado que estas dos columnas ocuparán cuatro más siete, 11.
Así que una columna es sobrante.
Así que voy a aplicar una clase offset-1 a este.
Entonces, lo que significa que este contenido en este div será empujado directamente por una columna aquí.
Del mismo modo, ya que dije offset uno,
esto se aplicará a extra pequeño todo el camino hasta los tamaños de pantalla extra grandes.
Y entonces ese es el uso de la clase de desplazamiento.
Así que ahora que hemos hecho los cambios,
vamos a guardar los cambios y luego ir y echar un vistazo a nuestra página web en el navegador.
Volviendo a ese navegador,
ahora ve cómo es el encabezado como antes,
pero en la primera fila de contenido,
ve que este contenido se ha empujado hacia
el lado izquierdo y la etiqueta hacia el lado derecho.
La segunda fila es diferente se ha mantenido al igual que antes.
Pero para el tercero verás que esto ha sido
empujado hacia la derecha y esto ha sido empujado hacia la izquierda.
Entonces ese es el uso de la clase order-sm-last y order-sm-first está allí.
Ahora yendo al pie de página,
ahora ve que el contenido en el primer div aquí ha sido empujado directamente por una columna,.
Así que puede ver que hay una columna de espacios en blanco aquí,
y esto no se empuja a la derecha y las restantes se han formateado en consecuencia.
Entonces, con esto completamos
los cambios en nuestra página index.html o página adicional para este ejercicio en particular.
Con esto completamos este ejercicio en particular.
En este ejercicio analizamos el uso de las
clases de contenedor, fila y columna con el fin de diseñar nuestra página web un poco más agradable.
En la segunda parte del ejercicio que seguirá,
vamos a añadir más para tratar de mejorar la forma en que se representan estas páginas web.
Todavía no es para mi satisfacción.
Obviamente, todavía hay margen para mejorar.
Este puede ser un buen momento para que haga un comentario git con
el mensaje Bootstrap Grid Part One.