Bootstrap Elementos de navegación
En este capítulo explicaremos algunas opciones proporcionadas por Bootstrap para definir elementos de navegación. Utilizan el mismo marcado y la clase base..navBootstrap también proporciona una clase auxiliar para compartir marcado y estado. Al cambiar la clase modificadora, se puede alternar entre diferentes estilos.
Navegación de pestañas o etiquetas
Cree un menú de navegación con pestañas:
- Comience con una.navlista no ordenada con la clase.
- Agregue la clase.nav-tabs。
El siguiente ejemplo demuestra esto:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Menú de navegación con píldoras
Menú de navegación básico con píldoras
Si necesita cambiar las pestañas al estilo de píldoras, solo necesita usar la clase.nav-pillsen lugar de.nav-tabsy los demás pasos son los mismos de arriba.
El siguiente ejemplo demuestra esto:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Menú de navegación vertical con píldoras
Puede usar la clase.nav、.nav-pillsjunto con la clase.nav-stackedpara que las píldoras se apilen verticalmente.
El siguiente ejemplo demuestra esto:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Navegación justificada
Puede, cuando el ancho de la pantalla sea mayor que 768px, al usar respectivamente.nav、.nav-tabso.nav、.nav-pillsjunto con la clase.nav-justifiedpara que el menú de navegación con pestañas o píldoras tenga el mismo ancho que el elemento padre. En pantallas más pequeñas, los enlaces de navegación se apilarán.
El siguiente ejemplo demuestra esto:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Enlaces deshabilitados
Para cada.navclase, si se agrega.disabledclase, se creará un enlace gris y se deshabilitará el:hoverestado, como se muestra en el siguiente ejemplo:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Esta clase solo cambiará la apariencia de <a>, no su funcionalidad. Aquí, necesitará usar JavaScript personalizado para deshabilitar el enlace.
Menú desplegable
Los menús de navegación y los menús desplegables usan una sintaxis similar. De forma predeterminada, el ancla del elemento de lista coopera con algunos atributos de datos para activar una lista no ordenada con.dropdown-menula clase
Pestañas con menú desplegable
Los pasos para agregar un menú desplegable a las pestañas son los siguientes:
- Comience con una.navlista no ordenada con la clase.
- Agregue la clase.nav-tabs。
- Agregue una.dropdown-menulista no ordenada con la clase.
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Píldoras con menú desplegable
Los pasos son los mismos que para crear pestañas con menú desplegable, solo necesita cambiar.nav-tabsla clase por.nav-pillscomo se muestra en el siguiente ejemplo:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Más ejemplos de componentes de navegación
Pestañas y píldoras
| Clase | Descripción | Ejemplo |
|---|---|---|
| .nav nav-tabs | Pestañas | Pruébalo |
| .nav nav-pills | Píldoras | Pruébalo |
| .nav nav-pills nav-stacked | Píldoras apiladas verticalmente | Pruébalo |
| .nav-justified | Pestañas justificadas: en pantallas de más de 768px, la clase .nav-justified permite que las pestañas o píldoras tengan fácilmente el mismo ancho. En pantallas pequeñas, los enlaces de navegación se muestran apilados. | Pruébalo |
| .disabled | Pestañas deshabilitadas | Pruébalo |
| Pestañas con menú desplegable | Pruébalo | |
| Píldoras con menú desplegable | Pruébalo | |
| .tab-content | Usado junto con .tab-pane y data-toggle="tab" (data-toggle="pill" ), el contenido correspondiente de las pestañas cambia al alternar entre pestañas. | Pruébalo |
| .tab-pane | Usado junto con .tab-content y data-toggle="tab" (data-toggle="pill"), el contenido correspondiente de las pestañas cambia al alternar entre pestañas. | Pruébalo |