Menú de navegación: las clases .nav, .nav-item y .nav-link se utilizan para crear el menú de navegación. Las clases .nav, .nav-item y .nav-link se usan con <ul>, <li> y link element respectivamente.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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 style="text-align:center;"> <div class="container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>Navigation Menu</h2> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> </div> </body> </html>
Producción:
Navegación alineada: las clases .justify-content-center y .justify-content-end se utilizan para establecer la alineación del menú de navegación al centro y al final, respectivamente.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Aligned Navigation Menu </h2> <div>Left-aligned nav</div> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> <br><br> <div class="text-center">Centered-aligned nav</div> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> <br><br> <div class="text-right">Right-aligned nav</div> <ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> </div> </body> </html>
Producción:
Navegación vertical: la clase .flex-column se usa para crear el menú de navegación vertical.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Vertical Nav Menu </h2> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> </div> </body> </html>
Producción:
Menú de navegación de pestañas: la clase .nav-tabs se utiliza para crear el menú de navegación de pestañas. La clase .active se usa para activar el enlace.
Ejemplo:
html
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Vertical Nav Menu </h2> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> </div> </body> </html>
Producción:
Menú de navegación de píldoras: la clase .nav-pills se usa para crear el menú de píldoras de navegación.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Pills Nav Menu </h2> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> </div> </body> </html>
Producción:
Menú de navegación de pestañas/píldoras justificadas: la clase justificada .nav se utiliza para justificar el menú de navegación de pestañas/píldoras.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Justified Tabs/pills Nav Menu </h2> <ul class="nav nav-tabs nav-justified"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> <br><br> <ul class="nav nav-pills nav-justified"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Languages</a> </li> </ul> </div> </body> </html>
Producción:
Píldoras/pestañas con menú de navegación desplegable: la clase .nav-pills/.nav-tabs se usa para crear el menú de pestañas/pestañas de navegación y la clase .dropdown se usa para crear el menú de navegación desplegable.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Pills/Tabs with Dropdown Nav Menu </h2> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"> Languages </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">C</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> <a class="dropdown-item" href="#">Python</a> </div> </li> </ul> <br><br> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DS</a> </li> <li class="nav-item"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"> Languages </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">C</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> <a class="dropdown-item" href="#">Python</a> </div> </li> </ul> </div> </body> </html>
Producción:
Menú de navegación de píldoras alternables/dinámicas: el atributo data-toggle=”pill” se usa para hacer que las píldoras se puedan alternar. Luego agregue una clase .tab-pane con una ID única para cada pestaña y envuélvala dentro de un elemento <div> con clase .tab-content .
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Toggleable/Dynamic Pills Nav Menu </h2> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home"> Home </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#algo"> Algo </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#ds"> DS </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#languages"> Languages </a> </li> </ul> <div class="tab-content"> <div id="home" class="container tab-pane active"> <strong>Home</strong> <p> GeeksforGeeks: It is a computer science portal where you can learn programming </p> </div> <div id="algo" class="container tab-pane fade"> <strong>algo</strong> <p> A process or set of rules to be followed in calculations or other problem-solving operations </p> </div> <div id="ds" class="container tab-pane fade"> <strong>DS</strong> <p> Data Structure is a particular way to organizing the dat in computer memory </p> </div> <div id="languages" class="container tab-pane fade"> <strong>Languages</strong> <p> There are many programming languages exist in computer science. </p> </div> </div> </div> </body> </html>
Producción:
Menú de navegación de pestañas alternables/dinámicas: el atributo data-toggle=”tab” se utiliza para hacer que las pestañas se puedan alternar. Luego agregue una clase .tab-pane con una ID única para cada pestaña y envuélvala dentro de un elemento <div> con clase .tab-content .
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Nav menu</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://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> <div class="container"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Toggleable/Dynamic Tabs Nav Menu </h2> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home"> Home </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#algo"> Algo </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#ds"> DS </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#languages"> Languages </a> </li> </ul> <div class="tab-content"> <div id="home" class="container tab-pane active"> <strong>Home</strong> <p> GeeksforGeeks: It is a computer science portal where you can learn programming </p> </div> <div id="algo" class="container tab-pane fade"> <strong>algo</strong> <p> A process or set of rules to be followed in calculations or other problem-solving operations </p> </div> <div id="ds" class="container tab-pane fade"> <strong>DS</strong> <p> Data Structure is a particular way to organizing the dat in computer memory </p> </div> <div id="languages" class="container tab-pane fade"> <strong>Languages</strong> <p> There are many programming languages exist in computer science. </p> </div> </div> </div> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA