Este artículo contiene los métodos de uso básicos de la barra de navegación de bootstrap para su referencia. El contenido específico es el siguiente
1. Estilo de navegación básico de Bootstrap
Las barras de navegación se realizan principalmente en el marco de Bootstrap a través del estilo ".nav". El estilo predeterminado ".nav" no proporciona el estilo de navegación predeterminado. Se debe adjuntar otro estilo para que sea efectivo, como "Tabs Nav", "Pills Nav", etc. Por ejemplo, hay un ejemplo de una barra de navegación de pestañas en el editor de códigos a la derecha. Su método de implementación es agregar dos estilos de clase a la etiqueta UL.NAV y las Tabs de navegación
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
2. Barra de navegación básica de bootstrap
Al crear una barra de navegación básica, implica principalmente los siguientes pasos:
Paso 1: Primero agregue el nombre de clase "Navbar-Nav" basado en la lista de navegación (<UL Class = "Nav">)
Paso 2: Agregue un contenedor (DIV) fuera de la lista y use los nombres de clase "Navbar" y "Navbar-Default"
La función principal del estilo ".navbar" es establecer los efectos del acolchado izquierdo y derecho y las esquinas redondeadas, pero los estilos relacionados con el color no se establecen de ninguna manera.
<div role = "navegación"> <ul> <li> <a href = "##"> página de inicio </a> </li> <li> <a href = "##"> Serie de tutoriales </a> </li> <li> <a href = "##"> Introducción a maestros famosos </a> </li> <li> <a href = "##"> Casos exitosos <li> <a href = "##"> Acerca de nosotros </a> </li> </ul> </div>
3. Agregue el título a la barra de navegación de Bootstrap
En la producción de la página web, a menudo hay un título frente al menú (el tamaño del texto es un poco más grande que otros textos). De hecho, el marco Bootstrap también ha hecho esta consideración para todos, que se implementa a través de "Navbar-Header" y "Navbar-Brand".
<div role = "navegación"> <div> <a href = "##"> barra de navegación </a> </div> <ul> <li> <a href = "##"> Page de inicio </a> </li> <li> <a href = "##"> serie de tutoriales </a> </li> <li> <a href = "##"> Introducción a famosas TARESTERES </a> <li> <a href = "##"> casos exitosos </a> </li> <li> <a href = "##"> sobre nosotros </a> </li> </ul> </div>
4. Bootstrap Navigation Bar Menú secundaria
También es muy fácil agregar un menú secundario a la barra de navegación
<div role = "navegación"> <div> <a href = "##"> barra de navegación </a> </div> <ul> <li> <a href = "##"> página de inicio </a> </li> <li> <a href = "##"> data-toggle = "desplegable"> Serie de tutoriales <pan> </span> </a> <ul> <li> <li> <li> <li> href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> </li> </li> </li> <li> <li> <a href = "##"> Introducción a los maestros de maestros </a> </li> href = "##"> casos exitosos </a> </li> <li> <a href = "##"> sobre nosotros </a> </li> </ul> </div>
5. Barra de navegación de bootstrap con formulario
Algunas barras de navegación contienen formularios de búsqueda, y se proporciona una "forma de barra de Nava" en el marco de arranque. El método es muy simple de usar. Coloque un formulario con el nombre de la clase de forma de Navbar en el contenedor Navbar. Navbar-Left "permite que el formulario flote a la izquierda para lograr mejor la alineación. En el marco de arranque, también se proporciona un estilo de" Navbar-Right "para permitir que los elementos se alineen a la derecha en la barra de navegación.
<div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <ul> <li><a href="##">Homepage</a></li> <li> <a href="##">data-toggle="dropdown">Series of tutorials<span></span></a> <ul> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li><a href="##">PHP</a></li> </li> </li> <li><a href="##">PHP</a></li> </li> </li> <li><a href = "##"> Introducción a los maestros famosos </a> </li> <li> <a href = "##"> casos exitosos </a> </li> <li> <a href = "##"> sobre nosotros </a> </ail> </ul> <forma acción = "##" rol = "buscar"> <div> type = "texter =" por favor = "por favor, por favor, por favor, por favor, entere <Divins". <button type = "enviar"> Search </boton> </form> </div>
6. Botones, texto y enlaces en la barra de navegación de Bootstrap
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 del marco Bootstrap. El marco proporciona otros tres estilos:
1). Botón en la barra de navegación Navbar-Btn
2). Texto en la barra de navegación Navbar
3) .Navbar-Link en la barra de navegación
Sin embargo, estos tres estilos están sujetos a ciertas restricciones cuando se usan en el marco y deben usarse en combinación con Navbar-Brand y Navbar-Sav. Además, hay ciertas restricciones en la cantidad. En general, no habrá ningún problema al usar uno o dos, y habrá problemas si excede dos.
<div role = "Navigation"> <viv> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> Navbar Text </a> </li> <li> <a href = "##"> text de navbar </a> </li> <li> <li> <a href = "##"> texto de navbar </a> </li> </ul> </iv> <div role = "navegación"> <div> <a href = "##"> bootstrap </a> </div> <div> <div> <a href = "##"> text de navbar </a> <a href = "##"> navar text </a> href = "##"> Texto de Navbar </a> </div> </div>
7. Barra de navegación fija de arranque
En uno de los muchos casos, los diseñadores desean que la barra de navegación se fije en la parte superior o inferior del navegador, y la aplicación de esta barra de navegación fija es más común en el desarrollo móvil. El marco Bootstrap proporciona dos formas de arreglar las barras de navegación:
.navbar-fijo: la barra de navegación se fija en la parte superior de la ventana del navegador
.-Bottom fijo de Navbar: la barra de navegación se fija en la parte inferior de la ventana del navegador
<div role = "navegación"> ... </div> <div> Estoy contento </div> <div role = "navegación"> ... </div>
8. Navegación de paginación de bootstrap
La navegación de paginación numerada de la página puede ser la navegación de paginación más común, especialmente cuando hay mucho contenido en la página de la lista, proporcionará a los usuarios métodos de navegación por paginación. Por lo general, a muchos estudiantes les gusta usar estructuras Div> A y Div> Span para crear navegación pagada. Sin embargo, en el marco Bootstrap, se usa una estructura como UL> Li> A, y se agrega un método de paginación a la etiqueta UL.
<ul> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> »</a> </li> </ul>
En el marco Bootstrap, también puede establecer el tamaño del botón de paginación en varias situaciones diferentes.
1). Haga que la navegación por paginación sea más grande a través de "Pagination-LG";
2). Haga que la navegación por paginación sea más pequeña a través de "pagination-SM"
<ul> ... </ul> <ul> ... </ul> <ul> ... </ul> <ul> ... </ul>
Además de proporcionar navegación de página numerada de página, el marco Bootstrap también proporciona navegación de giro de página. Este tipo de navegación de paginación a menudo se ve en algunos sitios web simples, como blogs personales, sitios web de revistas, etc. Este tipo de navegación de paginación no ve el número de página específico, y solo proporciona un botón de "página anterior" y "siguiente página".
En uso real, la navegación por paginación de cambio de página es similar a la navegación de paginación codificada por la página, agregando la clase de buscapersonas a la etiqueta UL.
<ul> <li> <a href = "#"> «Página anterior </a> </li> <li> <a href ="#"> página siguiente» </a> </li> </ul>
De manera predeterminada, la navegación de paginación de giración de página se muestra en el centro, pero a veces necesitamos que uno esté a la izquierda y el otro a la derecha. Bootstrap Framework proporciona dos estilos
Anterior: Deje que se deje el botón "anterior"
Siguiente: Deje el botón "Siguiente" a la derecha
<ul> <li> <a href = "#"> «Página anterior </a> </li> <li> <a href ="#"> página siguiente» </a> </li> </ul>
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de la barra de navegación de Bootstrap, espero que sea útil para el aprendizaje de todos.