Se utiliza una barra de navegación en cada sitio web para que sea más fácil de usar, de modo que la navegación a través del sitio web sea fácil y el usuario pueda buscar directamente el tema de su interés. La barra de navegación se coloca en la parte superior de la página.
Las navegaciones basadas en pestañas son una de las formas más efectivas de mostrar una gran cantidad de contenido en una sola página web usando secciones con pestañas. El usuario puede acceder rápidamente al contenido cambiando entre los paneles sin salir de la página.
Enfoque: para crear un menú de navegación con pestañas, cree una lista desordenada básica con elementos de lista como enlaces. Luego agregue las clases nav y nav-tabs de bootstrap a la lista desordenada y la clase nav-items a la lista de elementos.
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h2>Navigation Bar</h2> </center> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Courses</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Articles</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"> Not Servicable </a> </li> </ul> </body> </html>
Producción:
pestañas de navegación
Ejemplo 2: El siguiente código muestra un menú desplegable en una de las pestañas de navegación.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Navigation Bar</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h2>Navigation Bar</h2> </center> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#"> Home </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"> Courses </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">for 10</a></li> <li><a class="dropdown-item" href="#">for 12</a></li> <li><a class="dropdown-item" href="#">Graduation</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Articles</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#"> Not Servicable </a> </li> </ul> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA