1 00:00:03,730 --> 00:00:06,755 En las conferencias anteriores, 2 00:00:06,755 --> 00:00:12,055 hemos aprendido sobre el diseño responsive y el sistema de red de arranque. 3 00:00:12,055 --> 00:00:18,050 Hemos visto cómo la rejilla de arranque nos permite diseñar sitios web adaptados. 4 00:00:18,050 --> 00:00:21,890 Es hora de que vayamos al siguiente ejercicio. 5 00:00:21,890 --> 00:00:27,755 Empezaremos a trabajar con la página html de índice que creamos en 6 00:00:27,755 --> 00:00:34,945 nuestro ejercicio anterior y aplicaremos las clases de cuadrícula de bootstrap para que responda. 7 00:00:34,945 --> 00:00:40,760 Echando un vistazo rápido a nuestra página web en el navegador vemos 8 00:00:40,760 --> 00:00:46,415 que sigue siendo terrible aunque las fuentes han mejorado un poco, 9 00:00:46,415 --> 00:00:50,645 y ahora estamos usando las fuentes predeterminadas de bootstraps. 10 00:00:50,645 --> 00:01:00,930 Ahora intentemos aplicar las clases de cuadrícula de arranque a index.html para mejorar su diseño. Al 11 00:01:00,930 --> 00:01:03,805 ir a la página index.html, 12 00:01:03,805 --> 00:01:07,960 permítanme llamar rápidamente su atención sobre esta línea en particular en la 13 00:01:07,960 --> 00:01:12,805 página index.html que ya incluimos en el ejercicio anterior. 14 00:01:12,805 --> 00:01:14,660 Me había referido a esta línea, 15 00:01:14,660 --> 00:01:17,065 entonces estábamos hablando del sistema de red de arranque. 16 00:01:17,065 --> 00:01:23,895 Así que aquí, vemos que hemos especificado las metaetiquetas con un puerto de vista y el contenido, el 17 00:01:23,895 --> 00:01:26,090 ancho como ancho del dispositivo, 18 00:01:26,090 --> 00:01:29,205 y la escala inicial uno y reducir para ajustarse a no. 19 00:01:29,205 --> 00:01:33,210 Así que esta metaetiqueta nos permite hacer que 20 00:01:33,210 --> 00:01:39,225 nuestra página web responda mirando el carácter del puerto de vista. 21 00:01:39,225 --> 00:01:42,630 Avanzando al siguiente paso. 22 00:01:42,630 --> 00:01:49,080 Vamos a bajar al cuerpo de esta página index.html, 23 00:01:49,080 --> 00:01:54,570 y luego buscar el primer div que viene justo debajo de la etiqueta de encabezado allí, 24 00:01:54,570 --> 00:02:00,480 a este div va a aplicar el contenedor de clase. 25 00:02:00,480 --> 00:02:05,550 Ya hemos aprendido acerca de la clase de contenedores en la conferencia anterior. 26 00:02:05,550 --> 00:02:09,125 Así que una vez que aplicamos la clase contenedor, 27 00:02:09,125 --> 00:02:12,410 luego echando un vistazo a nuestra página web vemos 28 00:02:12,410 --> 00:02:16,620 que parte del contenido allí mismo ya se ha adaptado. 29 00:02:16,620 --> 00:02:23,080 Mira la diferencia entre el contenido aquí arriba y el de abajo aquí. 30 00:02:23,080 --> 00:02:25,370 Ahora este contenido abajo aquí, 31 00:02:25,370 --> 00:02:30,960 está en el pie de página de nuestra página index.html y este contenido está en el encabezado. 32 00:02:30,960 --> 00:02:36,890 Pero ese contenido en el medio es el contenido real de nuestra página web, 33 00:02:36,890 --> 00:02:40,785 que está dentro del div al que aplicamos el contenedor. 34 00:02:40,785 --> 00:02:47,480 Por lo tanto, al aplicar la clase de contenedor, puede ver inmediatamente que el ancho de la página dentro de la 35 00:02:47,480 --> 00:02:50,700 cual se presenta nuestro contenido ahora se ha 36 00:02:50,700 --> 00:02:54,660 reducido y luego tiene algo de espacio adicional a cada lado, 37 00:02:54,660 --> 00:02:58,935 por lo que con este ancho del contenedor siendo un contenedor de tamaño fijo, 38 00:02:58,935 --> 00:03:02,330 nuestro contenido se fijará a este ancho particular en 39 00:03:02,330 --> 00:03:07,425 la pantalla dejando suficiente margen en cada lado como espacio en blanco. 40 00:03:07,425 --> 00:03:13,315 Vamos a aplicar la misma clase de contenedor tanto a la cabecera como al pie de página también, 41 00:03:13,315 --> 00:03:17,355 y luego ver cómo cambia el contenido. 42 00:03:17,355 --> 00:03:20,200 Volviendo a nuestra página web, 43 00:03:20,200 --> 00:03:24,940 lo que voy a hacer ahora es para el contenido 44 00:03:24,940 --> 00:03:28,165 interno aquí, el div interno dentro del contenedor, 45 00:03:28,165 --> 00:03:34,110 voy a aplicar la clase como la clase de fila aquí 46 00:03:34,110 --> 00:03:35,885 , a esta primera, 47 00:03:35,885 --> 00:03:38,125 y simplemente copiaré esto. 48 00:03:38,125 --> 00:03:44,675 Voy a aplicar lo mismo al segundo div aquí que está alineado para el div, 49 00:03:44,675 --> 00:03:49,230 y también desplazarme hacia abajo y luego al tercer div aquí, 50 00:03:49,230 --> 00:03:51,375 también estoy aplicando la clase de fila aquí. 51 00:03:51,375 --> 00:03:56,110 Así que ahora, el contenido dentro de esta clase de contenedor más externa, 52 00:03:56,110 --> 00:03:57,950 ahora está dividido en tres filas, 53 00:03:57,950 --> 00:04:01,395 así que lo que sea que esté dentro de aquí será una fila, 54 00:04:01,395 --> 00:04:02,640 lo que sea que esté dentro aquí, 55 00:04:02,640 --> 00:04:06,150 será la segunda fila y la que esté aquí será la tercera fila. 56 00:04:06,150 --> 00:04:10,380 Más adelante aplicaremos las clases de columna a esto. 57 00:04:10,380 --> 00:04:17,695 Vamos ahora a pasar a la cabecera en el cuerpo de nuestro index.html. 58 00:04:17,695 --> 00:04:23,970 Y al encabezado, voy a aplicar una clase llamada jumbotron. 59 00:04:23,970 --> 00:04:28,265 El componente jumbotron le permite 60 00:04:28,265 --> 00:04:33,805 separar el contenido dentro del jumbotron del resto de la página. 61 00:04:33,805 --> 00:04:39,035 Vamos a ver el resultado en un corto tiempo cuando en la página web resultante. 62 00:04:39,035 --> 00:04:42,215 Ahora, al div dentro de este encabezado, 63 00:04:42,215 --> 00:04:46,360 voy a aplicar la clase como contenedor, para 64 00:04:46,360 --> 00:04:49,410 que lo que esté dentro del contenido 65 00:04:49,410 --> 00:04:52,945 ahora esté restringido por el ancho del contenedor allí. 66 00:04:52,945 --> 00:04:57,670 Del mismo modo, al bajar al pie de página aquí, 67 00:04:58,780 --> 00:05:01,650 en el pie de página también, 68 00:05:01,650 --> 00:05:04,720 el primer div dentro del pie de página, 69 00:05:04,720 --> 00:05:09,360 voy a aplicar la clase como contenedor. 70 00:05:09,360 --> 00:05:13,055 Y el div dentro de allí, 71 00:05:13,055 --> 00:05:16,755 voy a aplicar la clase como fila allí, 72 00:05:16,755 --> 00:05:19,735 al div dentro de allí. 73 00:05:19,735 --> 00:05:25,225 Así que este div nos llevará todo el camino a este div en particular aquí. 74 00:05:25,225 --> 00:05:29,105 Y luego el siguiente div también que está justo debajo de eso, 75 00:05:29,105 --> 00:05:31,820 aplicaré la clase como fila. 76 00:05:31,820 --> 00:05:35,380 Así que ahora mi pie de página contiene dos filas aquí, 77 00:05:35,380 --> 00:05:38,520 vamos a diseñar el contenido usando columnas, 78 00:05:38,520 --> 00:05:40,110 clases en poco tiempo. 79 00:05:40,110 --> 00:05:42,365 Al ir al encabezado también, 80 00:05:42,365 --> 00:05:51,500 aplicaré la clase de fila al segundo div dentro del contenedor div aquí. 81 00:05:51,500 --> 00:05:54,920 Entonces, este div que coincide con lo que tengo, 82 00:05:54,920 --> 00:05:58,605 será una sola fila en el encabezado. 83 00:05:58,605 --> 00:06:02,400 Echemos un vistazo a nuestra página web resultante. 84 00:06:02,400 --> 00:06:04,365 Ir a nuestra página web, 85 00:06:04,365 --> 00:06:09,300 ahora puede ver que el contenido del encabezado está ahora separado del 86 00:06:09,300 --> 00:06:14,935 resto dentro de esta caja gris en la parte superior de aquí. 87 00:06:14,935 --> 00:06:22,735 Pero el contenido en sí está alineado con el contenido abajo aquí. 88 00:06:22,735 --> 00:06:25,685 Ahora, este es el resultado de usar el contenedor. 89 00:06:25,685 --> 00:06:27,550 Al pasar al pie de página, 90 00:06:27,550 --> 00:06:32,635 ahora puede ver que el contenido del pie de página también está alineado dentro del contenedor. 91 00:06:32,635 --> 00:06:36,800 Pero la página todavía no se ve tan bien, 92 00:06:36,800 --> 00:06:44,705 ahora aplicaremos las clases de columna a los divs internos ahora. 93 00:06:44,705 --> 00:06:48,665 Volviendo a la página index.html, 94 00:06:48,665 --> 00:06:51,865 ahora comenzaremos a aplicar las clases de columna. 95 00:06:51,865 --> 00:06:58,365 Así que yendo al encabezado, al segundo div interno dentro del jumbotron aquí, 96 00:06:58,365 --> 00:07:06,230 permítanme aplicar una clase como columna 12, columna sm-6. 97 00:07:06,230 --> 00:07:09,960 Entonces, aquí el contenido en 98 00:07:09,960 --> 00:07:15,525 este primer div ocupará toda la fila para tamaños de pantalla extra pequeños, 99 00:07:15,525 --> 00:07:18,770 y luego ocupará la mitad de la fila, por lo que la columna 100 00:07:18,770 --> 00:07:24,235 sm-6 para tamaños de pantalla pequeños a extra grandes. 101 00:07:24,235 --> 00:07:26,480 Ahora, de manera similar para el segundo div aquí, 102 00:07:26,480 --> 00:07:28,715 aunque no contiene ningún contenido allí, 103 00:07:28,715 --> 00:07:37,840 voy a definir las clases de columna aquí como columna 12 y luego columna sm. 104 00:07:37,840 --> 00:07:40,990 Por lo tanto, observe que aquí al especificar la columna 12, 105 00:07:40,990 --> 00:07:45,270 estoy declarando explícitamente que para tamaños de pantalla extra pequeños, cualquier contenido que esté 106 00:07:45,270 --> 00:07:49,860 dentro de este div se apilará debajo del contenido sobre aquí. 107 00:07:49,860 --> 00:07:54,150 Y luego, para tamaños de pantalla pequeños o extra grandes, 108 00:07:54,150 --> 00:07:59,270 este contenido ocupará la cantidad sobrante de 109 00:07:59,270 --> 00:08:04,925 columnas en la fila para tamaños de pantalla pequeños o extra grandes. 110 00:08:04,925 --> 00:08:09,255 Así que aquí, en este caso, dado que seis columnas están ocupadas por 111 00:08:09,255 --> 00:08:12,745 este contenido, esto obtendrá las seis columnas restantes allí. 112 00:08:12,745 --> 00:08:18,030 Bajando a las filas de contenido aquí, 113 00:08:18,030 --> 00:08:20,110 para el contenido aquí, 114 00:08:20,110 --> 00:08:22,860 así que para este primer contenido, 115 00:08:22,860 --> 00:08:24,590 que es una etiqueta aquí, 116 00:08:24,590 --> 00:08:29,240 voy a aplicar las clases como columna 12, 117 00:08:29,240 --> 00:08:34,985 columna sm-4, columna md-3. 118 00:08:34,985 --> 00:08:39,770 Entonces, indicando que para tamaños de pantalla extra pequeños, 119 00:08:39,770 --> 00:08:42,650 esto ocupará toda la fila, para pequeñas, 120 00:08:42,650 --> 00:08:44,160 ocupará columnas completas, 121 00:08:44,160 --> 00:08:46,585 y luego para medianas a extra grandes, 122 00:08:46,585 --> 00:08:50,395 ocupará tres columnas en la fila. 123 00:08:50,395 --> 00:08:56,810 Ahora, por lo que la parte restante estará ocupada por el contenido abajo aquí, por 124 00:08:56,810 --> 00:09:00,575 lo que, aplicaré las clases como col, 125 00:09:00,575 --> 00:09:05,715 lo que indica que esto se apilará debajo 126 00:09:05,715 --> 00:09:11,025 del contenido aquí en los tamaños de pantalla extra pequeños, 127 00:09:11,025 --> 00:09:12,690 y luego diré columna sm, 128 00:09:12,690 --> 00:09:16,940 lo que significa que esto ocupará el quedando ocho columnas aquí, 129 00:09:16,940 --> 00:09:19,300 porque cuatro columnas son ocupadas por esta, 130 00:09:19,300 --> 00:09:22,360 y luego diremos columna md, 131 00:09:22,360 --> 00:09:24,320 lo que significa que esto ocupará 132 00:09:24,320 --> 00:09:27,300 las nueve columnas restantes porque tres columnas son ocupadas 133 00:09:27,300 --> 00:09:33,230 para tamaños de pantalla medianos a extra grandes por el contenido de arriba aquí. 134 00:09:33,230 --> 00:09:37,810 Ahora que he definido para la primera fila de contenido, 135 00:09:37,810 --> 00:09:43,070 voy a tomar la misma aplicación de clase de columna aquí, 136 00:09:43,070 --> 00:09:49,415 y luego aplicar eso a la segunda fila aquí, 137 00:09:49,415 --> 00:09:52,345 y también a la tercera fila de contenido aquí. 138 00:09:52,345 --> 00:09:57,240 Del mismo modo, voy a copiar este y luego aplicar lo mismo a 139 00:09:57,240 --> 00:10:04,690 los divs de contenido aquí abajo. 140 00:10:04,690 --> 00:10:11,950 Así que ahora hemos configurado tanto el encabezado como las columnas de contenido allí. 141 00:10:11,950 --> 00:10:14,690 Ahora vamos a bajar al pie de página. 142 00:10:14,690 --> 00:10:21,260 En el pie de página, notarás que este div contiene tres divs internos aquí, 143 00:10:21,260 --> 00:10:23,720 por lo que para cada uno de estos tres divs internos aquí, 144 00:10:23,720 --> 00:10:26,570 voy a aplicar las clases de columna correspondientes. 145 00:10:26,570 --> 00:10:27,680 Así que para el primero, 146 00:10:27,680 --> 00:10:35,280 que contiene enlaces a las diversas páginas que formarán parte de este sitio web, 147 00:10:35,280 --> 00:10:38,395 voy a aplicar una clase de columna, 148 00:10:38,395 --> 00:10:46,045 como columna cuatro, columna sm-2 aquí. 149 00:10:46,045 --> 00:10:50,840 Lo que significa que para tamaños de pantalla extra pequeños, 150 00:10:50,840 --> 00:10:55,320 esto ocupará cuatro columnas y para pequeñas a extra grandes, 151 00:10:55,320 --> 00:10:58,660 ocupará solo dos columnas aquí. 152 00:10:59,040 --> 00:11:01,790 Luego, para el segundo, 153 00:11:01,790 --> 00:11:08,425 el segundo div allí aplicaré las clases como columna siete. 154 00:11:08,425 --> 00:11:12,050 Así que note que tengo cuatro aquí y luego siete aquí, 155 00:11:12,050 --> 00:11:14,755 por lo que el total ocupa 11 columnas. 156 00:11:14,755 --> 00:11:16,430 He dejado una columna vacía. 157 00:11:16,430 --> 00:11:21,520 Volveré más tarde para aplicar un desplazamiento para cuidar la columna adicional. 158 00:11:21,520 --> 00:11:23,400 Así que esta es la columna siete, 159 00:11:23,400 --> 00:11:31,345 y luego col-sm-5 a la segunda. 160 00:11:31,345 --> 00:11:33,630 Así que esto es dos más cinco, siete. 161 00:11:33,630 --> 00:11:36,390 Así que todavía tengo cinco columnas sobrantes, 162 00:11:36,390 --> 00:11:40,685 que puedo usar para el tercer div aquí. 163 00:11:40,685 --> 00:11:44,610 Ahora, para tamaños de pantalla extra pequeños, 164 00:11:44,610 --> 00:11:47,700 estos dos contenidos se colocarán uno al lado del otro, 165 00:11:47,700 --> 00:11:52,080 y luego este div que contiene enlaces a 166 00:11:52,080 --> 00:11:58,585 un sitio de redes sociales estará en una fila separada apilada a continuación. 167 00:11:58,585 --> 00:12:04,390 Pero para tamaños de pantalla pequeños o extra grandes, 168 00:12:04,390 --> 00:12:07,680 la primera ocupará dos columnas, 169 00:12:07,680 --> 00:12:10,240 la segunda ocupará cinco y el resto será 170 00:12:10,240 --> 00:12:13,545 ocupado por enlaces de redes sociales aquí. 171 00:12:13,545 --> 00:12:15,230 Así que para el tercero, 172 00:12:15,230 --> 00:12:18,650 voy a aplicar la clase 173 00:12:18,650 --> 00:12:26,515 como col-12 col-sm-4 aquí. 174 00:12:26,515 --> 00:12:32,625 Así col-12 col-sm-4, lo que significa que esto ocupará 175 00:12:32,625 --> 00:12:37,090 un conjunto separado de 12 columnas 176 00:12:37,090 --> 00:12:42,310 apiladas debajo del contenido anterior para tamaños de pantalla extra pequeños, 177 00:12:42,310 --> 00:12:45,040 pero para pequeños a extra grandes ocupará cuatro columnas. 178 00:12:45,040 --> 00:12:46,815 Así que aquí estamos cuatro más cinco, 179 00:12:46,815 --> 00:12:48,430 nueve más dos 11. 180 00:12:48,430 --> 00:12:52,635 Así que una columna sigue siendo sobrante para pequeño a extra grande. 181 00:12:52,635 --> 00:12:57,510 Así es como voy a aplicar esa columna más cercana a esto. 182 00:12:57,510 --> 00:13:03,250 Ahora, todavía tenemos el de abajo aquí donde contenemos los derechos de autor de esto. 183 00:13:03,250 --> 00:13:08,745 Voy a aplicar la clase como columna automática, 184 00:13:08,745 --> 00:13:12,050 lo que significa que este contenido ocupará 185 00:13:12,050 --> 00:13:15,515 solo suficientes columnas como lo requiere el contenido allí. 186 00:13:15,515 --> 00:13:20,405 Más tarde verá que colocaré este contenido en el centro de 187 00:13:20,405 --> 00:13:26,385 la pantalla usando otra clase CSS bootstrap. 188 00:13:26,385 --> 00:13:29,035 Llegaremos a eso en el próximo ejercicio. 189 00:13:29,035 --> 00:13:33,405 Así que con esto hemos aplicado varias clases de columna al encabezado, 190 00:13:33,405 --> 00:13:35,880 el contenido y el pie de página. 191 00:13:35,880 --> 00:13:39,280 Este es un buen momento para guardar los cambios y luego ir y echar 192 00:13:39,280 --> 00:13:43,475 un vistazo a la página indexada o HTML actualizada. 193 00:13:43,475 --> 00:13:46,690 Echando un vistazo a nuestra página index.html, 194 00:13:46,690 --> 00:13:51,315 notará cómo en el encabezado que es el Jumbotron, 195 00:13:51,315 --> 00:13:55,145 el contenido ocupa ahora solo la mitad de la pantalla allí. 196 00:13:55,145 --> 00:14:00,210 La otra mitad de la pantalla de esta fila en particular ahora se deja vacía. 197 00:14:00,210 --> 00:14:03,180 Al bajar a las filas de contenido, 198 00:14:03,180 --> 00:14:07,685 se ve que la etiqueta en el lado izquierdo ocupa 199 00:14:07,685 --> 00:14:14,280 tres o cuatro columnas dependiendo del tamaño de pantalla que estaba utilizando, 200 00:14:14,280 --> 00:14:18,250 y el resto está ocupado por el resto del contenido. 201 00:14:18,250 --> 00:14:19,780 Así que aquí tenemos una fila, 202 00:14:19,780 --> 00:14:21,770 la segunda fila, y la tercera fila. 203 00:14:21,770 --> 00:14:26,330 Y luego el pie de página aquí se puede ver que los enlaces están en el lado izquierdo, 204 00:14:26,330 --> 00:14:28,065 los otros en el medio, 205 00:14:28,065 --> 00:14:31,150 y luego los enlaces de las redes sociales en el lado derecho. 206 00:14:31,150 --> 00:14:35,460 Así que esto es para una pantalla de tamaño mediano. 207 00:14:35,460 --> 00:14:42,765 Ahora, si desea mirar la misma vista para un tamaño de pantalla extra pequeño o pequeño, 208 00:14:42,765 --> 00:14:45,045 si está utilizando Chrome, 209 00:14:45,045 --> 00:14:47,960 entonces Chrome tiene las herramientas de desarrollador que puede 210 00:14:47,960 --> 00:14:51,010 activar haciendo clic en las herramientas de desarrollador de vista, 211 00:14:51,010 --> 00:14:53,105 y cuando las herramientas de desarrollador aparecen, 212 00:14:53,105 --> 00:14:56,890 se dará cuenta, déjame reducir el tamaño aquí. 213 00:14:56,890 --> 00:15:00,930 Usted notará este pequeño a las ventanas allí. 214 00:15:00,930 --> 00:15:06,500 Así que al hacer clic en eso se activará la vista receptiva para estos sitios allí. 215 00:15:06,500 --> 00:15:15,680 Así que se puede ver que aquí la vista de esta misma página web en un píxel a sitio, 216 00:15:15,680 --> 00:15:19,300 que es 411 por 731 en modo retrato, por 217 00:15:19,300 --> 00:15:22,805 lo que corresponde a un tamaño de pantalla extra pequeño, para 218 00:15:22,805 --> 00:15:25,300 que pueda ver cómo se presenta el contenido. 219 00:15:25,300 --> 00:15:28,145 Así que usted puede ver el contenido de Jumbotron allí 220 00:15:28,145 --> 00:15:31,745 y luego la parte restante del contenido abajo aquí abajo. 221 00:15:31,745 --> 00:15:34,585 Y luego al pie de página. 222 00:15:34,585 --> 00:15:40,500 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. 223 00:15:40,500 --> 00:15:45,880 Ahora reduciendo el tamaño de la pantalla para que podamos ver cómo se presenta ese pie de página aquí. 224 00:15:45,880 --> 00:15:48,735 Así que la parte restante, usted tiene los enlaces en el lado izquierdo, 225 00:15:48,735 --> 00:15:51,470 usted tiene la dirección en el lado derecho, 226 00:15:51,470 --> 00:15:56,515 y luego los enlaces de las redes sociales abajo en una fila separada aquí, 227 00:15:56,515 --> 00:15:59,775 y luego los derechos de autor en la parte inferior allí. 228 00:15:59,775 --> 00:16:04,935 Así que esta es la vista interesante que vemos para tamaños de pantalla extra pequeños. 229 00:16:04,935 --> 00:16:07,450 Volviendo a nuestro código aquí, 230 00:16:07,450 --> 00:16:11,710 ahora voy a aplicar las clases de orden y desplazamiento a 231 00:16:11,710 --> 00:16:17,255 este contenido para mostrar el contenido de una manera ligeramente diferente. 232 00:16:17,255 --> 00:16:21,850 Así que yendo a la fila de contenido aquí, 233 00:16:21,850 --> 00:16:27,820 para los dos divs aquí que contienen el contenido, 234 00:16:27,820 --> 00:16:32,020 voy a aplicar las clases como 235 00:16:32,020 --> 00:16:40,150 order-sm-last para la primera fila aquí. 236 00:16:40,150 --> 00:16:50,120 Y luego para ese abajo aquí abajo aplicaré orden sm primero a la fila abajo. 237 00:16:50,120 --> 00:16:53,300 Lo que significa que cuando se muestra este contenido, 238 00:16:53,300 --> 00:16:56,090 este contenido se tirará hacia el lado izquierdo de la pantalla y luego 239 00:16:56,090 --> 00:16:58,880 esta columna se empujará hacia el lado derecho de la pantalla. 240 00:16:58,880 --> 00:17:02,400 Así que esto se ordenará en el lado derecho y esto se ordenará en el lado izquierdo. 241 00:17:02,400 --> 00:17:08,075 Como he explicado acerca de las cláusulas de orden en la conferencia anterior. 242 00:17:08,075 --> 00:17:09,880 Del mismo modo, desde la segunda fila, 243 00:17:09,880 --> 00:17:13,330 voy a dejarlo como tal, pero desde la tercera fila voy a aplicar 244 00:17:13,330 --> 00:17:17,240 el mismo conjunto de clases de orden. 245 00:17:17,240 --> 00:17:20,290 Así que voy a ir a la tercera fila aquí, 246 00:17:20,290 --> 00:17:25,425 y luego aplicar el order-sm-last a este, 247 00:17:25,425 --> 00:17:30,850 y luego aplicaré el order-sm-first a este. 248 00:17:31,460 --> 00:17:36,450 Y así esta otra vez será reordenada de 249 00:17:36,450 --> 00:17:38,300 tal manera que este contenido aparezca en 250 00:17:38,300 --> 00:17:40,870 el lado izquierdo y este contenido aparezca en el lado derecho. 251 00:17:40,870 --> 00:17:46,640 Esta es solo una forma de posicionar el contenido de una manera un poco más interesante. 252 00:17:46,640 --> 00:17:50,210 Ahora bajando al pie de página aquí, 253 00:17:50,210 --> 00:17:54,690 ahora voy a aplicar una clase de desplazamiento aquí. 254 00:17:54,690 --> 00:18:00,440 Así que noten que he mencionado que estas dos columnas ocuparán cuatro más siete, 11. 255 00:18:00,440 --> 00:18:02,130 Así que una columna es sobrante. 256 00:18:02,130 --> 00:18:07,295 Así que voy a aplicar una clase offset-1 a este. 257 00:18:07,295 --> 00:18:12,320 Entonces, lo que significa que este contenido en este div será empujado directamente por una columna aquí. 258 00:18:12,320 --> 00:18:14,710 Del mismo modo, ya que dije offset uno, 259 00:18:14,710 --> 00:18:23,145 esto se aplicará a extra pequeño todo el camino hasta los tamaños de pantalla extra grandes. 260 00:18:23,145 --> 00:18:28,235 Y entonces ese es el uso de la clase de desplazamiento. 261 00:18:28,235 --> 00:18:30,060 Así que ahora que hemos hecho los cambios, 262 00:18:30,060 --> 00:18:36,285 vamos a guardar los cambios y luego ir y echar un vistazo a nuestra página web en el navegador. 263 00:18:36,285 --> 00:18:38,430 Volviendo a ese navegador, 264 00:18:38,430 --> 00:18:43,715 ahora ve cómo es el encabezado como antes, 265 00:18:43,715 --> 00:18:46,850 pero en la primera fila de contenido, 266 00:18:46,850 --> 00:18:49,090 ve que este contenido se ha empujado hacia 267 00:18:49,090 --> 00:18:51,925 el lado izquierdo y la etiqueta hacia el lado derecho. 268 00:18:51,925 --> 00:18:56,090 La segunda fila es diferente se ha mantenido al igual que antes. 269 00:18:56,090 --> 00:18:58,330 Pero para el tercero verás que esto ha sido 270 00:18:58,330 --> 00:19:00,780 empujado hacia la derecha y esto ha sido empujado hacia la izquierda. 271 00:19:00,780 --> 00:19:06,900 Entonces ese es el uso de la clase order-sm-last y order-sm-first está allí. 272 00:19:06,900 --> 00:19:08,530 Ahora yendo al pie de página, 273 00:19:08,530 --> 00:19:18,195 ahora ve que el contenido en el primer div aquí ha sido empujado directamente por una columna,. 274 00:19:18,195 --> 00:19:21,560 Así que puede ver que hay una columna de espacios en blanco aquí, 275 00:19:21,560 --> 00:19:27,790 y esto no se empuja a la derecha y las restantes se han formateado en consecuencia. 276 00:19:27,790 --> 00:19:32,235 Entonces, con esto completamos 277 00:19:32,235 --> 00:19:37,790 los cambios en nuestra página index.html o página adicional para este ejercicio en particular. 278 00:19:37,790 --> 00:19:41,665 Con esto completamos este ejercicio en particular. 279 00:19:41,665 --> 00:19:46,235 En este ejercicio analizamos el uso de las 280 00:19:46,235 --> 00:19:53,800 clases de contenedor, fila y columna con el fin de diseñar nuestra página web un poco más agradable. 281 00:19:53,800 --> 00:19:57,705 En la segunda parte del ejercicio que seguirá, 282 00:19:57,705 --> 00:20:04,680 vamos a añadir más para tratar de mejorar la forma en que se representan estas páginas web. 283 00:20:04,680 --> 00:20:08,375 Todavía no es para mi satisfacción. 284 00:20:08,375 --> 00:20:12,920 Obviamente, todavía hay margen para mejorar. 285 00:20:12,920 --> 00:20:16,290 Este puede ser un buen momento para que haga un comentario git con 286 00:20:16,290 --> 00:20:21,470 el mensaje Bootstrap Grid Part One.