Latest web development tutorials

navegación bootstrap

Barra de navegación es una buena característica, es una característica destacada de Bootstrap sitio. Fundación barra de navegación como componentes de la respuesta de la cabecera de la página de navegación en su aplicación o sitio. En vista del dispositivo de navegación móvil está plegado, incrementa el ancho de la ventana gráfica disponible de la barra de navegación horizontal. Bootstrap barra de navegación principal, la barra de navegación incluye un nombre de dominio y estilos básicos de navegación definida.

La barra de navegación por defecto

Crear una barra de navegación predeterminada, siga estos pasos:

  • Etiquetas añaden .navbarclase, .navbar-default a la <nav>.
  • Añadirrole = "navegación" de los elementos anteriores, ayudan a aumentar la accesibilidad.
  • Añadir unaclase de título .navbar-cabecera con el elemento <div> contiene elementos internos <a> con clasenavbar-marca. Esto hará que el texto aparezca más grande.
  • Para agregar un enlace a la barra de navegación, sólo tiene que añadir lista desordenada Can con .navclase, de .navbar-NAV.

El siguiente ejemplo ilustra este punto:

Ejemplos

<Nav class = "barra de navegación barra de navegación-default" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <ul class = "nav-barra de navegación nav" > <Li class = "activa"> <a href = "#"> IOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:


barra de navegación sensible

Para agregar funciones de navegación sensible, usted tiene que doblar el contenido envuelto enclases con .collapse, .navbar-colapso de la <div> en.barra de navegación de plegado es en realidad un botón de alternar.navbar-clase y con dos elementos Data-.La primera de ellas esla palanca de datos, el botón pulsador utilizado para contar JavaScript tiene que hacer, y la segunda es la diana de datos, lo queindica a la que desea cambiar el elemento. Tres conclase .icon barra del botón <span> para crear el llamado Hamburgo.Estos interruptores de.NAV-colapso <div> en.Para lograr estas funciones, debe incluir Bootstrap veces (Cerrar) enchufe .

El siguiente ejemplo ilustra este punto:

Ejemplos

<Nav class = "barra de navegación barra de navegación-default" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <Botón type = "button" class = "navbar-toggle" datos de palanca = "colapso" data-target = "# ejemplo- navbar-colapso"> <span class = "sr-only"> Cambio de la navegación </ span> <span class = "icono de la barra"> </ span> <span class = "icono de la barra"> </ span> <span class = "icono de la barra"> </ span> </ Button> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div class = "colapso navbar-colapso" id = "ejemplo-navbar-colapso "> <ul class = "nav-barra de navegación nav" > <Li class = "activa"> <a href = "#"> IOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

barra de navegación sensible

barra de navegación del formulario

Formulario en la barra de navegación en lugar de utilizar Bootstrap forman los capítulos de la clase por defecto mencionados, se utilizala clase en forma .navbar.Esto asegura una alineación vertical apropiada y la forma de un comportamiento ventana abatible estrecho. Utilice la opción de alineación (que se explicará en detalle en la sección de alineación de los componentes) para determinar el contenido de la barra de navegación se coloca donde.

El siguiente ejemplo ilustra este punto:

Ejemplos

<Nav class = "barra de navegación barra de navegación-default" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <Forma class = "navbar-forma navbar- izquierda" role = "buscar"> <Div class = "forma-grupo"> <Input type = "text" class = "forma de control" marcador de posición = "Buscar"> </ Div> <Botón type = "submit" class = "btn btn-default" > Enviar </ botón> </ Form> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

barra de navegación del formulario

Botón en la barra de navegación

Puede utilizar laclase .navbar-btn añadir un botón, el botón se centra verticalmente en la barra de navegación para no <form> El botón <> elemento..navbar-btn puede ser utilizado en <a> y elementos <input>.

No utilice.navbar-btn en .navbar-naven el elemento <a>, porque no es un estándar Botón, clase .

El siguiente ejemplo ilustra este punto:

Ejemplos

<Nav class = "barra de navegación barra de navegación-default" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <Forma class = "navbar-forma navbar- izquierda" role = "buscar"> <Div class = "forma-grupo"> <Input type = "text" class = "forma de control" marcador de posición = "Buscar"> </ Div> <Botón type = "submit" class = "btn btn-default" > botón de enviar </ botón> </ Form> <Botón type = "button" class = "btn btn-default barra de navegación -btn"> botón de la barra de navegación </ botón> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

Botón en la barra de navegación

Texto barra de navegación

Si desea incluir en la navegación de cadena de texto, utilice laclase .navbar-texto.Esto se utiliza a menudo en combinación con la etiqueta <p> para garantizar líder y colores adecuada. El siguiente ejemplo ilustra este punto:

Ejemplos

<Nav class = "barra de navegación barra de navegación-default" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <P class = "barra de navegación de texto"> w3big de inicio de sesión del usuario </ p> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

Texto barra de navegación

Combinado con enlaces icono de navegación

Si desea utilizar en un icono de la barra de navegación componente de navegación convencional, a continuación, utilizar el icono para ajustar el glyphiconclase glyphicon- *, más puedes consultar icono de Bootstrap , como se muestra en el siguiente ejemplo:

Ejemplos

<Nav class = "barra de navegación barra de navegación-default" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <ul class = "nav barra de navegación barra de navegación nav- -derecho"> <Li> <a href = "#"> <span class = "glyphicon glyphicon-usuario" > </ span> Regístrese </ a> </ li> <Li> <a href = "#"> <span class = "glyphicon glyphicon-log- in"> </ span> Iniciar sesión </ a> </ li> </ Ul> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

Combinado con enlaces icono de navegación

alineación de los componentes

Puede utilizar laclase de utilidad .navbar-izquierda o .navbar-derechao de derecha a izquierda alineadosenlacesbarra de navegaciónde navegación, formularios, botones o textoestos componentes. Ambos añaden clase CSS flotará en la dirección especificada. El siguiente ejemplo ilustra este punto:

Ejemplos

<Nav class = "barra de navegación barra de navegación-default" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <! - Alinear a la izquierda -> <ul class = "nav barra de navegación barra de navegación nav- -IZQUIERDA"> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> <Forma class = "navbar-forma navbar- izquierda" role = "buscar"> <Botón type = "submit" class = "btn btn-default" > Alinear a la izquierda - Presentar botón </ botón> </ Form> <P class = "barra de navegación de texto navbar- left"> Alinear a la izquierda - el texto </ p> <! - Alineación a la derecha -> <ul class = "nav barra de navegación barra de navegación nav- -derecho"> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> <Forma class = "navbar-navbar- forma correcta" role = "buscar"> <Botón type = "submit" class = "btn btn-default" > Alinear a la derecha - Presentar botón </ botón> </ Form> <P class = "barra de navegación de texto navbar- derecha"> Alinear a la derecha - texto </ p> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

alineación de los componentes

Fijado en la parte superior

barra de navegación de arranque se puede posicionar de forma dinámica. De forma predeterminada, se trata de un elemento en bloque, que se basa en la localización de HTML colocado en la orientación. A través de una serie de clases de ayuda, se puede colocar en la parte superior o inferior de la página, o se puede hacer junto con la página de desplazamiento barra de navegación estática.

Si desea que la barra de navegación fija a la parte superior de la página, agregar laclase .navbar de fijo superior a .navbar clase.El siguiente ejemplo ilustra este punto:

Con el fin de evitar que la barra de navegación superior y el cuerpo del contenido de la página con otra escalonada, por favor añadir la etiqueta de por lo menos 50 píxeles de desplazamiento de las etiquetas <body> (relleno), el valor del relleno se puede ajustar de acuerdo a sus necesidades.

Ejemplos

<Nav class = "barra de navegación barra de navegación barra de navegación-default -fixed-top" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <ul class = "nav-barra de navegación nav" > <Li class = "activa"> <a href = "#"> IOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

Fijado en la parte superior

Fija en la parte extrema

Si desea que la barra de navegación fija a la parte inferior de la página, agregar laclase .navbar de fijo inferior a .navbar clase.El siguiente ejemplo ilustra este punto:

Ejemplos

<Nav class = "barra de navegación barra de navegación barra de navegación-default -fixed-inferior" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <ul class = "nav-barra de navegación nav" > <Li class = "activa"> <a href = "#"> IOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

Fija en la parte extrema

superior estática

Para ser capaz de crear, junto con la barra de navegación de la página de desplazamiento, agregar laclase .navbar-estático-top.Esta clase no requiere que el <body> añadir el relleno (padding).

Ejemplos

<Nav class = "barra de navegación barra de navegación barra de navegación-default -static-top" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <ul class = "nav-barra de navegación nav" > <Li class = "activa"> <a href = "#"> IOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

Invertir la barra de navegación

Para crear un fondo negro barra de navegación invertida con texto blanco, y simplemente añadir a lainversa .navbar-clase para .navbar clase,como se muestra en el siguiente ejemplo:

Con el fin de evitar que la barra de navegación superior y el cuerpo del contenido de la página con otra escalonada, por favor añadir la etiqueta de por lo menos 50 píxeles de desplazamiento de las etiquetas <body> (relleno), el valor del relleno se puede ajustar de acuerdo a sus necesidades.

Ejemplos

<Nav class = "barra de navegación barra de navegación-inversa" role = "navegación"> <Div class = "contenedor de fluido"> <Div class = "navbar-header"> <A class = "navbar-marca" href = "#"> tutorial </ a> </ Div> <Div> <ul class = "nav-barra de navegación nav" > <Li class = "activa"> <a href = "#"> IOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "desplegable"> <A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> aislado enlace </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> otro eslabón aislado </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

Trate »

Los resultados son los siguientes:

Invertir la barra de navegación