En el marco Bootstrap, la navegación es independiente como componente de navegación. Según diferentes versiones, se puede encontrar el código fuente correspondiente:
Menos: NARS sin
Sass: _navs.scss
Navegación en forma de etiqueta, también conocida como navegación de pestañas
La navegación en forma de etiqueta se implementa a través del estilo .nav-Tabs. Al hacer una navegación en forma de etiqueta, debe agregar el nombre de clase .nav-Tabs al contenedor con el nombre de la clase de navegación original .nav
<ul> <li> <a href = "#"> Título de la navegación 1 </a> </li> <li> <a href = "#"> Título de la navegación 2 </a> </li> <li> <a href = "#"> Título de la navegación 3 </a> </li> <li> <a href = "#"> Título de la navegación 4 </a> </li> <Li> <Li> <#"#"#" Título 5 </a> </li> </ul>
principio:
Mostrar elementos del menú li en bloques y organizarlos en el mismo nivel, luego defina el estilo y el efecto de suspensión del mouse de los menús no altos de luz
.nav-tabs {border-bottom: 1px solid #ddd;}. Nav-tabs> li {float: left; margin-bottom: -1px;}. nav-tabs> li> a {margin-right: 2px; line-height: 1.42857143; border: 1px sólido transparente; border-radius: 4px 4px 0 0; li> a: hover {border-color: #eee #eee #ddd;}En general, la pestaña tendrá un elemento seleccionado actualmente, solo necesita agregar el nombre de clase. Active a su etiqueta (li).
<ul> <li> <a href = "#"> Título de la navegación 1 </a> </li> <li> <a href = "#"> Título de la navegación 2 </a> </li> <li> <a href = "#"> Título de la navegación 3 </a> </li> <li> <a href = "#"> Título de la navegación 4 </a> </li> <Li> <Li> <#"#"#" Título 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.active> a: hover, .nav-tabs> li.active> a: focus {color: #555; cursor: predeterminado; Color de fondo: #fff; borde: 1px sólido #ddd; color-fondo de borde: transparente;}Además de las opciones actuales, algunas pestañas también tienen un estado deshabilitado. Para lograr este efecto, simplemente agregue el nombre de clase deshabilitado en el elemento de la etiqueta.
.nav> li.disable> a {color: #999;}. Nav> li.disable> a: hover, .nav> li.disable> a: focus {color: #999; Decoración de texto: ninguna; cursor: no permitido; Color de fondo: transparente;}Si desea lograr el efecto de hacer clic en el elemento del menú para cambiar de contenido, debe cooperar con el complemento JS
Navegación de cápsula (pastillas)
Actualmente resaltado con un efecto de esquina redondeada, su método de implementación es similar a la navegación de pestañas, y con la misma estructura, solo necesita reemplazar el nombre de clase .nav-tabs con el nombre de clase .nav-pils
.nav-pills> li {float: left;}. Nav-pills> li> a {border-radius: 4px;}. Nav-pills> li + li {margin-left: 2px;}. Nav-pills> li.active> a: hover, .nav-pills> li.active> a: focal {color: #fff; Color de fondo: #428BCA;}Navegación apilada vertical
Además de la navegación horizontal, también hay navegación vertical. Para crear navegación vertical apilada, solo necesita agregar el nombre de clase .nav-apilado sobre la base de .nav-pills.
En comparación con la navegación de la cápsula, lo principal es evitar que los elementos de navegación floten, organizarlos verticalmente y luego dejar un cierto espacio para artículos de navegación adyacentes.
.nav-stacked> li {float: none;}. Nav-stacked> li + li {margin-top: 2px; margin-left: 0;}<ul> <li><a href="#">Navigation title 0</a></li> <li><a href="#">Navigation title 1</a></li> <li><a href="#">Navigation title 2</a></li> <li><a href="#">Navigation title 3</a></li> <li><a href = "#"> Título de navegación 4 </a> </li> <li> <a href = "#"> Título de navegación 5 </a> </li> </ul>La navegación de apilamiento vertical es como una línea dividida entre el grupo de menú desplegable y el grupo, y también hay una línea dividida entre los elementos de navegación. Simplemente agregue <li class = "divisor"> </li> entre los elementos de navegación.
<ul> <li> <a href = "#"> Título de la navegación 0 </a> </li> <li> <a href = "#"> Título de la navegación 1 </a> </li> <li> <a href = "#"> Título de la navegación 2 </a> </li> <li> </li> <li> <a href = "#"> Título de navegación href = "#"> Título de navegación 4 </a> </li> <li> <a href = "#"> Título de navegación 5 </a> </li> </ul>
.nav .nav-divider {altura: 1px; margen: 9px 0; desbordamiento: oculto; color de fondo: #e5e5e5;}Navegación adaptativa
La navegación adaptativa se refiere a la navegación que ocupa todo el ancho del contenedor, y los elementos del menú pueden adaptarse al ancho de las celdas de la tabla. La navegación adaptativa es la misma que el componente de botón adaptativo realizado por .BTN-Group-Justified mencionado anteriormente, pero al hacer navegación adaptativa, el nombre de clase .NAV-Justificado debe usarse con .nav-Tabs o .nav-Pills.
principio:
Establezca el ancho en 100% en la lista UL, y luego establezca la pantalla: celda de mesa para cada elemento de menú LI, de modo que la lista simule la forma de una celda de tabla;
.nav-justificado {ancho: 100%;}. Nav-justified> li {float: none;}. Nav-justified> li> a {margen-bottom: 5px; Text-Align: Center;}. Nav-Justified> .dropdown .dropdown-Menu {top: auto; Izquierda: Auto;}@Media (min-width: 768px) {.nav-justified> li {display: table-celle; Ancho: 1%; } .nav-justified> li> a {margen-bottom: 0; }}Hay una condición de consulta de medios anterior: @Media (Min-Width: 768px) {...} significa que la navegación adaptativa solo se puede mostrar en el estilo anterior si el ancho de la ventana del navegador es mayor que 768px, pero cuando la ventana del navegador sea menor que 768px, se mostrará en el estilo de abajo.
.V-Tabs y .NAV-Justified se usan juntos, lo que significa navegación de pestañas adaptativa. Cuando el ancho de la ventana del navegador es inferior a 768px, se realiza un procesamiento adicional en el estilo.
.nav-tabs.nav-justificado {ancho: 100%; Border-Bottom: 0;}. Nav-tabs.nav-justified> li {float: none;}. nav-tabs.nav-justified> li> a {margen-bottom: 5px; Text-Align: Center;}. Nav-Tabs.nav-Justified> .dropdown .dropdown-Menu {top: auto; Izquierda: Auto;}@Media (min-width: 768px) {.nav-tabs.nav-justified> li {display: table-celle; width: .active > a:hover,.nav-tabs.nav-justified > .active > a:hover,.nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; Border-Radius: 4px 4px 0 0; } .nav-tabs.nav-justified> .active> a, .nav-tabs.nav-justified> .active> a: hover, .nav-tabs.nav-justified> .active> a: foco {border-bottom-color: #fff; }}Navegación más menú desplegable (navegación secundaria)
Para crear navegación secundaria, solo necesita usar Li como contenedor principal, usar el nombre de la clase. Dropdown y anidar otra lista UL en Li
<ul> <li> <a href = "#"> Menú de navegación1 </a> </li> <li> <a href = "#"> menú de navegación </a> </li> <li> <a href = "#"> Navigation Menu3 </a> </li> <li> <a href = "#"> menú de navegación4 </a> </ai> <li> <a href = "#"#"#" Menú4 </a> </li> <li> <adata-toggle = "desplegable"> menú de navegación 5 <span> </span> </a> <ul> <li> <a href = "#"> menú desplegable </a> </li> <li> <a href = "#"> menú2 </a> </li> <li> <ahi> <a href = "#"#" <li> <a href = "#"> menú desplegable4 </a> </li> </li> </li> <li> <a href = "#"> menú de navegación 6 </a> </li> </ul>
Navegación de pan
Generalmente se usan migas de pan para la navegación, y su función principal es decirle al usuario la ubicación actual de la página. Las migas de pan también son un componente de módulo independiente en el marco de arranque.
Menos: migas de pan.
Sass: _breadrumbs.scss
<Ol> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> mi libro </a> </li> <li> CSS ilustrado </li> </ol>
.BreadCrumb {Padding: 8px 15px; margen-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px;}. Breadcrumb> li {display: inline-block;}. Breadcrumb> li + li: antes de {padding: 0 5px; color: #ccc; content: "/00a 00"; .Active {Color: #999;}Lo anterior usa Li+Li: antes de implementar el separador entre Li y Li. Esta solución no es compatible con la versión inferior de IE.
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
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.