La barra de navegación es una buena característica y es una característica destacada del sitio web de Bootstrap. La barra de navegación es un meta componente receptivo que actúa como el título de navegación para una solicitud o sitio web. La barra de navegación se derrumba en la vista del dispositivo móvil y la barra de navegación se expande horizontalmente a medida que aumenta el ancho de la ventana de la ventana gráfica disponible. En el núcleo de la barra de navegación de Bootstrap, la barra de navegación incluye la definición de estilos para nombres de sitios y navegación básica.
Los pasos para crear una barra de navegación predeterminada son los siguientes:
Para agregar enlaces a la barra de navegación, simplemente agregue una lista desordenada con la clase .nav, .navbar-nav.
Los siguientes ejemplos compartirán con usted la barra de navegación hecha con Bootstrap3. El contenido específico es el siguiente
Por ejemplo
Entonces, cómo escribir un componente tan conveniente
¡Usa Bootstrap3!
Cuéntanos directamente
En términos generales, la navegación se coloca en la siguiente estructura
<Nav Role = "Navigation"> <div> <iv> <a href = "#"> <img src = "..."> </a> </div> </div> </ar Nav>
1. Etiquetas de navegación
En la primera clase, la barra de navegación es necesaria. Otras propiedades son opcionales.
Agregar Navbar Default crea la navegación más básica, y no se solucionará donde el color sea transparente.
Agregue el color de la clase de Navbar para volverse negro
Agregue el tope fijo de navbar para arreglar en la parte superior, agregue el fondo fijo de navbar para arreglar en la parte inferior
El efecto de agregar Navbar-static-top es el siguiente
<div>
Encabezado de navegación, por ejemplo, el registro del sitio web, haga clic en la página de inicio o el nombre del sitio web
El efecto es como arriba
Creo que el efecto será mejor si puedo cambiarlo al mensaje de texto aquí.
2. Forma
Agregar formularios en la navegación, como búsqueda, inicio de sesión, etc., también es común
Por ejemplo, mi búsqueda arriba
<Form Role = "Search"> <div> <input type = "text" placeHolder = "search"> </div> <button type = "enviar"> Search </boton> </form>
Explique que la clase Navbar-Left posicionará este formulario a la izquierda
Por supuesto, también hay una clase de navegación de Navbar
Del mismo modo, el botón se puede agregar así
<botón type = "botón"> Iniciar sesión </botón>
El texto se puede agregar así
<p> firmado como Mark Otto </p>
El enlace se puede agregar así
<p> firmado como <a href = "#"> Mark Otto </a> </p>
Y de esta manera, puede agregar clases de margen de marina o navegación.
Mi navegación
<!-Navigation-> <viv> <div id = "NavContainer"> <Nav Role = "Navigation"> <Viv> <VIV> <a href = "#"> XiAnsheng Library </a> </div> <formule rol = "search"> <div> <put type = "texting" de texto "Separar =" buscar "> </div> <button type =" Subt "> Search </Button </button </button </ulc box <li> <a data-toggle = "modal" data-target = "#registro"> registrar </a> </li> <li> <a data-toggle = "modal" data-target = "#firmin"> Login </a> </li> </ul> </div> </div> </div> </nav> </div> </div> </div> <biv>
El efecto es el siguiente
Para obtener más contenido, puede consultar el artículo para el aprendizaje:
Bootstrap implementa el efecto de barra de navegación predeterminado
Bootstrap debe aprender todos los días (ii)
Bootstrap debe aprender todos los días el complemento de navegación adicional (Afix)
También se puede encontrar más contenido sobre Bootstrap en temas especiales: "Tutorial de aprendizaje de bootstrap"
Lo anterior es la barra de navegación hecha con bootstrap3. Espero que sea útil para el aprendizaje de todos y hacer su propia barra de navegación.