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 combate práctica de una navegación 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 Barra de navegación 2 fijadas
< </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 sensibles
<div role = "navegación"> <div> <!-.navbar-toggle El estilo se usa para contenido que encoge alternar, es decir, el elemento donde se encuentra el estilo de colapso del colapso de navegación NAV-> <button type = "button" data-toggle <span> </span> <!-Asegúrese de que Navbar-Brand se muestre en pantallas amplias y estrechas-> <a href = "##"> Título </a> </div> <! Cuando se haga clic en el icono de la barra de icono, expandirlo nuevamente. Cuando la pantalla es mayor a 768px, se mostrará de forma predeterminada. -> <div> <ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> foro </a> </li> </ul> </div> </div>
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 páginas
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:
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.