1 00:00:03,800 --> 00:00:07,660 Continuaremos con el ejercicio de la cuadrícula de arranque 2 00:00:07,660 --> 00:00:11,074 que comenzamos en el ejercicio anterior. 3 00:00:11,074 --> 00:00:14,535 Vamos a hacer algunas cosas más en nuestra 4 00:00:14,535 --> 00:00:18,965 página index.html con el fin de mejorar su diseño. 5 00:00:18,965 --> 00:00:24,085 Vamos a usar algunas clases CSS personalizadas y agregar algo de color 6 00:00:24,085 --> 00:00:30,535 a nuestra página index.html usando clases CSS personalizadas. 7 00:00:30,535 --> 00:00:39,265 Lo siguiente que voy a hacer es bajar al pie de página y para este UL aquí, 8 00:00:39,265 --> 00:00:42,790 notarás que esta lista cuando mires 9 00:00:42,790 --> 00:00:49,705 nuestra página web se muestra en la página web usando esta lista con viñetas aquí. 10 00:00:49,705 --> 00:00:52,820 No estoy muy contento con esta lista con viñetas, 11 00:00:52,820 --> 00:00:59,350 quiero eliminar estos puntos de viñeta y luego simplemente mostrarlos como solo los enlaces allí. 12 00:00:59,350 --> 00:01:03,440 Entonces, para hacer eso, voy a usar otro estilo de lista llamado como 13 00:01:03,440 --> 00:01:08,120 lista sin estilo y aplicar eso a esa etiqueta UL allí. 14 00:01:08,120 --> 00:01:09,950 Volviendo a nuestra página web, 15 00:01:09,950 --> 00:01:12,425 a esta etiqueta UL en el pie de página, 16 00:01:12,425 --> 00:01:21,520 voy a aplicar la clase como lista sin estilo, 17 00:01:23,230 --> 00:01:32,275 y esto eliminaría esas balas delante de estos enlaces allí. 18 00:01:32,275 --> 00:01:40,375 Ahora, permítanme agregar algunas clases CSS personalizadas a la página index.html. 19 00:01:40,375 --> 00:01:49,635 Para ello, ahora crearemos una carpeta aquí y la nombraremos como la carpeta CSS aquí. 20 00:01:49,635 --> 00:01:51,650 Dentro de la carpeta CSS, 21 00:01:51,650 --> 00:01:59,670 voy a crear un nuevo archivo y el nombre del archivo como styles.css. 22 00:01:59,670 --> 00:02:02,835 Ahora, dentro del archivo styles.css, 23 00:02:02,835 --> 00:02:11,685 ahora puedo agregar algunas clases CSS para darle estilo a nuestra página. 24 00:02:11,685 --> 00:02:14,600 Permítanme agregar algunas clases CSS aquí. 25 00:02:14,600 --> 00:02:18,765 Entonces, agregaría mi primera clase como encabezado de fila. 26 00:02:18,765 --> 00:02:21,035 Entonces, como su nombre lo indica, 27 00:02:21,035 --> 00:02:23,770 esta clase estoy aplicando al encabezado. 28 00:02:23,770 --> 00:02:28,865 Y luego, aplicaría el margen como 29 00:02:28,865 --> 00:02:34,330 cero píxel auto y 30 00:02:34,330 --> 00:02:40,150 luego relleno como cero píxel auto. 31 00:02:40,150 --> 00:02:41,820 Por lo tanto, esto es para el encabezado de fila. 32 00:02:41,820 --> 00:02:46,100 Por lo tanto, voy a tener margen cero y relleno cero para el encabezado de fila. 33 00:02:46,100 --> 00:02:48,840 Y luego para el contenido de la fila, 34 00:02:48,840 --> 00:02:54,005 así que voy a agregar una clase CSS más llamada fila-contenido. 35 00:02:54,005 --> 00:03:01,470 Y luego para esto, agregaré margen cero píxel auto, 36 00:03:01,470 --> 00:03:07,815 y luego el relleno lo tendrá en 50 píxeles, 37 00:03:07,815 --> 00:03:16,170 cero píxel, 50 y cero píxel. 38 00:03:16,170 --> 00:03:21,060 Entonces voy a añadir un borde en 39 00:03:21,060 --> 00:03:28,880 la parte inferior de mi fila aquí. 40 00:03:28,880 --> 00:03:35,195 Y luego, el borde le daré un píxel y luego lo llamaré una cresta. 41 00:03:35,195 --> 00:03:45,915 Y estableceré la altura mínima en 400 píxeles para el contenido aquí. 42 00:03:45,915 --> 00:03:51,910 De esa manera, mi página web se verá más agradable en la pantalla. 43 00:03:51,910 --> 00:03:55,475 Ahora esto de nuevo, tiene que tratar de 44 00:03:55,475 --> 00:03:59,900 ver hasta que esté satisfecho con la forma en que se presenta la página. 45 00:03:59,900 --> 00:04:03,560 Ahora también, voy a incluir 46 00:04:03,560 --> 00:04:08,320 una clase más llamada como el pie de página que como podría haber adivinado, 47 00:04:08,320 --> 00:04:13,560 voy a aplicar al pie de página y 48 00:04:13,560 --> 00:04:21,100 voy a aplicar un color de fondo al pie como D1C4E9. 49 00:04:29,140 --> 00:04:32,465 Si me preguntas cómo seleccioné el color, 50 00:04:32,465 --> 00:04:37,630 solo busqué el color y entonces estaba contento con ese color. 51 00:04:37,630 --> 00:04:41,460 Puedes elegir cualquier color que quieras aplicar, 52 00:04:41,460 --> 00:04:44,460 pero este color parece ser bueno para mí. 53 00:04:44,460 --> 00:04:46,950 Entonces, agregué ese color. 54 00:04:46,950 --> 00:04:50,110 Y para el relleno, para el pie de página, 55 00:04:50,110 --> 00:04:58,890 agregaría 20 píxeles y cero píxeles. 56 00:04:59,100 --> 00:05:06,160 Ahora, una vez que haya agregado estos estilos a mi archivo CSS, 57 00:05:06,160 --> 00:05:10,610 permítanme aplicar el archivo CSS a la página index.html. 58 00:05:10,610 --> 00:05:12,820 Voy a la página index.html. 59 00:05:12,820 --> 00:05:18,950 Obviamente, necesito usar ese archivo CSS dentro de mi página index.html. 60 00:05:18,950 --> 00:05:22,160 Así que justo después del archivo CSS de arranque, 61 00:05:22,160 --> 00:05:32,200 voy a hacer un enlace y una hoja de estilo, 62 00:05:32,970 --> 00:05:39,900 y este es el archivo style.css allí. 63 00:05:39,900 --> 00:05:43,525 Entonces ahí es donde se almacena mi archivo CSS. 64 00:05:43,525 --> 00:05:49,760 Entonces, voy a incluir eso en mi página index.html. 65 00:05:49,760 --> 00:05:56,350 Ahora, voy a entrar en el cuerpo y aplicar las clases que acabo de crear. 66 00:05:56,350 --> 00:05:57,955 Así que yendo al encabezado, 67 00:05:57,955 --> 00:06:03,055 aplicaré la clase de encabezado de fila al div en el encabezado. 68 00:06:03,055 --> 00:06:07,475 Luego, para el contenido, 69 00:06:07,475 --> 00:06:14,085 aplicaría las clases de contenido de fila a las filas allí. 70 00:06:14,085 --> 00:06:21,180 Por lo tanto, a las tres filas en el contenido, 71 00:06:21,190 --> 00:06:26,690 aplico la clase de contenido de fila y luego bajando al pie de página, 72 00:06:26,690 --> 00:06:28,325 a la etiqueta de pie de página, 73 00:06:28,325 --> 00:06:32,315 aplicaré el pie de página de la clase aquí, 74 00:06:32,315 --> 00:06:35,240 y luego guardaré los cambios. 75 00:06:35,240 --> 00:06:38,290 Vamos a echar un vistazo a esa página ahora. Al 76 00:06:38,290 --> 00:06:40,430 ir a su página web, 77 00:06:40,430 --> 00:06:45,970 ya estamos empezando a ver algunos cambios interesantes en la página web. 78 00:06:45,970 --> 00:06:48,960 Por lo tanto, ahora puede ver que el contenido en 79 00:06:48,960 --> 00:06:52,445 la página web se ha presentado un poco más limpio. 80 00:06:52,445 --> 00:06:58,290 Ese es el borde inferior que agregamos al contenido de la fila, 81 00:06:58,290 --> 00:07:03,200 por lo que puede ver que hay suficiente separación entre las filas aunque 82 00:07:03,200 --> 00:07:08,530 el contenido de las filas todavía está colocado hacia la parte superior de las filas, 83 00:07:08,530 --> 00:07:11,900 por lo que tiene estas tres filas y luego mira el pie de página, 84 00:07:11,900 --> 00:07:17,740 el pie de página ahora tiene adquirió el color de fondo que aplicé, 85 00:07:17,740 --> 00:07:26,717 y observe cómo los enlaces se diseñan con la lista sin estilo en el lado izquierdo aquí. 86 00:07:26,717 --> 00:07:33,495 Aún no hemos terminado, tenemos que hacer algunos cambios más en la página index.html, 87 00:07:33,495 --> 00:07:39,320 y luego volver y echar un vistazo al resultado final de este ejercicio. 88 00:07:39,320 --> 00:07:41,485 Volviendo a su Editor, 89 00:07:41,485 --> 00:07:46,955 voy a agregar algunas clases CSS más en mi estructura de estilo, 90 00:07:46,955 --> 00:07:53,290 es un archivo, así que voy a entrar allí y luego agregar una clase llamada Jumbotron. 91 00:07:53,290 --> 00:07:59,265 Por lo tanto, verá que ya hemos aplicado el Jumbotron a nuestro encabezado allí. 92 00:07:59,265 --> 00:08:03,145 Ahora, si agrego más propiedades a esta clase Jumbotron aquí, 93 00:08:03,145 --> 00:08:05,875 esto se aplicará al Jumbotron, 94 00:08:05,875 --> 00:08:11,535 además del Jumbotron predeterminado estándar que bootstrap ya incluye. 95 00:08:11,535 --> 00:08:13,835 Voy a agregar algunas cosas más, 96 00:08:13,835 --> 00:08:17,355 voy a agregar un relleno de 97 00:08:17,735 --> 00:08:28,765 70 y 30 píxeles en su entorno, 98 00:08:29,095 --> 00:08:38,515 y luego un margen de cero píxel alrededor, 99 00:08:38,515 --> 00:08:51,685 y voy a establecer el fondo de esto en 9575CD. 100 00:08:51,685 --> 00:09:01,065 Esto es algo de un color púrpura más oscuro que parece ir muy bien en el Jumbotron. 101 00:09:01,065 --> 00:09:03,430 Una vez más, por prueba y error, 102 00:09:03,430 --> 00:09:04,975 seleccioné ese color, 103 00:09:04,975 --> 00:09:11,735 y también el color del texto como blanco floral. 104 00:09:13,205 --> 00:09:15,305 Entonces, para el Jumbotron, 105 00:09:15,305 --> 00:09:18,615 vamos a aplicar esas clases, y también, 106 00:09:18,615 --> 00:09:24,765 voy a aplicar una clase más a la clase de dirección. 107 00:09:24,765 --> 00:09:26,520 Tenemos una dirección en el pie de página, 108 00:09:26,520 --> 00:09:34,685 así que voy a cambiar el tamaño de la fuente de esa a 80 por ciento, 109 00:09:34,685 --> 00:09:38,935 una fuente ligeramente más pequeña que 110 00:09:38,955 --> 00:09:43,455 la fuente normal, y el margen, le daré un 111 00:09:43,455 --> 00:09:50,285 píxel cero, y el color, voy a usar cero F, 112 00:09:50,285 --> 00:09:52,350 cero F, cero F, 113 00:09:52,350 --> 00:09:54,730 y luego guardar los cambios. 114 00:09:54,730 --> 00:09:58,730 Así que se agregaron un par de clases CSS 115 00:09:58,730 --> 00:10:01,530 más, volviendo a index.html. 116 00:10:01,530 --> 00:10:03,475 Lo que voy a hacer ahora, 117 00:10:03,475 --> 00:10:07,775 es ir a las filas de contenido y luego 118 00:10:07,775 --> 00:10:11,990 voy a intentar posicionar este contenido en el medio, 119 00:10:11,990 --> 00:10:14,605 verticalmente en esa fila. 120 00:10:14,605 --> 00:10:17,930 Aquí es donde voy a tomar la ayuda de la 121 00:10:17,930 --> 00:10:23,050 alineación vertical que soporta la cuadrícula de arranque a través del soporte de Flexbox. 122 00:10:23,050 --> 00:10:31,395 Para hacer eso, diría align-items-center, 123 00:10:31,495 --> 00:10:38,620 así que esta es la otra clase que necesito agregar, align-items-center. 124 00:10:38,620 --> 00:10:45,475 Y voy a agregar eso a las dos filas restantes también, 125 00:10:45,475 --> 00:10:51,735 alinear elementos centrados en la segunda y la tercera fila, 126 00:10:53,185 --> 00:11:01,965 y eso debería hacer una justificación vertical del contenido de las filas. 127 00:11:01,965 --> 00:11:03,880 Veremos el resultado en un minuto. 128 00:11:03,880 --> 00:11:06,230 Bajando al pie de página. 129 00:11:06,230 --> 00:11:09,835 En el pie de página, verá que hemos utilizado 130 00:11:09,835 --> 00:11:13,825 la columna auto para este contenido de derechos de autor allí. 131 00:11:13,825 --> 00:11:18,265 Ahora, voy a posicionar esto justo en el medio horizontalmente 132 00:11:18,265 --> 00:11:24,160 usando esa clase de centro de contenido justificado, 133 00:11:24,160 --> 00:11:32,755 por lo que hay un contenido justificado y algunas otras clases allí. 134 00:11:32,755 --> 00:11:35,890 Voy a usar para justificar la clase de centro de contenido para eso. 135 00:11:35,890 --> 00:11:44,605 Eso esencialmente colocará esa columna en el centro de la fila allí. 136 00:11:44,725 --> 00:11:48,560 Eso se aplica a eso, y luego, 137 00:11:48,560 --> 00:11:51,415 un pequeño cambio que voy a hacer, 138 00:11:51,415 --> 00:11:53,370 es a este div interno allí, 139 00:11:53,370 --> 00:12:01,665 voy a aplicar una clase como centro de texto a eso, para 140 00:12:01,665 --> 00:12:06,435 que estos enlaces estén centrados en la pantalla. 141 00:12:06,435 --> 00:12:11,340 Con estos cambios, vamos a echar un vistazo a la página web, 142 00:12:11,340 --> 00:12:14,135 al final de este ejercicio. Al 143 00:12:14,135 --> 00:12:16,120 ir a nuestra página web, 144 00:12:16,120 --> 00:12:20,020 nuestra página web ya está empezando a verse aún mejor ahora, por 145 00:12:20,020 --> 00:12:25,885 lo que ahora puede ver que el Jumbotron ahora está diseñado con un nuevo color de fondo, 146 00:12:25,885 --> 00:12:28,955 que es un poco morado oscuro allí, 147 00:12:28,955 --> 00:12:34,980 y las letras ahora están en color blanco floral, 148 00:12:34,980 --> 00:12:37,190 un poco sangradas allí, 149 00:12:37,190 --> 00:12:44,345 entonces ahora puede ver que el contenido de las filas de contenido ahora está centrado verticalmente, 150 00:12:44,345 --> 00:12:47,500 para las tres filas de contenido. 151 00:12:47,500 --> 00:12:54,645 Este es el uso del align-items-center que aplicamos a las filas allí. 152 00:12:54,645 --> 00:12:56,525 Luego yendo al pie de página, 153 00:12:56,525 --> 00:13:03,380 ahora puede ver que este derecho de autor está ahora justificado en el centro de la pantalla. 154 00:13:03,380 --> 00:13:08,155 Mira cómo se han centrado los enlaces aquí. 155 00:13:08,155 --> 00:13:15,985 Me di cuenta de que también quiero posicionar este centrado verticalmente en esta fila en particular, 156 00:13:15,985 --> 00:13:19,855 así que vamos a aplicar una clase más para mover esto 157 00:13:19,855 --> 00:13:24,540 al centro de esta fila en particular verticalmente. 158 00:13:24,540 --> 00:13:27,100 Así que para hacer eso, volviendo al índice. 159 00:13:27,100 --> 00:13:34,115 html, en el pie de página de esa columna en particular que los contiene, 160 00:13:34,115 --> 00:13:41,795 aplicaré la clase como align-self-center. 161 00:13:41,795 --> 00:13:48,485 Esto debe aplicarse al div que usa la clase de columna. 162 00:13:48,485 --> 00:13:54,185 Con esto, ese contenido en particular se alineará con el centro de la fila. 163 00:13:54,185 --> 00:13:56,570 El contenido restante permanecerá en la parte superior. 164 00:13:56,570 --> 00:13:59,575 Echemos un último vistazo al pie de página. 165 00:13:59,575 --> 00:14:01,705 Ir al pie de página en nuestra página web, 166 00:14:01,705 --> 00:14:06,345 ahora puede ver cómo se ha posicionado verticalmente en el centro. 167 00:14:06,345 --> 00:14:10,715 Estas dos piezas de contenido todavía están alineadas a la parte superior de la fila, 168 00:14:10,715 --> 00:14:15,215 eso está bien porque eso se ve bien ahí dentro, 169 00:14:15,215 --> 00:14:21,340 pero este lo he arrastrado verticalmente hacia el centro de esta fila en particular. 170 00:14:21,340 --> 00:14:25,545 Con esto, completamos este ejercicio. 171 00:14:25,545 --> 00:14:30,005 En este ejercicio, vimos el uso de clases CSS personalizadas, 172 00:14:30,005 --> 00:14:35,125 y también usamos algunas de las clases para 173 00:14:35,125 --> 00:14:41,660 justificar el contenido horizontal y verticalmente en nuestras filas. 174 00:14:41,660 --> 00:14:45,695 Este es un buen momento para que hagas un buen comentario con el mensaje, 175 00:14:45,695 --> 00:14:48,735 Cuadrícula de Bootstrap, segunda parte.