Bootstrap Barra de navegación
La barra de navegación es una característica muy buena y un aspecto destacado del sitio web de Bootstrap. La barra de navegación actúa como un componente base responsivo para el encabezado de navegación en su aplicación o sitio web. La barra de navegación se contrae en la visualización de dispositivos móviles y se expande horizontalmente a medida que aumenta el ancho de la ventana gráfica disponible. En el núcleo de la barra de navegación de Bootstrap, esta incluye el nombre del sitio y los estilos básicos de definición de navegación.
Barra de navegación predeterminada
Los pasos para crear una barra de navegación predeterminada son los siguientes:
- Agregue la clase a la etiqueta <nav>.navbar、.navbar-default。
- Agregue al elemento anteriorrole="navigation", lo que ayuda a aumentar la accesibilidad.
- Agregue una clase de encabezado al elemento <div>.navbar-header, que en su interior contiene una clasenavbar-branddel elemento <a>. Esto hará que el texto se vea un tamaño más grande.
- Para agregar enlaces a la barra de navegación, simplemente agregue una lista desordenada con la clase.nav、.navbar-navbasta con una lista desordenada.
El siguiente ejemplo demuestra esto:
Ejemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Tutorial para novatos</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="#">Enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Otro enlace separado</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Pruébalo »
El resultado se muestra a continuación:
Barra de navegación responsiva
Para agregar características responsivas a la barra de navegación, el contenido que desea contraer debe estar envuelto con la clase.collapse、.navbar-collapseen un <div>. La barra de navegación contraída es en realidad un botón con la clase.navbar-toggle, que se usa para indicar a JavaScript qué debe hacer con el botón, y el segundo esdata-toggle, que indica qué elemento debe alternarse. Tres <span> con la clasedata-targetcrean el llamado botón de hamburguesa. Estos alternan a.icon-barlos elementos dentro del <div>. Para lograr todo lo anterior, debe incluir.nav-collapseel complemento Collapse de BootstrapEl siguiente ejemplo demuestra esto:。
Ejemplo
Ejemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Tutorial para novatos</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Enlace separado</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="#">Otro enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Pruébalo »</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
El resultado se muestra a continuación:
Formularios en la barra de navegación
Formularios en la barra de navegación
los formularios de Bootstraplas clases predeterminadas mencionadas en el capítulo, sino que usanclase. Esto asegura una alineación vertical adecuada del formulario y un comportamiento de contracción en viewports más estrechos. Utilice las opciones de alineación (que se explicarán en detalle en la sección de alineación de componentes) para decidir dónde colocar el contenido en la barra de navegación..navbar-formEl siguiente ejemplo demuestra esto:
Ejemplo
Ejemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Enviar</a>
</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">Pruébalo »</button>
</form>
</div>
</nav>
El resultado se muestra a continuación:
Botones en la barra de navegación
Botones en la barra de navegación
para agregar botones a elementos <button> que no están dentro de <form>, el botón se centrará verticalmente en la barra de navegación..navbar-btnSe puede usar en elementos <a> e <input>..navbar-btnNo use
en elementos <a> dentro de.navbar-nav, porque no es estándar.navbar-btnEl siguiente ejemplo demuestra esto:button class。
Ejemplo
Ejemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Botón de enviar</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">Botón de la barra de navegación</button>
</form>
<button type="button" class="btn btn-default navbar-btn">Pruébalo »</button>
</div>
</div>
</nav>
El resultado se muestra a continuación:
Texto en la barra de navegación
Texto en la barra de navegación
. Esto se usa normalmente con la etiqueta <p> para asegurar un interlineado y color adecuados. El siguiente ejemplo demuestra esto:.navbar-textEjemplo
Ejemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Inicio de sesión de usuario de Ejemplo</a>
</div>
<div>
<p class="navbar-text">Pruébalo »</p>
</div>
</div>
</nav>
El resultado se muestra a continuación:
Enlaces de navegación con iconos
Enlaces de navegación con iconos
para configurar los iconos, consulte másglyphicon glyphicon-*Iconos de Bootstrap, como se muestra en el siguiente ejemplo:Ejemplo
Ejemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Registrarse</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Iniciar sesión</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Pruébalo »</a></li>
</ul>
</div>
</nav>
El resultado se muestra a continuación:
Alineación de componentes
Alineación de componentes
para alinear a la izquierda o a la derecha los.navbar-lefto.navbar-rightenlaces de navegación, formularios, botones o textoEstos componentes. Ambas clases agregarán un flotado CSS en la dirección especificada. El siguiente ejemplo demuestra esto:Ejemplo
Ejemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Alinear a la izquierda</a>
</div>
<div>
<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="#">Otro enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Alinear a la izquierda - Botón de enviar</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<button type="submit" class="btn btn-default">Alinear a la izquierda - Texto</button>
</form>
<p class="navbar-text navbar-left">Alinear a la derecha</p>
<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="#">Otro enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Alinear a la derecha - Botón de enviar</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default">Alinear a la derecha - Texto</button>
</form>
<p class="navbar-text navbar-right">Pruébalo »</p>
</div>
</div>
</nav>
El resultado se muestra a continuación:
Fijar en la parte superior
Fijar en la parte superior
Si desea fijar la barra de navegación en la parte superior de la página, agregue
la clase.navbar class. El siguiente ejemplo demuestra esto:.navbar-fixed-topPara evitar que la barra de navegación se superponga con la parte superior de otro contenido en el cuerpo de la página, agregue al menos 50 píxeles de padding (relleno) a la etiqueta <body>. El valor del padding se puede ajustar según sus necesidades.
Ejemplo
Ejemplo
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Enlace separado</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="#">Otro enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Pruébalo »</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
El resultado se muestra a continuación:
Fijar en la parte inferior
Fijar en la parte inferior
la clase.navbar class. El siguiente ejemplo demuestra esto:.navbar-fixed-bottomEjemplo
Ejemplo
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Enlace separado</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="#">Otro enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Pruébalo »</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
El resultado se muestra a continuación:
Superior estática
Superior estática
clase. Esta clase no requiere agregar padding (relleno) al <body>..navbar-static-topEjemplo
Ejemplo
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Enlace separado</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="#">Otro enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Pruébalo »</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
El resultado se muestra a continuación:
Barra de navegación invertida
Barra de navegación invertida
la clase.navbarbasta con la clase, como se muestra en el siguiente ejemplo:.navbar-inverseEjemplo
Para evitar que la barra de navegación se superponga con la parte superior de otro contenido en el cuerpo de la página, agregue al menos 50 píxeles de padding (relleno) a la etiqueta <body>. El valor del padding se puede ajustar según sus necesidades.
Ejemplo
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Tutorial para novatos</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="#">Enlace separado</a></li>
<li class="divider"></li>
<li><a href="#">Otro enlace separado</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Pruébalo »
El resultado se muestra a continuación:
Otras extensiones
