Ejercicio Bootstrap: navegación vertical con pills y estados

Ejercicio de programación: Reto navs y tabs

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en Bootstrap. Es un ejercicio de nivel intermedio que requiere conocimientos sólidos de la tecnología.

Tipo: Ejercicio de código 3 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Crear una navegación con pills verticales que incluya elementos activos y deshabilitados

Contenido del ejercicio

Crea una navegación vertical utilizando pills de Bootstrap que contenga exactamente 5 elementos de navegación. El segundo elemento debe estar marcado como activo y el cuarto elemento debe estar deshabilitado.

Los elementos de navegación deben ser:

"Dashboard" (enlace a #dashboard)
"Usuarios" (enlace a #usuarios) - debe estar activo
"Productos" (enlace a #productos)
"Reportes" - debe estar deshabilitado (sin enlace)
"Configuración" (enlace a #configuracion)

Utiliza la estructura HTML más simple posible (elementos <a> directos dentro de un contenedor <nav>) y asegúrate de aplicar todas las clases de Bootstrap necesarias para crear pills verticales con los estados correspondientes.

Recuerda que para crear pills verticales necesitas combinar las clases .nav, .nav-pills y .flex-column en el contenedor, y usar .nav-link en cada elemento individual. Para el estado activo usa la clase .active y para el deshabilitado usa .disabled.

Lección relacionada

Este ejercicio está relacionado con la lección "Navs, tabs y pills" de Bootstrap. Te recomendamos revisar la lección antes de comenzar.

Ver lección relacionada

Más ejercicios de Bootstrap

Explora más ejercicios de programación en Bootstrap para mejorar tus habilidades y obtener tu certificación.

Ver más ejercicios de Bootstrap

Solución al ejercicio de programación en Bootstrap

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en Bootstrap para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en Bootstrap

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en Bootstrap

⭐⭐⭐⭐⭐

4.9/5 valoración