En este ejercicio, vamos a explorar la navegación basada en pestañas de Bootstrap, el
soporte de Bootstrap para pestañas
y cómo se pueden utilizar las pestañas para organizar el contenido en tu página web.
Y cómo puede navegar de una pestaña a otra,
y luego revelar el contenido en cada una de esas pestañas en la página web.
Ahora, aquí me verá usando la clase de navegación,
y luego calificarla aún más usando la clase de pestañas de navegación.
El mismo enfoque también se puede utilizar con las píldoras de navegación
que vimos en la conferencia anterior.
Para comenzar con este ejercicio,
iremos a la página aboutus.html.
Y ahí mismo,
donde tenemos el contenido de liderazgo corporativo allí,
después del h2, voy a introducir la navegación con pestañas.
Entonces, aquí es donde voy a hacer uso del ul con la clase nav nav-tabs.
Por lo tanto, ha visto que antes cuando construimos la barra de navegación,
también usamos el ul dentro de la barra de navegación para especificar los elementos de navegación allí.
Un enfoque similar aquí, excepto que aquí vamos a
usar el ul con el navegador y las pestañas de navegación aquí.
Entonces, dentro de este ul,
vamos a construir la estructura de navegación para esta navegación con pestañas aquí.
Entonces, allí, usaré el elemento de la lista con la clase nav-item,
y construiré la navegación alrededor de este elemento de la lista.
Por lo tanto, esto introduce el primer elemento en mis pestañas de navegación.
Inmediatamente después de eso, dentro de allí introduciré una a con la clase nav-link activo.
Entonces, este, como ves,
si recuerdas de la forma en que usamos el ul con el elemento de navegación y el enlace de navegación.
En la barra de navegación,
estamos viendo un enfoque similar aquí.
Entonces, nav-item activo, y luego href.
Por lo tanto, esta sería una referencia al panel de pestañas más adelante,
que tendría el ID de peter allí,
y el rol es la pestaña para este,
y la pestaña de alternar datos.
Por lo tanto, puede ver el componente javascript de Bootstrap entrando en la imagen aquí.
Y luego diré Peter Pan,
y luego cerraré la etiqueta a allí.
Por lo tanto, esto completaría nuestra primera pestaña en nuestra navegación con pestañas.
Déjame completar el resto del código,
y luego volveremos y revisaremos el resto del código allí.
Por lo tanto, aquí se puede ver que he completado esta estructura de navegación aquí.
Del mismo modo, estoy definiendo los elementos de la lista para los líderes corporativos libres restantes aquí.
Ahora esto, déjame guardar el cambio.
Y luego vamos a echar un vistazo rápido a la página web.
Al cambiar a la página web,
ahora ves cómo usando las pestañas de navegación hemos creado
esta estructura de navegación justo debajo del liderazgo corporativo aquí.
Por lo tanto, esta estructura de navegación significa que debería ser capaz de navegar y
ver cada uno de ellos con más detalle haciendo clic en esto.
Entonces, así es como funciona la navegación con pestañas aquí.
Ahora, obviamente, el contenido de cada uno de ellos debería
mostrar apropiadamente sólo los detalles de esa persona aquí.
Por lo tanto, aquí es donde
entrará en vigor el uso de contenido con pestañas y las clases del panel de pestañas.
Y vamos a adjuntar este contenido usando eso.
Y luego vincula esto a esa navegación,
navegación por pestañas aquí arriba, de
modo que solo
se muestre la información de un líder corporativo en la pantalla a la vez.
Una vez que completemos la configuración de la navegación con pestañas,
bajaremos al contenido real aquí.
Y ahora, voy a reorganizar este contenido en cuatro paneles de pestañas separados,
cada uno de los cuales se mostrará cuando
se seleccione el panel de pestañas correspondiente en la navegación con pestañas.
Así que, para empezar,
lo primero que vamos a hacer es entrar y separar
cada uno de estos cuatro líderes corporativos en las cuatro partes allí, para
que sea fácil para mí ver lo que estoy haciendo.
Así que, en el h3,
los estoy cortando en cuatro partes diferentes,
y luego podremos trabajar con ellas.
Así que, ahora tengo uno, dos, tres, cuatro.
Por lo tanto, este contenido ahora necesita estar encerrado dentro de un div
con el contenido de tabulación de clase.
Por lo tanto, todo este contenido que tenemos para
los cuatro líderes corporativos diferentes debe estar encerrado dentro de un div de contenido de pestañas allí.
Por lo tanto, ahora he incluido eso dentro de la pestaña de contacto.
Ahora, para cada uno de ellos,
necesito crear otro div con el panel de pestañas de clases y algunas clases adicionales.
Y luego organice este contacto.
Entonces, comencemos con el primero.
Entonces, para el primer líder corporativo,
voy a presentar un nuevo div con papel como tabpanel.
Por lo tanto, esto sirve como el panel de pestañas que se mostrará
cuando se seleccione la primera pestaña de navegación.
Y la clase correspondiente que necesito aplicar es tab-panel.
Por lo tanto, este es el panel de pestañas,
el contenido real que está contenido allí.
Y luego otra clase que aplico es fundido.
Por lo tanto, la clase de fundido permite que este contenido se desvanezca.
Por lo tanto, esta es una clase de animación que Bootstrap admite.
Además, aplico esta clase llamada show.
La clase show especifica esencialmente
que este contenido en particular debe mostrarse cuando la página se renderiza por primera vez. Por
lo tanto, aplicará la clase show solo al primer panel de pestañas,
los paneles de pestañas restantes no tendrán aplicada la clase show.
Y la última clase que voy a aplicar está activa porque este es
el panel de pestañas que se mostrará en la página cuando la página se renderice por primera vez.
Además, para que la navegación funcione,
necesito darle a este ID
y, como utilicé el hashtag Peter para el contenido de navegación de la pestaña,
así que voy a aplicar el ID como Peter aquí.
Y así, cuando esto se hace referencia en un enlace allí con el hashtag Peter,
este es el panel correspondiente al que me refiero.
Ahora, lo que voy a hacer es copiar este div desde allí.
Y luego voy a aplicar este div a la información del segundo líder corporativo,
excepto que para este solo debería aplicar el panel de pestañas y ajustar.
El show y active no se deben aplicar para los tres restantes.
Y la identificación aquí debería ser Danny para la segunda.
Simplemente copiaré este código,
y luego lo pegaré para el tercer líder corporativo aquí.
Y entonces el panel de pestañas y el tercero es Agumbe.
Y el último, de
nuevo, lo pego,
y luego la identificación debe cambiarse a Alberto,
y cierre este div aquí.
Por lo tanto, este div para el último debe cerrarse en ese punto.
Y eso debería encargarse de los cuatro paneles de pestañas que necesito.
Entrar y sangrar este contenido,
para que esté satisfecho,
mi obsesión está satisfecha allí.
Vale, eso completa la organización del contenido de la pestaña.
Ahora, guardemos el cambio y echemos
un vistazo rápido a lo que parece la página web ahora. Al
ir a nuestra página web,
ahora ves que nuestra página web solo muestra el contenido correspondiente a su CEO.
Si cambia a cualquiera de los otros,
verá que se muestra la información correspondiente.
Y observe cómo esta información se desvanece cuando selecciona ese usuario en particular.
Pero, por supuesto, si estás contento con esto,
entonces está bien, podemos detenernos en este punto.
Pero me gustaría definir muy bien una pestaña real alrededor de esto.
Entonces, aquí es donde voy a aplicar algunos atributos CSS,
propiedades a esta pestaña en particular aquí, para
que sea una
estructura de pestañas agradable y limpia que se defina allí.
Por lo tanto, vamos a crear algunas propiedades CSS para esto.
El último paso, cambiar a styles.css.
Después de la inversa de la barra de navegación,
voy a introducir las clases CSS para el contenido de la pestaña,
así que especifico para el contenido de la pestaña,
border-left: DDD sólido 1px.
Y voy a aplicar lo mismo para la frontera derecha y la parte inferior.
No necesito aplicar a la parte superior porque la parte superior ya está regida
por la navegación de pestañas.
Y luego déjame dar un relleno de 10 píxeles por todas partes,
y luego guardar los cambios.
Vamos a echar un vistazo a nuestra página web después de esto.
Volviendo a nuestra página,
ahora ves una bonita y
limpia estructura similar a una pestaña que se está creando. Para
que cuando navegue a cada uno de ellos,
esa información correspondiente se muestre apropiadamente en su propia pestaña.
Esto completa este ejercicio en el que analizamos
el uso de la navegación con pestañas para nuestra página web.
Y luego vimos cómo podemos crear la navegación por pestañas y adjuntar otro contenido.
Este es también un buen momento para que hagas un comentario de Git con las pestañas de mensajes.