Bootstrap - Barra de navegación
La barra de navegación es una de las características destacadas de los sitios Bootstrap. Las barras de navegación son componentes "meta" receptivos que sirven como encabezados de navegación para su aplicación o sitio. Las barras de navegación se colapsan en las vistas móviles y se vuelven horizontales a medida que aumenta el ancho de la ventana gráfica disponible. En esencia, la barra de navegación incluye estilos para nombres de sitios y navegación básica.
Barra de navegación predeterminada
Para crear una barra de navegación predeterminada:
Agregar las clases .navbar, .navbar-default a la etiqueta <nav>.
Añadir role = "navigation" al elemento anterior, para ayudar con la accesibilidad.
Agregar una clase de encabezado .navbar-headeral elemento <div>. Incluir un elemento <a> con clasenavbar-brand. Esto le dará al texto un tamaño un poco más grande.
Para agregar enlaces a la barra de navegación, simplemente agregue una lista desordenada con las clases de .nav, .navbar-nav.
El siguiente ejemplo demuestra esto:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Barra de navegación receptiva
Para agregar funciones receptivas a la barra de navegación, el contenido que desea que se contraiga debe estar envuelto en un <div> con clases .collapse, .navbar-collapse. La naturaleza colapsada es disparada por un botón que tiene la clase de.navbar-toggley luego presenta dos elementos de datos. El primero,data-toggle, se usa para decirle al JavaScript qué hacer con el botón, y el segundo, data-target, indica qué elemento alternar. Luego
El siguiente ejemplo demuestra esto:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Formularios en Navbar
En lugar de usar los formularios predeterminados basados en clases de los formularios de Bootstrap del capítulo , formularios que están en la barra de navegación, use el.navbar-formclase. Esto asegura que la alineación vertical adecuada del formulario y el comportamiento contraído en ventanas estrechas. Utilice las opciones de alineación (explicadas en la sección Alineación de componentes) para decidir dónde reside dentro del contenido de la barra de navegación.
El siguiente ejemplo demuestra esto:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
</div>
</nav>Botones en la barra de navegación
Puedes agregar botones usando clase .navbar-btn a los elementos <button> que no residen en un <form> para centrarlos verticalmente en la barra de navegación. .navbar-btn se puede utilizar en elementos <a> y <input>.
No utilice .navbar-btnni las clases de botones estándar en elementos <a> dentro .navbar-nav.
El siguiente ejemplo demuestra esto:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div>
</nav>Texto en la barra de navegación
Para envolver cadenas de texto en un elemento, use la clase .navbar-text. Esto generalmente se usa con la etiqueta <p> para el interlineado y el color adecuados. El siguiente ejemplo demuestra esto:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text">Signed in as Thomas</p>
</div>
</nav>Enlaces que no son de navegación
Si desea utilizar los enlaces estándar que no están dentro del componente de navegación de la barra de navegación normal, utilice la clase navbar-link para agregar colores adecuados para las opciones de la barra de navegación predeterminada e inversa, como se muestra en el siguiente ejemplo:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">Thomas</a>
</p>
</div>
</nav>Alineación de componentes
Puede alinear los componentes como enlaces de navegación, formularios, botones o texto a izquierda o derecha en una barra de navegación usando las clases de utilidad.navbar-left o .navbar-right. Ambas clases agregarán un flotante CSS en la dirección especificada. El siguiente ejemplo demuestra esto:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right align-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right align-Text</p>
</div>
</nav>Fijo hacia arriba
La barra de navegación Bootstrap puede ser dinámica en su posicionamiento. De forma predeterminada, es un elemento a nivel de bloque que toma su posición en función de su ubicación en el HTML. Con algunas clases de ayuda, puede colocarlo en la parte superior o inferior de la página, o puede hacer que se desplace estáticamente con la página.
Si desea que la barra de navegación esté fija en la parte superior, agregue clase .navbar-fixed-top al .navbar class. El siguiente ejemplo demuestra esto:
Para evitar que la barra de navegación se coloque encima de otro contenido en el cuerpo de la página, agregue al menos 50 píxeles de relleno a la etiqueta <body> o pruebe sus propios valores.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Fijado a la parte inferior
Si desea que la barra de navegación esté fija en la parte inferior de la página, agregue la clase .navbar-fixed-bottom al .navbar class. El siguiente ejemplo demuestra esto:
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Parte superior estática
Para crear una barra de navegación que se desplaza con la página, agregue el .navbar-static-topclase. Esta clase no requiere agregar el relleno al <body>.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Barra de navegación invertida
Para crear una barra de navegación invertida con un fondo negro y con texto blanco, simplemente agregue el .navbar-inverse clase a la .navbar class como se demuestra en el siguiente ejemplo:
Para evitar que la barra de navegación se coloque encima de otro contenido en el cuerpo de la página, agregue al menos 50 píxeles de relleno a la etiqueta <body> o pruebe sus propios valores.
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>