La barra de navegación (Navbar) es un componente independiente en Bootstrap, y hay una clara diferencia entre la barra de navegación (Navbar) y la navegación (NAV) en Bootstrap. Hay un color de fondo en la barra de navegación (Navbar), y la barra de navegación puede estar en varias formas, como enlaces puros, formas, formas y navegación.
1. Barra de navegación de combate práctico con menú y formulario de nivel 2
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> barra de navegación </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-css styles " body{margin:30px;padding:30px;} </style></head><body><div role="navigation"> <!--Title is implemented through "navbar-header" and "navbar-brand"--> <div> <a href="##">Title</a> </div> <ul> <li><a href="##">Home</a></li> <li> <a href = "##" data-toggle = "desplegable"> blog <span> </span> </a> <!-segundo menú-> <ul> <li> <a href = "##"> segundo menú </a> </li> </li> </li> <li> <a href = "##"> foro </a> </li> </ul> << rol = "búsqueda"> <div> <input type = "text" placeHolder = "Por favor ingrese las palabras clave"/> </div> <button type = "enviar"> Search </boton> </orm> </div> <!: colóquelo al final del documento para hacer que la página se cargue más rápido-> <!-Si desea usar el complemento JS de BootsTrap, primero debe llamar a la jqueración-> <Script de la página más rápido-> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-incluyendo todos los complementos JS para complementos de arranque o js que se pueden usar según sea necesario-> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Las representaciones son las siguientes:
Además de usar el elemento A en Navbar-Brand y la forma UL y Navbar de Navbar-Sav, se pueden usar otros elementos en la barra de navegación de Bootstrap:
1) Botón en la barra de navegación Navbar-Btn
2) Texto en la barra de navegación Navbar
3) Enlace normal en la barra de navegación Navbar-Link
2. Combate práctico 2- Barra de navegación fija
< </ul> </div> <!-barra de navegación inferior-> <div role = "navegación"> <div> <a href = "##"> título </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </li> <a href = "##"> Foro </a> </li> </ul> </div> <!-Contenido de texto-> <div> Contenido de texto de la página web </div>
Las representaciones son las siguientes:
3. Barra de navegación práctica de tres receptivas
Las representaciones son las siguientes:
A veces es necesario invertir el color. Bootstrap proporciona una barra de navegación invertida para esto, pero simplemente reemplaza el nombre de clase Navbar-DeAfull con Navbar-Inverse, y luego se modificará el color de fondo de la barra de navegación y el color del texto.
4. Navegación práctica de cuatro paginación
1) Navegación de paginación con números de página
<!-Pagination: tamaño normal Pagination-lg: haga una navegación de paginación mayor pagination-sm: haga que la paginación sea más pequeña-> <ul> <li> <a href = "#"> «home <a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> 2 </a> </li) <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <!-Estado de disable-> <li> <a href = "#"> Última página »</a> </li> </ul>
Las representaciones son las siguientes:
2) Page Turn and Pagination Navigation
<ul> <li> <a href = "#"> «Página anterior </a> </li> <!-status de discapacitados-> <li> <a href ="#"> página siguiente» </a> </li> </ul> <!-Alinear a la izquierda y a la derecha-> <ul> <li> <a href = "#"> «página anterior </a> </li> <s> <a href. Página »</a> </li> </ul>
Las representaciones son las siguientes:
5. Cinco etiquetas prácticas
En algunas páginas web, a menudo se agrega una etiqueta para decirle a los usuarios información adicional, como:
Este efecto se extrae en Bootstrap en un componente de etiqueta y se destaca en el estilo ".Abel". Similar al botón del elemento del botón, el estilo de la etiqueta también proporciona una variedad de colores, principalmente a través de estos nombres de clases para modificar el color de fondo y el color de texto:
Las representaciones son las siguientes:
6. Combate práctico seis - Insignia
Las insignias se usan principalmente para recordarle cuántos mensajes no leídos se necesitan. En Bootstrap, el estilo de "insignia" se usa para lograr el efecto de la insignia.
<!-Navbar-default Medal de barra de navegación-> <div role = "navegación"> <div> <a href = "##"> título </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> foro <span> 10 </span> </a> </li> <li> <a href = "##"> Comentarios </a> </li> </ul> </div>
Las representaciones son las siguientes:
7. Práctico siete - caja emergente que impulsa la transición de animación
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Box de emergencia de transición animada </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstap/3.1.1/css/bootstrap.min.css" estilo-> <style> Body {margin: 30px; padding: 30px;} </ystye> </head> <body> <button type = "button"> haga clic en mí </botón> <Div id = "mymodal"> <div> <div> <div> <botón type = "botón" botón "data-dismiss =" modal "> <span hidden =" verdadero "verdadero"/español> <pan> span> <pan> span> <pan> span> <h4> Título de popt-up </h4> </div> <div> <p> contenido del cuerpo de popt-up </p> </div> <div> <button type = "botón" data-dismiss = "modal"> cerrar </boton> </div> </div> <!-/.modal-content->> </div> <!-/.modal-dialog-> </div> <! Al final del documento para que la página se cargue más rápido-> <!-Si desea usar el complemento JS de Bootstrap, primero debe llamar a jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <! Incluye todos los complementos JS para bootstrap o js plugins que se necesitan tal vez-<script que puede ser usado. src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> $ (function () {$ (". Btn"). Click (function () {$ ("#mymodal"). Modal ("toggle");}); }); </script> </body> </html>Las representaciones son las siguientes:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico