Estoy tratando de implementar tabs astackdas alineadas a la izquierda usando el plugin Tab jquery en Bootstrap 3, donde las tabs se muestran verticalmente a la izquierda del contenido de tabs, en lugar de en la parte superior. Cuando bash lo siguiente;
Tab 1 content Tab 2 content Tab 3 content Las tabs se astackn una encima de la otra, pero no se representan correctamente como giradas hacia la izquierda, sino que son simplemente tabs horizontales pegadas una encima de la otra. El contenido de la pestaña se muestra / oculta correctamente en los divs de contenido.
Esto se manejó en Bootstrap 2.x usando las clases tab-left y tab-right , pero esto está obsoleto en Bootstrap 3 y realmente no parece ser reemplazado por nada. ¿Alguien sabe si es posible la representación adecuada de las tabs izquierda-derecha en el complemento Bootstrap 3 Tab?
Las tabs Izquierda, Derecha y Debajo se eliminaron de Bootstrap 3, pero puede agregar CSS personalizado para lograr esto.
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs { border-bottom: 0; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .tabs-below > .nav-tabs { border-top: 1px solid #ddd; } .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-below > .nav-tabs > li > a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus { border-top-color: #ddd; border-bottom-color: transparent; } .tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus { border-color: transparent #ddd #ddd #ddd; } .tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #eeeeee #dddddd #eeeeee #eeeeee; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; } .tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; } .tabs-right > .nav-tabs > li > a { margin-left: -1px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus { border-color: #eeeeee #eeeeee #eeeeee #dddddd; } .tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus { border-color: #ddd #ddd #ddd transparent; *border-left-color: #ffffff; }
Ejemplo de trabajo: http://bootply.com/74926
ACTUALIZAR
Si no necesita el aspecto exacto de una pestaña (delimitada apropiadamente a la izquierda o a la derecha a medida que se activa cada pestaña), puede usar nav-stacked , junto con Bootstrap col-* para flotar las tabs hacia la izquierda o hacia la derecha. …
demostración de nav-stacked : http://codeply.com/go/rv3Cvr0lZ4
El equipo de Bootstrap parece haberlo eliminado. Vea aquí: https://github.com/twbs/bootstrap/issues/8922 . La respuesta de @ Skelly implica CSS personalizado que no quería hacer, así que utilicé el sistema de grillas y las píldoras de navegación. Funcionó bien y se veía genial. El código se ve así:
Home Profile Messages
Puedes ver esto en acción aquí: http://bootply.com/81948
[Actualizar] @SeanK ofrece la opción de no tener que habilitar las pastillas de navegación a través de Javascript y en su lugar usar data-toggle="pill" . Compruébelo aquí: http://bootply.com/96067 . Gracias Sean.
Para obtener las tabs izquierda y derecha (ahora también con lateral) compatible con Bootstrap 3, se puede usar el componente bootstrap-vertical-tabs.
No debería necesitar agregar esto nuevamente. Esto fue eliminado a propósito. La documentación ha cambiado un poco y la clase de CSS que es necesaria (“nav-stacked”) solo se menciona en el componente de píldoras, pero también debería funcionar para las tabs.
Este tutorial muestra cómo usar la configuración de Bootstrap 3 correctamente para hacer tabs verticales:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
Aquí tienes, todas las variantes de navegación con tabs con ejemplos de trabajo. http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Navigations.php