twitter bootstrap - example - Pestañas apiladas en Bootstrap 3
tooltip bootstrap css (5)
Aquí tienes, todas las variantes de navegación con pestañas con ejemplos de trabajo. http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Navigations.php
Estoy tratando de implementar pestañas apiladas alineadas a la izquierda usando el plugin Tab jquery en Bootstrap 3, donde las pestañas se muestran verticalmente a la izquierda del contenido de pestañas, en lugar de en la parte superior. Cuando intento lo siguiente;
<ul class="nav nav-tabs nav-stacked">
<li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
Tab 1 content
</div>
<div class="tab-pane fade" id="tab2">
Tab 2 content
</div>
<div class="tab-pane fade" id="tab3">
Tab 3 content
</div>
</div>
Las pestañas se apilan una encima de la otra, pero no se representan correctamente como giradas hacia la izquierda, sino que son simplemente pestañas 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 pestañas izquierda-derecha en el complemento Bootstrap 3 Tab?
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í:
<div class="row">
<!-- Navigation Buttons -->
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked" id="myTabs">
<li class="active"><a href="#home" data-toggle="pill">Home</a></li>
<li><a href="#profile" data-toggle="pill">Profile</a></li>
<li><a href="#messages" data-toggle="pill">Messages</a></li>
</ul>
</div>
<!-- Content -->
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="profile">Profile</div>
<div class="tab-pane" id="messages">Messages</div>
</div>
</div>
</div>
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.
Las pestañas 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 pestañas hacia la izquierda o hacia la derecha. ...
demostración de nav-stacked : http://codeply.com/go/rv3Cvr0lZ4
<ul class="nav nav-pills nav-stacked col-md-3">
<li><a href="#a" data-toggle="tab">1</a></li>
<li><a href="#b" data-toggle="tab">2</a></li>
<li><a href="#c" data-toggle="tab">3</a></li>
</ul>
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 pestañas.
Este tutorial muestra cómo usar la configuración de Bootstrap 3 correctamente para hacer pestañas verticales:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
Para obtener las pestañas izquierda y derecha (ahora también con lateral) compatible con Bootstrap 3, se puede usar el componente bootstrap-vertical-tabs.