1 00:00:03,550 --> 00:00:05,885 En la conferencia anterior, 2 00:00:05,885 --> 00:00:08,860 aprendimos sobre el diseño receptivo. 3 00:00:08,860 --> 00:00:12,300 También mencionamos brevemente que el sistema de red de Bootstrap está 4 00:00:12,300 --> 00:00:16,505 diseñado para admitir sitios web con capacidad de respuesta. 5 00:00:16,505 --> 00:00:20,275 ¿ Cómo soporta esto la cuadrícula Bootstraps? 6 00:00:20,275 --> 00:00:23,765 ¿ Y qué implica exactamente Bootstrap grid, 7 00:00:23,765 --> 00:00:27,710 que nos permite diseñar sitios web sensibles? 8 00:00:27,710 --> 00:00:32,535 Hablemos un poco más de detalle sobre el sistema de cuadrícula de Bootstrap, 9 00:00:32,535 --> 00:00:36,700 y cómo soporta la capacidad de respuesta a continuación. 10 00:00:36,700 --> 00:00:45,450 Vimos el uso de la metaetiqueta de ventana gráfica en la lección anterior, 11 00:00:45,450 --> 00:00:53,590 cuando hicimos el ejercicio inicial sobre la configuración de Bootstrap en nuestra página index.html. 12 00:00:53,590 --> 00:00:58,790 Me referí brevemente a esta línea en particular en el código entonces. 13 00:00:58,790 --> 00:01:05,015 Tratemos de entender por qué usamos esto en nuestra página index.html. 14 00:01:05,015 --> 00:01:08,090 Lo que estamos especificando aquí es que, 15 00:01:08,090 --> 00:01:14,555 cuando nuestra página web está siendo renderizada por el navegador en un dispositivo particular, entonces, 16 00:01:14,555 --> 00:01:20,970 su renderización en el navegador tendrá en cuenta el tamaño de la pantalla y 17 00:01:20,970 --> 00:01:28,080 adaptará automáticamente el renderizado de la página al ancho de pantalla de los dispositivos. 18 00:01:28,080 --> 00:01:32,090 De esa manera, entonces tenemos clases receptivas, 19 00:01:32,090 --> 00:01:35,740 clases CSS integradas en nuestro marco de interfaz de usuario, 20 00:01:35,740 --> 00:01:39,030 entonces eso asegurará que nuestra página web se 21 00:01:39,030 --> 00:01:42,855 renderiza correctamente para ese tamaño de pantalla en particular. 22 00:01:42,855 --> 00:01:46,930 Aquí es donde el sistema de red Bootstrap viene a nuestro rescate y 23 00:01:46,930 --> 00:01:51,000 nos permite diseñar sitios web sensibles. 24 00:01:51,000 --> 00:01:53,480 Por lo tanto, de nuevo, haciendo hincapié en este punto, la 25 00:01:53,480 --> 00:01:57,100 cuadrícula de Bootstrap está diseñada para ser sensible. 26 00:01:57,100 --> 00:02:01,525 Ya has visto lo que esto significa en la conferencia anterior, 27 00:02:01,525 --> 00:02:07,845 y móvil primero, que ya hemos discutido en la conferencia anterior y luego fluido, 28 00:02:07,845 --> 00:02:11,055 adaptándose automáticamente al ancho de la pantalla. 29 00:02:11,055 --> 00:02:16,220 La cuadrícula Bootstrap aprovecha el diseño de Flexbox CSS. 30 00:02:16,220 --> 00:02:19,860 El diseño CSS flexbox que está siendo soportado por 31 00:02:19,860 --> 00:02:23,955 las versiones más recientes de los diversos navegadores, 32 00:02:23,955 --> 00:02:30,070 permite opciones de diseño mucho más simples y flexibles en CSS. 33 00:02:30,070 --> 00:02:31,980 Ahora, la discusión real de 34 00:02:31,980 --> 00:02:36,800 cómo funciona el diseño de Flexbox CSS está más allá del alcance de este curso, 35 00:02:36,800 --> 00:02:41,040 nos limitaremos a cómo CSS flexbox está siendo 36 00:02:41,040 --> 00:02:45,565 aprovechado por Bootstrap para su sistema de cuadrícula. 37 00:02:45,565 --> 00:02:54,710 Anteriormente Bootstrap tenía su propio sistema de cuadrícula que era anterior al diseño de Flexbox CSS, 38 00:02:54,710 --> 00:02:58,840 pero la última versión de Bootstrap 39 00:02:58,840 --> 00:03:06,650 ha hecho que el diseño de Flexbox CSS sea el estándar para la cuadrícula de Bootstrap. 40 00:03:06,650 --> 00:03:10,375 Este diseño de flexbox puede manejar fácilmente 41 00:03:10,375 --> 00:03:17,390 contenido dinámico y puede adaptar los contenedores al contenido dinámico, 42 00:03:17,390 --> 00:03:20,780 y también puede adaptarse fácilmente al tamaño desconocido 43 00:03:20,780 --> 00:03:24,890 del contenido real encerrado dentro de los contenedores. 44 00:03:24,890 --> 00:03:30,320 El diseño Flexbox también admite el diseño independiente de la dirección. 45 00:03:30,320 --> 00:03:37,084 Lo que el diseño de flexbox aporta a las cuadrículas de Bootstrap es la capacidad de 46 00:03:37,084 --> 00:03:44,005 hacer una alineación vertical fácil del contenido dentro de un elemento principal. 47 00:03:44,005 --> 00:03:48,595 Veremos el uso de esto en el ejercicio que sigue. 48 00:03:48,595 --> 00:03:52,625 Además, permite reordenar fácilmente el contenido a 49 00:03:52,625 --> 00:03:58,170 través de diferentes dispositivos y resoluciones de pantalla con la ayuda de consultas de medios. 50 00:03:58,170 --> 00:04:03,050 Una vez más veremos un poco de eso en el ejercicio sobre cómo Bootstrap 51 00:04:03,050 --> 00:04:08,645 aprovecha eso para admitir formas interesantes de diseñar contenido. 52 00:04:08,645 --> 00:04:11,670 Además, ese contenido en sí, 53 00:04:11,670 --> 00:04:19,275 los contenedores de contenido también se pueden diseñar para que sean columnas de altura igual, de modo que 54 00:04:19,275 --> 00:04:25,245 el contenedor de contenido con 55 00:04:25,245 --> 00:04:32,915 la mayor altura determine la altura de todos los contenedores restantes que están dispuestos en la misma fila. 56 00:04:32,915 --> 00:04:39,375 Ahora hablemos un poco más de detalles sobre la cuadrícula de Bootstrap y cómo funciona realmente. 57 00:04:39,375 --> 00:04:41,400 La forma en que funciona la cuadrícula Bootstrap, 58 00:04:41,400 --> 00:04:48,765 es aplicando un contenedor más a la capa más externa. 59 00:04:48,765 --> 00:04:51,815 Podemos usar un div para 60 00:04:51,815 --> 00:04:57,075 definir el elemento para el que aplicamos la clase contenedor en general. 61 00:04:57,075 --> 00:05:03,855 El contenedor es la unidad más externa dentro de la cual se presenta el contenido real. 62 00:05:03,855 --> 00:05:10,220 Bootstrap soporta tanto la clase contenedor que es un diseño de ancho fijo, 63 00:05:10,220 --> 00:05:16,010 lo que significa que el contenido en sí está restringido a un ancho fijo en la pantalla. 64 00:05:16,010 --> 00:05:22,420 Esta clase de contenedor permite que esta anchura fija se adapte automáticamente al 65 00:05:22,420 --> 00:05:25,920 tamaño de la pantalla mediante el uso de consultas de medios, de modo que 66 00:05:25,920 --> 00:05:29,695 es donde el diseño sensible entra en nuestro rescate. 67 00:05:29,695 --> 00:05:36,340 Más adelante, veremos cómo este contenedor se ajustará a diferentes tamaños de pantalla. 68 00:05:36,340 --> 00:05:39,490 Ahora, también tenemos la flexibilidad de usar en 69 00:05:39,490 --> 00:05:42,684 otro contenedor clásico fluido que permite que 70 00:05:42,684 --> 00:05:49,200 el contenedor se adapte automáticamente al tamaño de la pantalla. 71 00:05:49,200 --> 00:05:50,855 Pero el contenedor de ancho 72 00:05:50,855 --> 00:05:56,270 fijo, fija el tamaño del ancho de diseño real. 73 00:05:56,270 --> 00:06:01,370 Dentro del contenedor, el contenido se presentará en forma de filas, 74 00:06:01,370 --> 00:06:04,770 por lo que típicamente lo que haríamos es dentro 75 00:06:04,770 --> 00:06:08,360 y fuera de div a la que aplicamos la clase contenedor, 76 00:06:08,360 --> 00:06:12,440 incluiremos un div interno al que aplicaremos la clase de fila. 77 00:06:12,440 --> 00:06:17,550 Por lo tanto, el contenido en sí se dividirá verticalmente en varias filas. 78 00:06:17,550 --> 00:06:21,000 Y una vez que esto se divide en filas, dentro de cada fila, 79 00:06:21,000 --> 00:06:25,995 puede diseñar el contenido usando columnas. 80 00:06:25,995 --> 00:06:28,810 Por lo tanto, cada fila en Bootstrap, 81 00:06:28,810 --> 00:06:34,565 se dividirá en 12 columnas de igual tamaño. 82 00:06:34,565 --> 00:06:43,820 Ahora, puede diseñar su contenido para ocupar cualquier número de estas 12 columnas. 83 00:06:43,820 --> 00:06:48,900 Por lo tanto, y el hecho de que el contenido en sí se adapte 84 00:06:48,900 --> 00:06:51,310 al ancho de la pantalla y a la fila que está 85 00:06:51,310 --> 00:06:54,710 encerrada dentro del contenedor se adaptará automáticamente al ancho de la pantalla, 86 00:06:54,710 --> 00:06:58,120 y también a las columnas, 87 00:06:58,120 --> 00:07:01,320 se determinarán las 12 columnas. 88 00:07:01,320 --> 00:07:05,010 Sus anchos serán determinados por la fila por sí misma. 89 00:07:05,010 --> 00:07:08,520 Por lo tanto, lo que significa que para diferentes tamaños de pantalla, 90 00:07:08,520 --> 00:07:12,470 independientemente del contenido que diseñe, todas esas 12 columnas 91 00:07:12,470 --> 00:07:18,220 se ajustarán automáticamente al ancho que está permitido para el contenido. 92 00:07:18,220 --> 00:07:21,990 Por lo tanto, así es como la capacidad de respuesta se 93 00:07:21,990 --> 00:07:27,370 integra en la forma de cuadrícula de Bootstrap de diseñar el contenido. 94 00:07:27,370 --> 00:07:30,285 Entonces, ¿cómo diseñamos exactamente el contenido? 95 00:07:30,285 --> 00:07:33,845 Hablaremos de eso en las próximas diapositivas. 96 00:07:33,845 --> 00:07:36,315 La cuadrícula Bootstrap en sí, 97 00:07:36,315 --> 00:07:45,160 pone a disposición de nosotros cinco clases para especificar diferentes tamaños de pantalla por defecto. 98 00:07:45,160 --> 00:07:49,870 Hay una clase predeterminada que se dirige a todos los tamaños de pantalla, 99 00:07:49,870 --> 00:07:53,210 empezando de extra pequeño a extra grande. 100 00:07:53,210 --> 00:07:59,205 Por lo tanto, toda la gama de anchos de pantalla en términos de Bootstrap, 101 00:07:59,205 --> 00:08:02,884 se divide en 102 00:08:02,884 --> 00:08:07,405 tamaños de pantalla extra pequeño, pequeño, mediano, grande y extra grande. 103 00:08:07,405 --> 00:08:11,180 A continuación, observe cómo estas diferentes clases 104 00:08:11,180 --> 00:08:16,350 de tamaños de pantalla se determinan en detalle en una de las diapositivas posteriores. 105 00:08:16,350 --> 00:08:18,540 Por lo tanto, dentro de su código, 106 00:08:18,540 --> 00:08:22,830 identificará la especificación de diseño 107 00:08:22,830 --> 00:08:29,060 especificando sm para el tamaño de pantalla pequeño, 108 00:08:29,060 --> 00:08:32,195 md para mediano, lg para grande 109 00:08:32,195 --> 00:08:35,905 y xl para tamaños de pantalla extra grandes. 110 00:08:35,905 --> 00:08:37,400 Entonces, cuando haces el diseño, 111 00:08:37,400 --> 00:08:40,345 como vimos en la diapositiva anterior, 112 00:08:40,345 --> 00:08:45,405 cada fila en un sistema de cuadrícula Bootstrap se divide en 12 columnas. 113 00:08:45,405 --> 00:08:50,905 Ahora, vamos a diseñar el contenido utilizando lo que se llama como las clases de columna. 114 00:08:50,905 --> 00:08:52,450 Para las clases de columna, 115 00:08:52,450 --> 00:08:59,162 podemos especificar cómo se realiza el diseño para diferentes anchos de pantalla. 116 00:08:59,162 --> 00:09:04,735 Mire los detalles de esto en las diapositivas posteriores. 117 00:09:04,735 --> 00:09:11,020 Pero permítanme llamar su atención rápidamente sobre cómo especificamos los tamaños de las columnas. 118 00:09:11,020 --> 00:09:13,655 Pueden especificar los tamaños de columna como col, 119 00:09:13,655 --> 00:09:19,485 que es una de las clases que dirán col-sm para 120 00:09:19,485 --> 00:09:25,360 pequeño y col-md para mediano y grande y extra grande y así sucesivamente. 121 00:09:25,360 --> 00:09:29,810 Ahora, estas clases de columna se utilizan para especificar 122 00:09:29,810 --> 00:09:38,260 exactamente cuántas columnas en una fila ocupará cada pieza de contenido. 123 00:09:38,260 --> 00:09:40,015 ¿ Cómo funciona esto? 124 00:09:40,015 --> 00:09:42,215 Lo veremos en la siguiente diapositiva. 125 00:09:42,215 --> 00:09:45,565 Por lo tanto, volviendo a nuestro Bootstrap Grid, 126 00:09:45,565 --> 00:09:50,345 supongamos que tenemos una pieza de contenido y queremos exponer la tranquilidad del contenido. 127 00:09:50,345 --> 00:09:54,915 Podemos especificar que ese contenido está encerrado dentro de otro div, 128 00:09:54,915 --> 00:09:57,815 a lo que aplicamos la clase de columna, 129 00:09:57,815 --> 00:10:00,390 como por ejemplo, col-sm-5. 130 00:10:00,390 --> 00:10:08,560 Entonces, en ese caso, lo que estamos especificando es que para tamaños de pantalla pequeños o extra grandes, 131 00:10:08,560 --> 00:10:15,890 esta pieza de contenido ocupará cinco columnas de esas 12 columnas. 132 00:10:15,890 --> 00:10:17,505 Ahora, vas a preguntarme de inmediato, 133 00:10:17,505 --> 00:10:19,835 ¿qué pasa con el humo extra? 134 00:10:19,835 --> 00:10:23,465 Si no se especifica explícitamente para el lockette inteligente adicional 135 00:10:23,465 --> 00:10:27,120 por toda la anchura de las 12 columnas, 136 00:10:27,120 --> 00:10:31,575 pueden especificar explícitamente desde 137 00:10:31,575 --> 00:10:38,135 qué rango ocupará el diseño de la columna cuántas columnas. 138 00:10:38,135 --> 00:10:39,890 Entonces, en este caso particular, 139 00:10:39,890 --> 00:10:42,470 cuando especifico que solo los llamo sm-5, 140 00:10:42,470 --> 00:10:48,295 lo que quiero decir es que este contenido en particular que está encerrado dentro de esos div, 141 00:10:48,295 --> 00:10:52,375 ocupará cinco columnas para todos los tamaños de pantalla, 142 00:10:52,375 --> 00:10:56,595 desde pequeño hasta extra grande. 143 00:10:56,595 --> 00:11:00,595 Ahora, vemos que de las 12 columnas, 144 00:11:00,595 --> 00:11:02,515 ya hemos ocupado cinco columnas. 145 00:11:02,515 --> 00:11:05,070 Todavía quedan siete columnas más. 146 00:11:05,070 --> 00:11:09,925 Podría tomar otra pieza de contenido y luego colocarla a la derecha de esto, 147 00:11:09,925 --> 00:11:14,085 defendiendo otro div y luego aplicando la columna sm-7. 148 00:11:14,085 --> 00:11:15,855 Ahora, en este caso, 149 00:11:15,855 --> 00:11:18,065 verá que 5 más 7 es igual a 12. 150 00:11:18,065 --> 00:11:22,900 Por lo tanto, estas dos piezas de contenido que están encerradas en los dos divs, 151 00:11:22,900 --> 00:11:25,530 ahora se colocarán lado a lado, 152 00:11:25,530 --> 00:11:30,070 y la suma total de ellas ocupa todo el ancho de la columna 12. 153 00:11:30,070 --> 00:11:35,765 Por lo tanto, así es como podemos especificar y el trabajo con las 12 columnas 154 00:11:35,765 --> 00:11:42,630 en la definición del diseño del nivel actual. 155 00:11:42,630 --> 00:11:46,960 Con el uso del diseño de caja flexible CSS, 156 00:11:46,960 --> 00:11:51,660 Bootstrap también admite lo que se llama Columnas de diseño automático. 157 00:11:51,660 --> 00:11:52,905 Entonces, en este caso, 158 00:11:52,905 --> 00:11:55,380 simplemente puedo especificar 159 00:11:55,380 --> 00:12:00,060 la columna sm sin especificar cuántas columnas se supone que debe ocupar. 160 00:12:00,060 --> 00:12:07,570 Pero en caso de que especifique tres Doobs ancho columna sm en mi dobladillo 5, 161 00:12:07,570 --> 00:12:13,575 entonces la cuadrícula de arranque colocará automáticamente estos contenidos dentro de esos divs, uno 162 00:12:13,575 --> 00:12:14,905 al lado del otro, de modo 163 00:12:14,905 --> 00:12:18,875 que cada uno de ellos obtenga un tercio del ancho total. 164 00:12:18,875 --> 00:12:22,220 Así que, dado que tenemos 12 columnas aquí, 165 00:12:22,220 --> 00:12:26,045 cada una de estas tres obtendrá cuatro columnas cada una. 166 00:12:26,045 --> 00:12:32,525 Y esto es automáticamente atendido por el mecanismo de diseño de bootstraps. 167 00:12:32,525 --> 00:12:35,550 Ahora, podemos especificar explícitamente 168 00:12:35,550 --> 00:12:40,375 el número de columnas que ocupa un determinado contenido. 169 00:12:40,375 --> 00:12:45,625 Entonces, por ejemplo, supongamos que especifico tres clases de columna, 170 00:12:45,625 --> 00:12:49,565 pero la central especifico columna sm 6. 171 00:12:49,565 --> 00:12:52,615 Entonces lo que sucede es que cuando bootstrap hace 172 00:12:52,615 --> 00:12:55,760 el diseño, el medio ocupará seis columnas, 173 00:12:55,760 --> 00:13:01,885 y luego las partes izquierda y derecha de contenido ocuparán lo que quede fuera. 174 00:13:01,885 --> 00:13:04,785 Así, de las 12 columnas que tenemos, 175 00:13:04,785 --> 00:13:08,630 si 6 columnas que ocupan la pieza media de contenido, 176 00:13:08,630 --> 00:13:12,855 entonces nos hemos dejado 6 columnas más y que se 177 00:13:12,855 --> 00:13:17,965 dividirán por igual entre el contenido y los dos lados de esta columna central. 178 00:13:17,965 --> 00:13:23,585 Por lo tanto, cada uno de ellos obtendrá columnas libres de espacio cada uno. 179 00:13:23,585 --> 00:13:27,730 Entonces, así es como el diseño se realiza automáticamente con Bootstrap. 180 00:13:27,730 --> 00:13:34,110 En el ejercicio, veremos varias combinaciones de uso de este tipo de 181 00:13:34,110 --> 00:13:43,680 especificaciones de cuántas columnas ocupará cada pieza de contenido en el diseño de color. 182 00:13:43,680 --> 00:13:49,135 Esta tabla resume la forma en que Bootstrap trata 183 00:13:49,135 --> 00:13:54,860 las diferentes cuadrículas de pantalla y, en consecuencia, cómo identifica estas cuadrículas de pantalla. 184 00:13:54,860 --> 00:13:57,095 Entonces, como especificé anteriormente, 185 00:13:57,095 --> 00:14:04,580 Bootstrap divide todo el rango de ancho de la pantalla en 5 clases. 186 00:14:04,580 --> 00:14:12,890 Las pantallas extra pequeñas son aquellas cuyas cuadrículas están por debajo de 776 píxeles. 187 00:14:12,890 --> 00:14:22,090 Las pantallas pequeñas son aquellas que están entre 576 y menos de 768 píxeles. 188 00:14:22,090 --> 00:14:25,600 Pantallas medianas de 768 a 992, 189 00:14:25,600 --> 00:14:31,380 grandes de 992 a 1200 y cualquier cosa sobre 1200 píxeles de ancho 190 00:14:31,380 --> 00:14:34,685 se trata como una pantalla extra grande. 191 00:14:34,685 --> 00:14:39,390 Por lo tanto, así es como se configura la cuadrícula Bootstrap predeterminada. 192 00:14:39,390 --> 00:14:43,570 Ahora, una vez que se sienta cómodo con Bootstrap, 193 00:14:43,570 --> 00:14:48,595 también puede configurar estas divisiones usted mismo. 194 00:14:48,595 --> 00:14:50,770 Pero para este curso, 195 00:14:50,770 --> 00:14:56,210 vamos a seguir con la configuración predeterminada que soporta bootstrap. 196 00:14:56,210 --> 00:14:59,195 Ahora, el comportamiento de la cuadrícula en este caso, 197 00:14:59,195 --> 00:15:01,825 es que lo que esté dispuesto para extra pequeño, 198 00:15:01,825 --> 00:15:04,885 será horizontal en todo momento, 199 00:15:04,885 --> 00:15:09,235 para los bits más altos se colapsarán al ancho 2start, 200 00:15:09,235 --> 00:15:13,040 pero horizontal sobre los puntos de ruptura. 201 00:15:13,040 --> 00:15:17,855 Veremos cómo funciona esto en poco tiempo con algunos ejemplos. 202 00:15:17,855 --> 00:15:24,980 Ahora, vimos el uso del contenedor en la diapositiva anterior. 203 00:15:24,980 --> 00:15:28,545 Para pantallas extra pequeñas, 204 00:15:28,545 --> 00:15:32,895 el ancho del contenedor se determina automáticamente por el ancho de la pantalla. 205 00:15:32,895 --> 00:15:34,575 Pero para pequeños, medianos, 206 00:15:34,575 --> 00:15:36,045 grandes y extra grandes, 207 00:15:36,045 --> 00:15:39,425 el ancho del contenedor es el especificado. 208 00:15:39,425 --> 00:15:42,600 Entonces, si usa el div con un contenedor de clase, 209 00:15:42,600 --> 00:15:46,105 entonces para pantallas pequeñas es de 540 píxeles. 210 00:15:46,105 --> 00:15:52,330 Por lo tanto, notarás que si tienes un ancho de pantalla entre 576 y 768, 211 00:15:52,330 --> 00:15:56,485 tu contenido se distribuirá en 540 píxeles, 212 00:15:56,485 --> 00:16:00,670 se centrará en el ancho de la pantalla. 213 00:16:00,670 --> 00:16:08,435 Por lo tanto, el espacio sobrante se dejará como márgenes a cada lado de este contenido. 214 00:16:08,435 --> 00:16:12,795 Del mismo modo, para el medio es de 720 píxeles y así sucesivamente. 215 00:16:12,795 --> 00:16:17,640 Ahora, a continuación, especifique cuántas columnas ocupa cada contenido. 216 00:16:17,640 --> 00:16:20,885 Luego, los prefijos de clase de columna que usará 217 00:16:20,885 --> 00:16:26,670 es.col para extra pequeño, .col-sm para pequeño, 218 00:16:26,670 --> 00:16:29,420 todo el camino a extra grande. 219 00:16:29,420 --> 00:16:31,625 Si especifica algo con.col-md, 220 00:16:31,625 --> 00:16:36,530 entonces eso se aplica a pantallas medianas a extra grandes. 221 00:16:36,530 --> 00:16:41,785 Por lo tanto, cada vez que especifique cualquier col- y algunos números, 222 00:16:41,785 --> 00:16:47,895 entonces eso se aplica a ese tamaño de pantalla en particular y todo lo relacionado con ese tamaño de pantalla. 223 00:16:47,895 --> 00:16:51,035 Ahora, en todos los casos de tamaño de pantalla, 224 00:16:51,035 --> 00:16:54,955 el número de columnas se define como 12 columnas. 225 00:16:54,955 --> 00:17:02,345 La cuadrícula en caso de arranque está diseñada para ser 12 columnas y eso es configurable, 226 00:17:02,345 --> 00:17:04,830 pero el valor predeterminado es 12 columnas. 227 00:17:04,830 --> 00:17:10,355 La razón para elegir 12 es que 12 es un buen múltiplo de dos, tres, 228 00:17:10,355 --> 00:17:11,755 cuatro y así sucesivamente. 229 00:17:11,755 --> 00:17:14,965 Por lo tanto, le da mucha flexibilidad en términos de 230 00:17:14,965 --> 00:17:19,065 cuántas columnas elige para diseñar su contenido. 231 00:17:19,065 --> 00:17:22,345 Entre cada columna, 232 00:17:22,345 --> 00:17:25,510 por lo que si dispones dos piezas de contenido al lado de sus divs, 233 00:17:25,510 --> 00:17:31,035 entre estas dos piezas de contenido serán una pequeña canaleta que quedará. 234 00:17:31,035 --> 00:17:37,255 Espacio en blanco vacío que se dejará de ancho el ancho de la canaleta, 235 00:17:37,255 --> 00:17:41,030 que es solo 30 píxeles de forma predeterminada. 236 00:17:41,030 --> 00:17:45,855 Por lo tanto, 15 píxeles son de una pieza de contenido y 15 píxeles de otra pieza de contenido. 237 00:17:45,855 --> 00:17:48,600 SumTotal juntos 30 píxeles de 238 00:17:48,600 --> 00:17:53,470 espacio en blanco se dejarán entre las dos piezas de contenido. 239 00:17:53,470 --> 00:17:57,465 Piense en cómo 240 00:17:57,465 --> 00:18:01,530 se hace un diseño de columna de periódico y comienza a ver la correspondencia entre 241 00:18:01,530 --> 00:18:04,970 el diseño de la columna de periódico se hace y cómo 242 00:18:04,970 --> 00:18:10,815 la cuadrícula del bootstrap hace el diseño del contenido en ese tono. 243 00:18:10,815 --> 00:18:14,725 La cuadrícula de Bootastrap le permite hacer contenido de siguiente nivel, 244 00:18:14,725 --> 00:18:20,710 por lo que puede incluir contenido dentro del contenido y luego hacer un diseño de contenido anidado. 245 00:18:20,710 --> 00:18:23,790 Además, admite desplazamientos. 246 00:18:23,790 --> 00:18:28,712 Veremos el uso de compensaciones también en algunos ejemplos más adelante. 247 00:18:28,712 --> 00:18:36,555 Así que veamos nuestro primer ejemplo de cómo aplicaría clases de columna de bootstraps, 248 00:18:36,555 --> 00:18:41,515 y cómo se representarían en realidad en diferentes tamaños de pantalla. 249 00:18:41,515 --> 00:18:47,310 Aquí hay un ejemplo de una situación en la que aplicé a los dos divs, 250 00:18:47,310 --> 00:18:53,510 guión de columna 12 y luego guión de columna sm guión cinco para 251 00:18:53,510 --> 00:18:56,050 la pieza roja de contenido y para 252 00:18:56,050 --> 00:19:00,980 la otra aplicé guión de columna 12 y columna sm siete. 253 00:19:00,980 --> 00:19:06,045 Así que la forma en que se presentará este contenido es para pantallas extra pequeñas, 254 00:19:06,045 --> 00:19:10,690 las dos piezas de contenido se apilarán una encima de la otra. 255 00:19:10,690 --> 00:19:15,450 Así que el rojo se apilará en la parte superior del color verde del mar. 256 00:19:15,450 --> 00:19:19,010 Pero para pantallas pequeñas o extra grandes, 257 00:19:19,010 --> 00:19:22,310 las dos piezas de contenido se colocarán una al lado de la otra. 258 00:19:22,310 --> 00:19:27,490 La razón de esto es porque dijimos columna sm cinco y columna sm siete para los dos. 259 00:19:27,490 --> 00:19:31,510 Por lo tanto, para pequeños a extra grandes, están dispuestos lado a lado para 260 00:19:31,510 --> 00:19:36,210 que el contenido rojo ocupe 261 00:19:36,210 --> 00:19:45,945 las cinco columnas más a la izquierda y el contenido verde mar ocupará las siete columnas correctas de su fila, 262 00:19:45,945 --> 00:19:50,440 todo el camino desde tamaños de pantalla pequeños a extra grandes. 263 00:19:50,440 --> 00:19:55,605 Así es como especificaríamos el diseño de contenido para diferentes tamaños de pantalla. 264 00:19:55,605 --> 00:20:00,220 Bootstrap también proporciona clases adicionales llamadas como 265 00:20:00,220 --> 00:20:07,055 clases de guión de orden que le permiten reordenar el contenido en la pantalla. 266 00:20:07,055 --> 00:20:11,440 Así, por ejemplo, si aplica una orden sm primero, 267 00:20:11,440 --> 00:20:15,200 una orden de alguna última clase a los divs, 268 00:20:15,200 --> 00:20:19,265 como se muestra en el ejemplo aquí, en este caso, 269 00:20:19,265 --> 00:20:26,160 el div para el que aplica orden sm last será empujado hacia 270 00:20:26,160 --> 00:20:29,390 el lado derecho de la pantalla y el orden 271 00:20:29,390 --> 00:20:33,125 sm first div será empujado hacia el lado izquierdo del pantalla. 272 00:20:33,125 --> 00:20:38,570 Por lo tanto, la aplicación de estas clases de orden le permite reordenar el contenido en el script. 273 00:20:38,570 --> 00:20:45,000 No sólo esto, el orden sm también le permite especificar el mismo orden sm uno para 274 00:20:45,000 --> 00:20:51,750 ordenar sm 12 para especificar el orden en el que el contenido debe ser renderizado en la pantalla. 275 00:20:51,750 --> 00:20:53,850 Por lo tanto, al usar un número mayor, 276 00:20:53,850 --> 00:20:57,395 puede desplazar el contenido al lado derecho de 277 00:20:57,395 --> 00:21:01,795 la fila y un número menor desplazará el contenido al lado izquierdo de la fila. 278 00:21:01,795 --> 00:21:05,785 Veremos un ejemplo de esto también en el ejercicio. 279 00:21:05,785 --> 00:21:10,850 El interesante soporte mezclado que Bootstrap Grid trae con el uso 280 00:21:10,850 --> 00:21:16,195 del diseño Flexbox es la alineación vertical del contenido. 281 00:21:16,195 --> 00:21:19,530 Las versiones anteriores de Bootstrap, 282 00:21:19,530 --> 00:21:22,315 como Bootstrap 3 y anteriores, 283 00:21:22,315 --> 00:21:27,915 no tenían la capacidad de hacer alineación vertical del contenido. 284 00:21:27,915 --> 00:21:34,870 Con el uso de Flexbox para diseñar la cuadrícula Bootstrap en Bootstrap cuatro, 285 00:21:34,870 --> 00:21:41,365 obtenemos la flexibilidad que CSS Flexbox aporta en términos de alineación vertical. 286 00:21:41,365 --> 00:21:46,295 Entonces, si desea que el contenido esté centrado verticalmente, 287 00:21:46,295 --> 00:21:48,370 luego a la fila, 288 00:21:48,370 --> 00:21:52,765 aplicaría la clase llamada «alinear elementos centro». 289 00:21:52,765 --> 00:21:55,585 Así que en este caso, cualquiera que sea el contenido que se presente, 290 00:21:55,585 --> 00:22:00,750 se colocará verticalmente alineado dentro de esa fila en particular. 291 00:22:00,750 --> 00:22:03,560 Por lo tanto, 292 00:22:03,560 --> 00:22:08,780 el contenido que ocupa la altura más grande será aquel al que se 293 00:22:08,780 --> 00:22:16,905 alinearán los restantes cuando se coloque en esa fila o si preespecifica la altura de la fila, 294 00:22:16,905 --> 00:22:24,935 entonces todo el contenido se centrará verticalmente dentro de esa fila en particular allí. 295 00:22:24,935 --> 00:22:30,795 No solo eso, la cuadrícula de Bootstrap también admite la alineación horizontal del contenido. 296 00:22:30,795 --> 00:22:32,400 Veamos un ejemplo. 297 00:22:32,400 --> 00:22:35,060 Entonces, si especifica su contenido de esta manera. 298 00:22:35,060 --> 00:22:40,320 Digamos, tiene tres columnas y la primera especifica la columna de clase div tres, 299 00:22:40,320 --> 00:22:44,140 luego la media dirá columna de clase div automática. 300 00:22:44,140 --> 00:22:47,010 Voy a volver a esa columna automática en poco tiempo. 301 00:22:47,010 --> 00:22:50,045 Y el correcto dice la columna de clase div 3. 302 00:22:50,045 --> 00:22:53,065 Entonces, en este caso, lo que estamos especificando es que 303 00:22:53,065 --> 00:22:58,540 las partes izquierda y la derecha de contenido ocuparán tres columnas cada una. 304 00:22:58,540 --> 00:23:02,120 El medio, cuando digo, «columna automática», 305 00:23:02,120 --> 00:23:07,200 significa que el número de columnas que 306 00:23:07,200 --> 00:23:14,090 ocupa este div en particular será determinado automáticamente por el contenido que está encerrado allí. 307 00:23:14,090 --> 00:23:16,840 Por lo tanto, en función del contenido, 308 00:23:16,840 --> 00:23:21,710 el número de columnas ocupadas por el div se ajustará automáticamente. 309 00:23:21,710 --> 00:23:25,070 En este caso particular, en este diseño, 310 00:23:25,070 --> 00:23:31,040 ese contenido concreto se acomodará en cuatro columnas. 311 00:23:31,040 --> 00:23:34,985 Así que ahora tiene cuatro columnas siendo utilizadas por el div central, 312 00:23:34,985 --> 00:23:38,020 tres columnas a la izquierda y tres columnas a la derecha. 313 00:23:38,020 --> 00:23:40,650 Así que suma total, tienes 10 columnas. 314 00:23:40,650 --> 00:23:43,730 Por lo tanto, tiene dos columnas que se dejan vacías. 315 00:23:43,730 --> 00:23:46,070 Ahora, si especifica para la fila, 316 00:23:46,070 --> 00:23:50,165 especifica justificar el centro de contenido, entonces, 317 00:23:50,165 --> 00:23:54,570 todo el contenido de esta fila en particular se centrará con 318 00:23:54,570 --> 00:23:59,365 respecto a la fila horizontal. 319 00:23:59,365 --> 00:24:02,080 También puede tener el contenido justificado a la izquierda, 320 00:24:02,080 --> 00:24:05,584 justificado a la derecha y un par de otras opciones. 321 00:24:05,584 --> 00:24:09,260 Los detalles están en la documentación de bootstraps. 322 00:24:09,260 --> 00:24:13,755 Bootstrap también le permite hacer desplazamientos de columna. 323 00:24:13,755 --> 00:24:16,725 ¿ Cómo funciona esto? Veamos un ejemplo. 324 00:24:16,725 --> 00:24:18,710 En este desplazamiento de columna, 325 00:24:18,710 --> 00:24:21,320 podemos especificar una pieza de contenido, 326 00:24:21,320 --> 00:24:27,750 añadir a eso si aplicamos la clase como guión de desplazamiento sm guión uno. 327 00:24:27,750 --> 00:24:33,585 Lo que estamos especificando es para pantallas pequeñas o extra grandes, 328 00:24:33,585 --> 00:24:38,425 esta pieza de contenido debe desplazarse a la derecha por una columna. 329 00:24:38,425 --> 00:24:41,970 Así que cuando se presenta este contenido, como puede ver, 330 00:24:41,970 --> 00:24:49,560 la columna situada más a la izquierda se deja en blanco y el contenido se desplaza a la derecha por una columna. 331 00:24:49,560 --> 00:24:52,925 Y puede diseñar el contenido restante en el lado derecho. 332 00:24:52,925 --> 00:24:55,860 Así que suma total, puede ver que los dos divs 333 00:24:55,860 --> 00:24:59,670 ocuparán 11 columnas pero una columna desplazada a la derecha. 334 00:24:59,670 --> 00:25:05,910 Así es como podemos controlar el diseño del contenido usando un desplazamiento de columna. 335 00:25:05,910 --> 00:25:07,380 Como puede ver, 336 00:25:07,380 --> 00:25:11,280 usando las especificaciones de tamaño de columna, 337 00:25:11,280 --> 00:25:13,540 la alineación vertical y horizontal, 338 00:25:13,540 --> 00:25:15,975 el desplazamiento, el empuje y el tirón, 339 00:25:15,975 --> 00:25:18,635 y flexión primero y flex último, 340 00:25:18,635 --> 00:25:23,925 somos capaces de obtener mucho control sobre cómo diseñamos los 341 00:25:23,925 --> 00:25:29,825 contenidos para diferentes anchos de pantalla y diferentes tamaños de pantalla . 342 00:25:29,825 --> 00:25:36,800 Bootstrap va aún más allá al permitirle anidar contenido dentro de divs. 343 00:25:36,800 --> 00:25:39,585 Así, por ejemplo, si especifica dos divs, 344 00:25:39,585 --> 00:25:43,130 como se ve con la columna sm cinco y la columna sm siete, 345 00:25:43,130 --> 00:25:45,725 los dos contenidos se presentarán como se ve aquí. 346 00:25:45,725 --> 00:25:48,265 Ahora, dentro del div derecho, 347 00:25:48,265 --> 00:25:50,630 puedo volver a entrar y dividir el 348 00:25:50,630 --> 00:25:58,080 ancho de ese div en una fila y luego esa fila me dará automáticamente 349 00:25:58,080 --> 00:26:04,960 otras 12 columnas para esa parte de la pantalla y luego puedo hacer el diseño usando 350 00:26:04,960 --> 00:26:13,330 anidación de los divs y hacer el diseño para diferentes partes de esa columna . 351 00:26:13,330 --> 00:26:15,595 Así que anidar como este, 352 00:26:15,595 --> 00:26:23,570 le brinda aún más flexibilidad en la forma en que diseña el contenido en su tono. 353 00:26:23,570 --> 00:26:27,910 Con toda la discusión sobre Bootstrap Grid System y cómo 354 00:26:27,910 --> 00:26:34,280 Bootstrap Grid soporta varias formas de diseñar el contenido 355 00:26:34,280 --> 00:26:39,670 , ahora vamos a pasar a nuestro siguiente conjunto de ejercicios. 356 00:26:39,670 --> 00:26:45,820 Vamos a aplicar la cuadrícula de Bootstrap a nuestra página index.html con el 357 00:26:45,820 --> 00:26:52,770 fin de hacer el diseño del contenido dentro de la página index.html. 358 00:26:52,770 --> 00:26:57,350 También usaremos algunas clases CSS personalizadas.