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.
Barra de navegación básica: la clase .navbar se usa para crear una barra de navegación. La barra de navegación se crea receptiva mediante el uso de la clase .navbar-expand-xl|lg|md|sm . La barra de navegación receptiva se apila verticalmente en pantallas pequeñas. El elemento <class=”nav-item”> seguido de <a class=”nav-link”> se utiliza para crear un enlace de navegación.
Ejemplo:
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://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 Bar</h2> <nav class="navbar navbar-expand-sm bg-light"> <ul class="navbar-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> </nav> </div> </body> </html>
Producción:
Barra de navegación vertical: la clase .navbar-expand-xl|lg|md|sm se usa para crear una barra de navegación vertical.
Ejemplo:
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://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>Vertical Navbar</h2> <nav class="navbar navbar-expand-xl|lg|md|sm"> <ul class="navbar-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> </nav> </div> </body> </html>
Producción:
Barra de navegación centrada: la clase .justify-content-center se usa para establecer la alineación de la barra de navegación al centro. La barra de navegación se muestra en el centro en pantallas medianas, grandes y extragrandes. En el caso de pantallas pequeñas, la barra de navegación se muestra vertical y alineada a la izquierda.
Ejemplo:
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://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>Centered Navbar</h2> <nav class="navbar navbar-expand-sm bg-light justify-content-center"> <ul class="navbar-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> </nav> </div> </body> </html>
Producción:
Barra de navegación coloreada: las clases .bg-color se utilizan para cambiar el color de fondo de la barra de navegación. Las clases de color de bg son: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark y .bg-light . La clase .navbar-dark se usa para establecer el color del texto de los enlaces en blanco y la clase .navbar-light se usa para establecer el color del texto de los enlaces en negro.
Ejemplo:
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://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;">Colored Navbar</h2> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <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> </nav> <br><br> <nav class="navbar navbar-expand-sm bg-success navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <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> </nav> </div> </body> </html>
Producción:
Barra de navegación de marca /logotipo: la clase .navbar-brand se utiliza para resaltar el nombre de la marca/logotipo.
Ejemplo:
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://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;">Brand/Logo navbar</h2> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="#">GFG</a> <ul class="navbar-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> </nav> <br><br> <nav class="navbar navbar-expand-sm bg-success navbar-light"> <a class="navbar-brand" href="#"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" alt="logo" style="width:40px;"> </a> <ul class="navbar-nav"> <li class="nav-item active"> <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> </nav> </div> </body> </html>
Producción:
Barra de navegación colapsada: la barra de navegación colapsada se usa en pantallas pequeñas. Oculta los enlaces de navegación y los reemplaza con un botón. El class=”navbar-toggler”, data-toggle=”collapse” y data-target=”#thetarget” se usa para crear una barra de navegación colapsada.
Ejemplo:
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://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;">Collapsing Navbar</h2> <nav class="navbar navbar-expand-sm bg-success navbar-light"> <!-- Brand/logo --> <a class="navbar-brand" href="#"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" alt="logo" style="width:40px;"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_Navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapse_Navbar"> <ul class="navbar-nav"> <li class="nav-item active"> <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> </nav> </div> </body> </html>
Salida:
En pantalla grande:
En pantalla chica:
Barra de navegación desplegable: la barra de navegación se puede crear mediante el menú desplegable.
Ejemplo:
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://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;">Dropdown Navbar</h2> <nav class="navbar navbar-expand-sm bg-success navbar-dark"> <!-- Brand/logo --> <a class="navbar-brand" href="#"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" alt="logo" style="width:40px;"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_Navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapse_Navbar"> <ul class="navbar-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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Languages </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </div> </nav> </div> </body> </html>
Producción:
Barra de navegación de formularios y botones: el elemento <form class=”form-inline”> se usa para agrupar entradas y botones uno al lado del otro. La clase .input-group- prepend o .input-group-append se usa para adjuntar íconos de campos de texto de entrada.
Ejemplo 1:
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://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;">Forms and Buttons Navbar</h2> <nav class="navbar navbar-expand-sm bg-success navbar-dark"> <!-- Brand/logo --> <a class="navbar-brand" href="#"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" alt="logo" style="width:40px;"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_Navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapse_Navbar"> <ul class="navbar-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> </ul> </div> <form class="form-inline" action="#"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-primary" type="submit"> Search </button> </form> </nav> </div> </body> </html>
Producción:
Ejemplo 2:
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://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;">Forms and Buttons Navbar</h2> <nav class="navbar navbar-expand-sm bg-success navbar-dark"> <!-- Brand/logo --> <a class="navbar-brand" href="#"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" alt="logo" style="width:40px;"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_Navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapse_Navbar"> <ul class="navbar-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> </ul> </div> <form class="form-inline" action="#"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav> </div> </body> </html>
Producción:
Barra de navegación de texto: la clase .navbar-text se usa para agregar el elemento de texto a la barra de navegación.
Ejemplo:
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://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;">Text Navbar</h2> <nav class="navbar navbar-expand-sm bg-success navbar-dark"> <ul class="navbar-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> <span class="navbar-text"> DS </span> </ul> </nav> </div> </body> </html>
Producción:
Barra de navegación fija: la clase .fixed-top se usa para fijar la barra de navegación en la posición superior y la clase .fixed-bottom se usa para fijar la barra de navegación en la posición inferior.
Ejemplo 1:
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://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="height:1000px"> <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top"> <ul class="navbar-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> </nav> <div class="container-fluid" style="margin-top:80px"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Fixed Top Navbar</h2> </div> </body> </html>
Producción:
Ejemplo 2:
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://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="height:1000px"> <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-bottom"> <ul class="navbar-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> </nav> <div class="container-fluid" style="margin-top:80px"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Fixed Bottom Navbar</h2> </div> </body> </html>
Producción:
Sticky Navbar: la clase .sticky-top se usa para crear la barra de navegación adhesiva. La barra de navegación adhesiva permanece fija en la parte superior de la página cuando se desplaza por la página.
Ejemplo:
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://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="height:1000px"> <div class="container-fluid"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Sticky Navbar</h2> </div> <nav class="navbar navbar-expand-sm bg-success navbar-dark sticky-top"> <ul class="navbar-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> </nav> <div class="container-fluid" style="margin-top:80px"> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div style="text-align:center;"> A computer science portal for geeks </div> </div> </body> </html>
Producción:
Navegador compatible:
- 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