1 00:00:03,750 --> 00:00:11,555 Nuestro próximo ejercicio analiza las formas de mostrar contenido en nuestra página web. 2 00:00:11,555 --> 00:00:17,190 Ellos analizan cómo podemos incluir tablas en nuestra página web y cómo podemos 3 00:00:17,190 --> 00:00:23,845 diseñar esas tablas usando las clases de Bootstrap para diseñar tablas, 4 00:00:23,845 --> 00:00:27,720 incluido el diseño receptivo de tablas. 5 00:00:27,720 --> 00:00:30,860 También veremos otro componente versátil 6 00:00:30,860 --> 00:00:34,290 que está disponible en Bootstrap llamado como tarjeta. 7 00:00:34,290 --> 00:00:39,125 Una tarjeta le permite mostrar contenido de millones de maneras. 8 00:00:39,125 --> 00:00:44,495 Así que veremos dos formas diferentes de usar una tarjeta para mostrar contenido. 9 00:00:44,495 --> 00:00:49,275 Más adelante, veremos el uso de tarjetas una y otra vez 10 00:00:49,275 --> 00:00:56,635 para futuros diseños de ciertas partes de nuestro sitio web. 11 00:00:56,635 --> 00:01:02,520 Para comenzar, abra la página aboutus.html. 12 00:01:02,520 --> 00:01:06,035 Vamos a insertar una tabla y dos tarjetas 13 00:01:06,035 --> 00:01:10,215 en la página aboutus.html para mostrar alguna tarjeta. 14 00:01:10,215 --> 00:01:19,130 Primero, desplácese lentamente hacia abajo hasta después de esa tarjeta para información de liderazgo, 15 00:01:19,130 --> 00:01:23,170 y justo ahí voy a introducir otro div dentro del 16 00:01:23,170 --> 00:01:28,045 cual voy a adjuntar la tabla aquí. 17 00:01:28,045 --> 00:01:31,640 Por lo tanto, introduciré una nueva fila aquí, 18 00:01:31,640 --> 00:01:38,135 con la clase como contenido de fila de fila. 19 00:01:38,135 --> 00:01:41,185 Y dentro de este div, 20 00:01:41,185 --> 00:01:51,205 introduciremos una columna que alojará la tabla aquí. 21 00:01:51,205 --> 00:01:55,850 Entonces, introduciré una columna, columna 12, 22 00:01:55,870 --> 00:02:05,045 columna sm-9 y cerraré el div. 23 00:02:05,045 --> 00:02:11,605 Y dentro de div, permítanme dar un encabezado aquí 24 00:02:11,605 --> 00:02:21,940 Hechos y cifras y cerrar el h2. 25 00:02:23,490 --> 00:02:29,770 Justo después de eso, permítanme presentar otro div, 26 00:02:33,140 --> 00:02:43,320 que las clases columna sm y columna sm-3 y cierran ese div allí. 27 00:02:43,320 --> 00:02:46,850 Ahora mismo vamos a dejar el segundo div vacío. 28 00:02:46,850 --> 00:02:53,140 Voy a llenar la tabla en el primer div aquí y 29 00:02:53,140 --> 00:03:00,435 luego echaremos un vistazo rápido a la tabla después de agregar el código para la tabla. 30 00:03:00,435 --> 00:03:04,525 Así que aquí he enumerado en el código de la tabla. 31 00:03:04,525 --> 00:03:12,190 Echemos un vistazo rápido a la mesa y luego volveremos para discutir este código aquí. 32 00:03:12,190 --> 00:03:20,075 Ir a nuestra página Acerca de la que ya hemos estado trabajando anteriormente, 33 00:03:20,075 --> 00:03:23,080 después de la sección Liderazgo Corporativo, 34 00:03:23,080 --> 00:03:27,645 verá una nueva fila aquí presentando la tabla. 35 00:03:27,645 --> 00:03:30,270 Por lo tanto, tenga en cuenta cómo se diseña la tabla, 36 00:03:30,270 --> 00:03:36,695 por lo que tenemos el encabezado con un h2 incluido allí, 37 00:03:36,695 --> 00:03:40,465 pero concentremos específicamente en esta tabla. 38 00:03:40,465 --> 00:03:43,735 Así que verá que esta tabla se ha diseñado 39 00:03:43,735 --> 00:03:48,125 usando algunas clases de Bootstrap que se utilizan para mejorar la tabla. 40 00:03:48,125 --> 00:03:54,735 El encabezado se ha renderizado con un fondo oscuro, 41 00:03:54,735 --> 00:04:00,770 y luego las reglas están diseñadas de tal manera que las filas alternas sean de 42 00:04:00,770 --> 00:04:07,295 diferente color para que pueda distinguir claramente las filas de esta tabla. 43 00:04:07,295 --> 00:04:13,185 Esto es lo que en términos de Bootstrap se conoce como tabla rayada. 44 00:04:13,185 --> 00:04:17,360 Este es un ejemplo de cómo se puede aplicar estilo a una tabla. 45 00:04:17,360 --> 00:04:23,250 Ahora, curiosamente, si mira la misma tabla en un dispositivo pequeño, 46 00:04:23,250 --> 00:04:25,420 notaría que la tabla sigue siendo 47 00:04:25,420 --> 00:04:29,450 visible, excepto que esta tabla ahora se vuelve desplazable. Por 48 00:04:29,450 --> 00:04:34,280 lo tanto, todo lo que se pueda mostrar dentro del contenido se mostrará y 49 00:04:34,280 --> 00:04:39,120 el resto de la tabla se puede desplazar horizontalmente en su lugar. 50 00:04:39,120 --> 00:04:47,840 Así que este es el componente sensible del soporte de Bootstrap para tablas en acción. 51 00:04:47,840 --> 00:04:52,120 Ahora vamos a echar un vistazo al código en sí. 52 00:04:52,120 --> 00:04:54,970 Ahora, obviamente, esta tabla es bastante sencilla, 53 00:04:54,970 --> 00:04:57,924 tiene un montón de filas y algunas columnas. 54 00:04:57,924 --> 00:05:02,070 Así que esperarás que use las típicas 55 00:05:02,070 --> 00:05:06,365 etiquetas th, td y tr allí. 56 00:05:06,365 --> 00:05:08,225 Al volver al código, 57 00:05:08,225 --> 00:05:12,490 notarás que estoy adjuntando esta tabla dentro de 58 00:05:12,490 --> 00:05:16,840 div a la que he aplicado la tabla de clases sensible. 59 00:05:16,840 --> 00:05:19,700 Así que esto es lo que hace que esta tabla responda para que en 60 00:05:19,700 --> 00:05:24,490 pantallas más pequeñas pueda desplazarse horizontalmente por la tabla. 61 00:05:24,490 --> 00:05:26,720 Ahora, para la tabla en sí, 62 00:05:26,720 --> 00:05:29,800 observe cómo he aplicado dos clases. 63 00:05:29,800 --> 00:05:31,230 Una es la clase de tabla, 64 00:05:31,230 --> 00:05:34,825 por lo que esto está anulando la 65 00:05:34,825 --> 00:05:39,375 representación de la tabla predeterminada en los navegadores proporcionando las propias clases de Bootstrap. 66 00:05:39,375 --> 00:05:41,760 Y el segundo dice a rayas de mesa. 67 00:05:41,760 --> 00:05:48,280 Entonces esto es lo que diseña una tabla con filas alternas en diferentes colores aquí. 68 00:05:48,280 --> 00:05:50,610 Luego, la cabeza en sí, 69 00:05:50,610 --> 00:05:55,050 para que pueda ver que los encabezados descritos aquí con la clase thead-dark, 70 00:05:55,050 --> 00:05:57,925 por lo que esto hace que la cabeza sea oscura. 71 00:05:57,925 --> 00:06:06,630 Y luego verá el dibujo de la tabla se describe aquí con las etiquetas th aquí. 72 00:06:06,630 --> 00:06:09,480 Así que esta es la definición de tabla estándar. 73 00:06:09,480 --> 00:06:16,410 El cuerpo de la tabla en sí es el uso estándar html de tr, 74 00:06:16,410 --> 00:06:22,760 y td, y th elementos con los que ya está familiarizado en html5. 75 00:06:22,760 --> 00:06:27,180 Por lo tanto, esto es con lo que se construye la tabla, 76 00:06:27,180 --> 00:06:31,075 y luego se cierra el cuerpo de la tabla. Así que eso es todo. 77 00:06:31,075 --> 00:06:36,670 Así que todo lo que es único sobre Bootstrap en sí es la aplicación de 78 00:06:36,670 --> 00:06:40,060 estas clases específicas de Bootstrap al 79 00:06:40,060 --> 00:06:47,130 elemento de la tabla en sí para darle un estilo más, 80 00:06:47,130 --> 00:06:51,360 para encajar en una página web de diseño de Bootstrap. 81 00:06:51,360 --> 00:06:55,360 El siguiente componente que voy a agregar a la 82 00:06:55,360 --> 00:06:59,595 página aboutus.html es un componente de tarjeta en Bootstrap. 83 00:06:59,595 --> 00:07:02,650 El componente de la tarjeta nos permite mostrar 84 00:07:02,650 --> 00:07:06,850 el contenido diferenciándolo del resto de ese contenido. 85 00:07:06,850 --> 00:07:12,925 Ahora aquí, desplazándose a la primera fila aquí, 86 00:07:12,925 --> 00:07:16,925 allí tenemos nuestra historia en el segundo uso de div, 87 00:07:16,925 --> 00:07:20,915 observe que el primer div ya está ocupando col-sm-6, 88 00:07:20,915 --> 00:07:23,915 el segundo div está vacío actualmente. 89 00:07:23,915 --> 00:07:25,355 Entonces, a este div, 90 00:07:25,355 --> 00:07:31,320 agregaré en la clase como col-sm. 91 00:07:31,320 --> 00:07:40,670 A partir de entonces, entrando en este div presentaré otro div a la tarjeta de clase aquí. 92 00:07:40,670 --> 00:07:42,325 Así que dentro de esos div, 93 00:07:42,325 --> 00:07:46,755 voy a construir mi tarjeta para mostrar algo de contenido aquí. 94 00:07:46,755 --> 00:07:53,870 Entonces, en este div, vamos a introducir un h3 que 95 00:07:53,870 --> 00:08:05,235 la clase como card-header bg-primary. 96 00:08:05,235 --> 00:08:08,110 Así que verá que este h3 se mostrará como 97 00:08:08,110 --> 00:08:12,755 un encabezado de tarjeta con ese fondo como principal 98 00:08:12,755 --> 00:08:21,165 y luego el texto blanco que clase Bootstrap definirá el texto para ser blanco en color. 99 00:08:21,165 --> 00:08:24,715 Y luego dentro de este h3, 100 00:08:24,715 --> 00:08:31,090 voy a presentar el título de esta tarjeta aquí que 101 00:08:31,090 --> 00:08:37,580 es 'Facts At a Glance. ' 102 00:08:37,580 --> 00:08:41,950 Para que pueda mostrar algo de contenido dentro de este div aquí. 103 00:08:41,950 --> 00:08:44,915 Ahora, a esta tarjeta, 104 00:08:44,915 --> 00:08:48,520 luego voy a agregar otro div interno 105 00:08:48,520 --> 00:08:55,950 aquí con la clase como card-body, 106 00:08:55,950 --> 00:08:59,080 y dentro de este card-body estará 107 00:08:59,080 --> 00:09:03,370 el contenido real que se ha mostrado en esta tarjeta. 108 00:09:03,370 --> 00:09:10,310 Vamos a guardar los cambios y luego ir y echar un vistazo rápidamente a nuestra página web. Al 109 00:09:10,310 --> 00:09:12,100 ir a nuestra página web, 110 00:09:12,100 --> 00:09:15,860 ya podemos ver la tarjeta tomando forma en nuestra página web, por 111 00:09:15,860 --> 00:09:19,620 lo que puede ver que la mitad izquierda está ocupada por la Historia 112 00:09:19,620 --> 00:09:24,085 y la mitad derecha verá la tarjeta puesta en su lugar. 113 00:09:24,085 --> 00:09:27,135 Vamos a añadir algo de contenido a esta tarjeta. Al 114 00:09:27,135 --> 00:09:29,140 entrar en este bloque de tarjetas, 115 00:09:29,140 --> 00:09:32,220 ahora voy a usar una lista de descripciones 116 00:09:32,220 --> 00:09:36,080 y esta lista de descripciones en Bootstrap me permite 117 00:09:36,080 --> 00:09:45,705 aplicar las clases de fila y columna a ella y así formatear el contenido dentro. 118 00:09:45,705 --> 00:09:48,360 Así que dentro de esta lista de descripción, 119 00:09:48,360 --> 00:09:52,190 voy a agregar 120 00:09:54,890 --> 00:10:00,110 en el dt que la clase y col-6 aquí, 121 00:10:00,110 --> 00:10:03,420 lo que significa que esto va a ocupar seis columnas 122 00:10:03,420 --> 00:10:07,085 dentro de esta lista de descripción que a su vez es una fila aquí. 123 00:10:07,085 --> 00:10:13,785 Así que anidando como ves entrar en la imagen aquí. 124 00:10:13,785 --> 00:10:16,250 Entonces, a este dt, 125 00:10:16,250 --> 00:10:20,190 voy a agregar así este título de descripción aquí, 126 00:10:20,190 --> 00:10:25,470 y luego debajo de eso voy a agregar en el dd con 127 00:10:25,470 --> 00:10:33,330 la clase col-6 aquí y luego puedo agregar en algún contexto aquí. 128 00:10:36,960 --> 00:10:40,310 Y dd aquí. 129 00:10:41,880 --> 00:10:46,755 Vamos a guardar los cambios y echar un vistazo rápido a nuestra tarjeta. 130 00:10:46,755 --> 00:10:50,445 Ir a nuestra tarjeta, ahora puede ver cómo 131 00:10:50,445 --> 00:10:55,265 la lista de descripciones me permite mostrar información. 132 00:10:55,265 --> 00:11:02,700 Dentro de mi tarjeta, se puede ver claramente el lado izquierdo y el lado derecho. 133 00:11:02,700 --> 00:11:07,035 Aquí estamos aprovechando la lista de descripciones y, 134 00:11:07,035 --> 00:11:09,215 añadiendo la información allí. 135 00:11:09,215 --> 00:11:14,590 Permítanme terminar las partes restantes añadiendo el código, 136 00:11:14,590 --> 00:11:19,745 y luego volver y echar un vistazo a la versión final de esta tarjeta. 137 00:11:19,745 --> 00:11:22,850 Aquí, puede ver que he completado la adición en 138 00:11:22,850 --> 00:11:25,895 las partes restantes de mi lista de descripciones. 139 00:11:25,895 --> 00:11:31,155 Vamos a echar un vistazo rápido a nuestra versión final de esa tarjeta. 140 00:11:31,155 --> 00:11:33,290 Echando un vistazo a la tarjeta, 141 00:11:33,290 --> 00:11:34,620 y cómo está tomando forma. 142 00:11:34,620 --> 00:11:39,340 Aquí, ahora puede ver cómo podemos hacer uso de una tarjeta para mostrar 143 00:11:39,340 --> 00:11:41,760 algún contenido en nuestra página web y 144 00:11:41,760 --> 00:11:44,725 diferenciarlo del resto del contenido a la página Web. 145 00:11:44,725 --> 00:11:50,325 Por lo tanto, una tarjeta es un componente muy versátil que nos permite mostrar contenido como este. 146 00:11:50,325 --> 00:11:52,500 Continuemos con este ejercicio, 147 00:11:52,500 --> 00:11:56,785 añadiendo otra tarjeta a esta página web. 148 00:11:56,785 --> 00:12:01,410 Volvamos ahora de nuevo a nuestra página aboutus.html. 149 00:12:01,410 --> 00:12:06,170 Y justo debajo de la tarjeta que ya hemos agregado anteriormente, 150 00:12:06,170 --> 00:12:14,790 voy a agregar en otro div con la clase «col-12" aquí. 151 00:12:14,790 --> 00:12:16,910 Y luego, dentro de este div, 152 00:12:16,910 --> 00:12:24,670 voy a construir otra tarjeta aquí para mostrar algo de información adicional. 153 00:12:24,670 --> 00:12:26,495 Así que dentro de este div, 154 00:12:26,495 --> 00:12:30,210 voy a construir una tarjeta con 155 00:12:30,210 --> 00:12:38,915 la clase «tarjeta de carta-cuerpo bg-light». 156 00:12:38,915 --> 00:12:45,580 Entonces, verás que estoy aplicando tanto la tarjeta como el cuerpo de la tarjeta al mismo div aquí. 157 00:12:45,580 --> 00:12:49,300 Lo que significa que esta tarjeta en particular no va a tener 158 00:12:49,300 --> 00:12:54,835 ningún encabezado de tarjeta, sino que sólo contiene el cuerpo de la tarjeta aquí. 159 00:12:54,835 --> 00:12:59,545 Y luego, también, la bg-light significa que el fondo estará en color desvanecido. 160 00:12:59,545 --> 00:13:05,120 Algo así como un color grisáceo añadido al fondo. 161 00:13:05,120 --> 00:13:10,495 Así que esto también busca esta tarjeta aparte del resto del contenido aquí. 162 00:13:10,495 --> 00:13:12,815 Ahora, dentro de esta tarjeta, 163 00:13:12,815 --> 00:13:16,250 voy a hacer uso de un código de bloque para mostrar una 164 00:13:16,250 --> 00:13:20,700 pequeña y divertida pieza interesante de información allí. 165 00:13:20,700 --> 00:13:23,980 Así que usaré un blockquote. 166 00:13:23,980 --> 00:13:30,965 Esta es también una etiqueta HTML aquí. 167 00:13:30,965 --> 00:13:37,005 Y luego a esto, aplicaré la clase blockquote de Bootstrap. 168 00:13:37,005 --> 00:13:42,590 Así que Bootstrap estiliza este blockquote a su manera. 169 00:13:42,980 --> 00:13:46,429 Así que vamos a cerrar esa cita de bloques. 170 00:13:46,429 --> 00:13:47,870 Y dentro de este bloque, 171 00:13:47,870 --> 00:13:51,910 voy a incluir una cita aquí. 172 00:13:51,910 --> 00:13:54,320 Así que comenzaré con una p, 173 00:13:54,320 --> 00:13:56,760 y aplicaré una clase llamada mb-0. 174 00:13:56,760 --> 00:14:02,920 MB-0 es una clase de utilidad que Bootstrap proporciona. 175 00:14:02,920 --> 00:14:05,775 Lo que esto significa es margin-inferior cero. 176 00:14:05,775 --> 00:14:09,640 Para este particular, sea cual sea lo que esté incluido en esta etiqueta p, 177 00:14:09,640 --> 00:14:12,135 tendremos un margen inferior de cero. 178 00:14:12,135 --> 00:14:15,865 Y esto me ayuda a mostrar el contenido correctamente aquí. 179 00:14:15,865 --> 00:14:24,900 Así que aquí voy a agregar el contenido real allí, 180 00:14:49,850 --> 00:14:54,970 y luego cerrar esta p. Así que esta p contiene la cita real. 181 00:14:54,970 --> 00:14:56,560 Ahora, a esta cita, para 182 00:14:56,560 --> 00:14:59,180 que vea que en su contenido, 183 00:14:59,180 --> 00:15:05,320 también puede incluir citas en su código allí. 184 00:15:05,320 --> 00:15:10,730 Entonces, a esto, también puedo agregar un pie de página con la clase. 185 00:15:10,730 --> 00:15:14,900 Así que déjame empujar la sangría del pie de página. 186 00:15:14,900 --> 00:15:20,080 Entonces, este pie de página también es una clase que admite blockquote. 187 00:15:20,080 --> 00:15:26,620 Así que lo que incluya en la comilla de bloque, 188 00:15:28,570 --> 00:15:31,105 junto con el pie de página, 189 00:15:31,105 --> 00:15:39,540 le permitirá mostrar al autor de esta cita. 190 00:15:40,420 --> 00:15:45,620 Así que aquí estoy incluyendo al autor, 191 00:15:45,620 --> 00:15:49,165 y luego uno más. 192 00:15:49,165 --> 00:15:58,860 Usando la cita, incluso puedo citar la fuente de esta cita. 193 00:16:01,740 --> 00:16:04,790 Así que puedes ver eso. 194 00:16:24,870 --> 00:16:32,955 Una vez más, esta es solo una cita que estoy usando solo por diversión para mostrarte, 195 00:16:32,955 --> 00:16:35,355 también al mismo tiempo ilustrando 196 00:16:35,355 --> 00:16:42,405 cómo funciona el blockquote, 197 00:16:42,405 --> 00:16:47,800 y también cómo podemos crear otro tipo de tarjeta en Bootstrap. 198 00:16:47,800 --> 00:16:55,845 Entonces, con esto, hemos agregado en el código para mostrar el blockquote aquí. 199 00:16:55,845 --> 00:16:57,890 Así que déjame ver si eso cambia, 200 00:16:57,890 --> 00:17:04,995 y luego iremos a echar un vistazo a cómo se muestra esta cita en nuestra página web. 201 00:17:04,995 --> 00:17:09,270 Ir al navegador, en nuestra página, 202 00:17:09,270 --> 00:17:14,310 puede ver que nuestra historia y los hechos de un vistazo se muestran uno al lado del otro. 203 00:17:14,310 --> 00:17:22,360 Debajo de eso, tengo esta larga pieza de contenido aquí. 204 00:17:22,360 --> 00:17:27,850 Echemos un vistazo a la misma página en una pantalla extra pequeña. 205 00:17:27,850 --> 00:17:29,250 Así que en una pantalla extra pequeña, 206 00:17:29,250 --> 00:17:33,840 se puede ver que la historia y los hechos están apilados en 207 00:17:33,840 --> 00:17:38,120 la parte superior, y la cita está justo abajo aquí en su propia tarjeta. 208 00:17:38,120 --> 00:17:40,130 Así que puede ver dos cartas, 209 00:17:40,130 --> 00:17:42,225 una debajo de la otra aquí, 210 00:17:42,225 --> 00:17:45,860 y luego la tabla en sí se muestra en la parte inferior. 211 00:17:45,860 --> 00:17:50,685 Entonces, la tabla en sí es una tabla desplazable aquí. 212 00:17:50,685 --> 00:17:54,885 Así que con esto, completamos este ejercicio. 213 00:17:54,885 --> 00:17:56,330 Así que en este ejercicio, 214 00:17:56,330 --> 00:18:05,950 aprendimos cómo podemos usar tablas y tarjetas para mostrar contenido en nuestra página web. 215 00:18:05,950 --> 00:18:08,690 Ahora que hemos completado este ejercicio, 216 00:18:08,690 --> 00:18:12,610 es un buen momento para hacer una confirmación de git.