En este artículo, aprenderemos sobre las píldoras con pestañas y el menú de navegación de píldoras verticales en Bootstrap, y comprenderemos su implementación a través de los ejemplos. Estos tipos de menús de navegación se utilizan para decorar la barra de navegación de una manera diferente con un estilo de navegación específico y distinto para mejorar la experiencia del usuario y el flujo de navegación del sitio web, además de ayudar a crear un menú de navegación simple y fácil utilizando clases predefinidas de Bootstrap. Discutiremos cada estilo de navegación secuencialmente. Comencemos con la creación de un menú simple.
Menú simple: este menú se usa en la barra de navegación para vincular muchas otras páginas a la página actual. Para crear la barra de navegación simple, podemos usar la clase list-inline que sigue con la lista de elementos.
Sintaxis:
<ul class="list-inline">
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
</ul>
Ejemplo: En este ejemplo, hemos creado un menú simple.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <center> <h1 class="text-success"> GeeksforGeeks </h1> </center> <h2>Simple Menu</h2> <ul class="list-inline"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> </body> </html>
Producción:
Pestaña: Para crear el menú de pestañas, usaremos . clase nav-tabs para generar una interfaz con pestañas junto con el uso de la clase activa para activar la pestaña actual.
Sintaxis:
<ul class="nav nav-tabs"> <li class="active"><a href="#">Element 1</a></li> <li><a href="#">Element 2</a></li> <li><a href="#">Element 3</a></li> </ul>
Ejemplo: Este ejemplo describe el menú de la pestaña Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <center> <h1 class="text-success"> GeeksforGeeks </h1> </center> <h3>Tabbed Menu</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> </body> </html>
Producción:
Píldora: para crear un menú de navegación de píldoras simple, agregaremos la clase .nav-pills al elemento de navegación junto con la clase .nav , que es la clase base para cada estilo de navegación disponible en bootstrap junto con el uso de la clase activa para hacer el pestaña actual activa.
Sintaxis:
<ul class="nav nav-pills">
<li class="active"><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
</ul>
Ejemplo: Este ejemplo describe la barra de navegación de la píldora Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <center> <h1 class= "text-success"> GeeksforGeeks </h1> </center> <h3>Pills</h3> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> </body> </html>
Producción:
Pastilla Vertical: Para crear las pastillas verticales, usaremos . nav-pills & nav-stacked class junto con .nav class como clase base para cada estilo de navegación disponible en bootstrap junto con el uso de la clase activa para activar la pestaña actual.
Sintaxis:
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
</ul>
Ejemplo: este ejemplo describe la barra de navegación de píldoras verticales de Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <center> <h1 class="text-success"> GeeksforGeeks </h1> </center> <h3>Vertical Pills</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> </body> </html>
Producción:
Menú de navegación alineado a la derecha: para alinear los elementos a la derecha, puede usar la clase .ms-auto para el elemento.
Ejemplo: Este ejemplo describe el menú de navegación alineado a la derecha de Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pills navigation menu</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> </center> <nav class="nav nav-pills p-4 bg-dark"> <a class="nav-link active bg-warning" aria-current="true" href="#">Home </a> <a class="nav-link text-warning" href="#">About Us </a> <a class="nav-link text-warning" href="#">Careers </a> <a class="nav-link text-warning" href="#">Contact Us </a> <a class="nav-link text-warning ms-auto" href="#">Sign up </a> </nav> </body> </html>
Producción:
Menú de navegación de píldoras justificadas: para los anchos iguales, usamos la clase .nav-justified en el elemento nav.
Ejemplo: Este ejemplo describe el menú de navegación de píldoras justificadas de Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pills navigation menu</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> </center> <nav class="nav nav-pills nav-justified p-4 bg-dark"> <a class="nav-link active bg-warning" aria-current="true" href="#">Home </a> <a class="nav-link text-warning" href="#">About Us </a> <a class="nav-link text-warning" href="#">Careers </a> <a class="nav-link text-warning" href="#">Contact Us </a> </nav> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA