Bootstrap Navbar es un encabezado de navegación que se encuentra en la parte superior de la página web y que se puede extender o contraer, según el tamaño de la pantalla. Bootstrap Navbar se utiliza para crear una navegación receptiva para nuestro sitio web.
Podemos crear una barra de navegación estándar con <nav class=”navbar navbar-default”> . También podemos crear diferentes variaciones de la barra de navegación, como barras de navegación con menús desplegables y cuadros de búsqueda y una barra de navegación fija con un mínimo esfuerzo. A continuación se muestra el procedimiento para implementar una barra de navegación estática simple con enlaces de navegación.
Guía paso a paso para implementar Navbar en Bootstrap
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” ></guión>
Paso 2: agregue la etiqueta <nav> con .navbar y la clase .navbar-default en la etiqueta <body>.
<nav class="navbar navbar-default">
<!-- Navbar content goes here -->
</nav>
Paso 3: agregue la etiqueta <div> con la clase container-fluid y también agregue otra <div> con la clase .navbar-header para dar nombre al encabezado y agregar la lista de navegación después de cerrar la etiqueta <div>.
Nota: La clase .navbar-header es opcional.
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
Hemos implementado con éxito Navbar en Bootstrap.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap NavBar Example</title> <meta charset="utf-8" /> <!-- Include bootstrap, CSS and jQuery CDN --> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <!-- Add <nav> tag with .navbar and .navbar-default class --> <nav class="navbar navbar-default"> <!-- Add navbar content --> <div class="container-fluid"> <!-- Include .navbar-header class in <div> (optional)--> <div class="navbar-header"> <a class="navbar-brand" href="#"> GeeksforGeeks </a> </div> <!-- Include navbar list --> <ul class="nav navbar-nav"> <li class="active"><a href="#"> Home </a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <!-- Sample page content --> <div class="container"> <h3>Bootstrap Navbar Example</h3> <p> A navigation bar is a navigation header placed at the top of the page. </p> </div> </body> </html>
Producción:
