Nuestro próximo ejercicio analiza las formas de mostrar contenido en nuestra página web.
Ellos analizan cómo podemos incluir tablas en nuestra página web y cómo podemos
diseñar esas tablas usando las clases de Bootstrap para diseñar tablas,
incluido el diseño receptivo de tablas.
También veremos otro componente versátil
que está disponible en Bootstrap llamado como tarjeta.
Una tarjeta le permite mostrar contenido de millones de maneras.
Así que veremos dos formas diferentes de usar una tarjeta para mostrar contenido.
Más adelante, veremos el uso de tarjetas una y otra vez
para futuros diseños de ciertas partes de nuestro sitio web.
Para comenzar, abra la página aboutus.html.
Vamos a insertar una tabla y dos tarjetas
en la página aboutus.html para mostrar alguna tarjeta.
Primero, desplácese lentamente hacia abajo hasta después de esa tarjeta para información de liderazgo,
y justo ahí voy a introducir otro div dentro del
cual voy a adjuntar la tabla aquí.
Por lo tanto, introduciré una nueva fila aquí,
con la clase como contenido de fila de fila.
Y dentro de este div,
introduciremos una columna que alojará la tabla aquí.
Entonces, introduciré una columna, columna 12,
columna sm-9 y cerraré el div.
Y dentro de div, permítanme dar un encabezado aquí
Hechos y cifras y cerrar el h2.
Justo después de eso, permítanme presentar otro div,
que las clases columna sm y columna sm-3 y cierran ese div allí.
Ahora mismo vamos a dejar el segundo div vacío.
Voy a llenar la tabla en el primer div aquí y
luego echaremos un vistazo rápido a la tabla después de agregar el código para la tabla.
Así que aquí he enumerado en el código de la tabla.
Echemos un vistazo rápido a la mesa y luego volveremos para discutir este código aquí.
Ir a nuestra página Acerca de la que ya hemos estado trabajando anteriormente,
después de la sección Liderazgo Corporativo,
verá una nueva fila aquí presentando la tabla.
Por lo tanto, tenga en cuenta cómo se diseña la tabla,
por lo que tenemos el encabezado con un h2 incluido allí,
pero concentremos específicamente en esta tabla.
Así que verá que esta tabla se ha diseñado
usando algunas clases de Bootstrap que se utilizan para mejorar la tabla.
El encabezado se ha renderizado con un fondo oscuro,
y luego las reglas están diseñadas de tal manera que las filas alternas sean de
diferente color para que pueda distinguir claramente las filas de esta tabla.
Esto es lo que en términos de Bootstrap se conoce como tabla rayada.
Este es un ejemplo de cómo se puede aplicar estilo a una tabla.
Ahora, curiosamente, si mira la misma tabla en un dispositivo pequeño,
notaría que la tabla sigue siendo
visible, excepto que esta tabla ahora se vuelve desplazable. Por
lo tanto, todo lo que se pueda mostrar dentro del contenido se mostrará y
el resto de la tabla se puede desplazar horizontalmente en su lugar.
Así que este es el componente sensible del soporte de Bootstrap para tablas en acción.
Ahora vamos a echar un vistazo al código en sí.
Ahora, obviamente, esta tabla es bastante sencilla,
tiene un montón de filas y algunas columnas.
Así que esperarás que use las típicas
etiquetas th, td y tr allí.
Al volver al código,
notarás que estoy adjuntando esta tabla dentro de
div a la que he aplicado la tabla de clases sensible.
Así que esto es lo que hace que esta tabla responda para que en
pantallas más pequeñas pueda desplazarse horizontalmente por la tabla.
Ahora, para la tabla en sí,
observe cómo he aplicado dos clases.
Una es la clase de tabla,
por lo que esto está anulando la
representación de la tabla predeterminada en los navegadores proporcionando las propias clases de Bootstrap.
Y el segundo dice a rayas de mesa.
Entonces esto es lo que diseña una tabla con filas alternas en diferentes colores aquí.
Luego, la cabeza en sí,
para que pueda ver que los encabezados descritos aquí con la clase thead-dark,
por lo que esto hace que la cabeza sea oscura.
Y luego verá el dibujo de la tabla se describe aquí con las etiquetas th aquí.
Así que esta es la definición de tabla estándar.
El cuerpo de la tabla en sí es el uso estándar html de tr,
y td, y th elementos con los que ya está familiarizado en html5.
Por lo tanto, esto es con lo que se construye la tabla,
y luego se cierra el cuerpo de la tabla. Así que eso es todo.
Así que todo lo que es único sobre Bootstrap en sí es la aplicación de
estas clases específicas de Bootstrap al
elemento de la tabla en sí para darle un estilo más,
para encajar en una página web de diseño de Bootstrap.
El siguiente componente que voy a agregar a la
página aboutus.html es un componente de tarjeta en Bootstrap.
El componente de la tarjeta nos permite mostrar
el contenido diferenciándolo del resto de ese contenido.
Ahora aquí, desplazándose a la primera fila aquí,
allí tenemos nuestra historia en el segundo uso de div,
observe que el primer div ya está ocupando col-sm-6,
el segundo div está vacío actualmente.
Entonces, a este div,
agregaré en la clase como col-sm.
A partir de entonces, entrando en este div presentaré otro div a la tarjeta de clase aquí.
Así que dentro de esos div,
voy a construir mi tarjeta para mostrar algo de contenido aquí.
Entonces, en este div, vamos a introducir un h3 que
la clase como card-header bg-primary.
Así que verá que este h3 se mostrará como
un encabezado de tarjeta con ese fondo como principal
y luego el texto blanco que clase Bootstrap definirá el texto para ser blanco en color.
Y luego dentro de este h3,
voy a presentar el título de esta tarjeta aquí que
es 'Facts At a Glance. '
Para que pueda mostrar algo de contenido dentro de este div aquí.
Ahora, a esta tarjeta,
luego voy a agregar otro div interno
aquí con la clase como card-body,
y dentro de este card-body estará
el contenido real que se ha mostrado en esta tarjeta.
Vamos a guardar los cambios y luego ir y echar un vistazo rápidamente a nuestra página web. Al
ir a nuestra página web,
ya podemos ver la tarjeta tomando forma en nuestra página web, por
lo que puede ver que la mitad izquierda está ocupada por la Historia
y la mitad derecha verá la tarjeta puesta en su lugar.
Vamos a añadir algo de contenido a esta tarjeta. Al
entrar en este bloque de tarjetas,
ahora voy a usar una lista de descripciones
y esta lista de descripciones en Bootstrap me permite
aplicar las clases de fila y columna a ella y así formatear el contenido dentro.
Así que dentro de esta lista de descripción,
voy a agregar
en el dt que la clase y col-6 aquí,
lo que significa que esto va a ocupar seis columnas
dentro de esta lista de descripción que a su vez es una fila aquí.
Así que anidando como ves entrar en la imagen aquí.
Entonces, a este dt,
voy a agregar así este título de descripción aquí,
y luego debajo de eso voy a agregar en el dd con
la clase col-6 aquí y luego puedo agregar en algún contexto aquí.
Y dd aquí.
Vamos a guardar los cambios y echar un vistazo rápido a nuestra tarjeta.
Ir a nuestra tarjeta, ahora puede ver cómo
la lista de descripciones me permite mostrar información.
Dentro de mi tarjeta, se puede ver claramente el lado izquierdo y el lado derecho.
Aquí estamos aprovechando la lista de descripciones y,
añadiendo la información allí.
Permítanme terminar las partes restantes añadiendo el código,
y luego volver y echar un vistazo a la versión final de esta tarjeta.
Aquí, puede ver que he completado la adición en
las partes restantes de mi lista de descripciones.
Vamos a echar un vistazo rápido a nuestra versión final de esa tarjeta.
Echando un vistazo a la tarjeta,
y cómo está tomando forma.
Aquí, ahora puede ver cómo podemos hacer uso de una tarjeta para mostrar
algún contenido en nuestra página web y
diferenciarlo del resto del contenido a la página Web.
Por lo tanto, una tarjeta es un componente muy versátil que nos permite mostrar contenido como este.
Continuemos con este ejercicio,
añadiendo otra tarjeta a esta página web.
Volvamos ahora de nuevo a nuestra página aboutus.html.
Y justo debajo de la tarjeta que ya hemos agregado anteriormente,
voy a agregar en otro div con la clase «col-12" aquí.
Y luego, dentro de este div,
voy a construir otra tarjeta aquí para mostrar algo de información adicional.
Así que dentro de este div,
voy a construir una tarjeta con
la clase «tarjeta de carta-cuerpo bg-light».
Entonces, verás que estoy aplicando tanto la tarjeta como el cuerpo de la tarjeta al mismo div aquí.
Lo que significa que esta tarjeta en particular no va a tener
ningún encabezado de tarjeta, sino que sólo contiene el cuerpo de la tarjeta aquí.
Y luego, también, la bg-light significa que el fondo estará en color desvanecido.
Algo así como un color grisáceo añadido al fondo.
Así que esto también busca esta tarjeta aparte del resto del contenido aquí.
Ahora, dentro de esta tarjeta,
voy a hacer uso de un código de bloque para mostrar una
pequeña y divertida pieza interesante de información allí.
Así que usaré un blockquote.
Esta es también una etiqueta HTML aquí.
Y luego a esto, aplicaré la clase blockquote de Bootstrap.
Así que Bootstrap estiliza este blockquote a su manera.
Así que vamos a cerrar esa cita de bloques.
Y dentro de este bloque,
voy a incluir una cita aquí.
Así que comenzaré con una p,
y aplicaré una clase llamada mb-0.
MB-0 es una clase de utilidad que Bootstrap proporciona.
Lo que esto significa es margin-inferior cero.
Para este particular, sea cual sea lo que esté incluido en esta etiqueta p,
tendremos un margen inferior de cero.
Y esto me ayuda a mostrar el contenido correctamente aquí.
Así que aquí voy a agregar el contenido real allí,
y luego cerrar esta p. Así que esta p contiene la cita real.
Ahora, a esta cita, para
que vea que en su contenido,
también puede incluir citas en su código allí.
Entonces, a esto, también puedo agregar un pie de página con la clase.
Así que déjame empujar la sangría del pie de página.
Entonces, este pie de página también es una clase que admite blockquote.
Así que lo que incluya en la comilla de bloque,
junto con el pie de página,
le permitirá mostrar al autor de esta cita.
Así que aquí estoy incluyendo al autor,
y luego uno más.
Usando la cita, incluso puedo citar la fuente de esta cita.
Así que puedes ver eso.
Una vez más, esta es solo una cita que estoy usando solo por diversión para mostrarte,
también al mismo tiempo ilustrando
cómo funciona el blockquote,
y también cómo podemos crear otro tipo de tarjeta en Bootstrap.
Entonces, con esto, hemos agregado en el código para mostrar el blockquote aquí.
Así que déjame ver si eso cambia,
y luego iremos a echar un vistazo a cómo se muestra esta cita en nuestra página web.
Ir al navegador, en nuestra página,
puede ver que nuestra historia y los hechos de un vistazo se muestran uno al lado del otro.
Debajo de eso, tengo esta larga pieza de contenido aquí.
Echemos un vistazo a la misma página en una pantalla extra pequeña.
Así que en una pantalla extra pequeña,
se puede ver que la historia y los hechos están apilados en
la parte superior, y la cita está justo abajo aquí en su propia tarjeta.
Así que puede ver dos cartas,
una debajo de la otra aquí,
y luego la tabla en sí se muestra en la parte inferior.
Entonces, la tabla en sí es una tabla desplazable aquí.
Así que con esto, completamos este ejercicio.
Así que en este ejercicio,
aprendimos cómo podemos usar tablas y tarjetas para mostrar contenido en nuestra página web.
Ahora que hemos completado este ejercicio,
es un buen momento para hacer una confirmación de git.