Onglets empilés dans Bootstrap 3

J'essaie d'implémenter des onglets empilés alignés à gauche à l'aide du plugin Tab jquery dans Bootstrap 3 où les onglets sont rendus verticalement à gauche du contenu de l'onglet, plutôt qu'en haut. Quand j'essaye ce qui suit;

   <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>

Les onglets sont empilés les uns sur les autres, mais ne sont pas correctement rendus comme étant tournés vers la gauche, au lieu de cela, ce ne sont que des onglets horizontaux collés les uns sur les autres. Le contenu de l'onglet est correctement affiché / masqué dans les divs de contenu.

Cela a été géré dans Bootstrap 2.x en utilisant les classes tab-left et tab-right , mais cela est obsolète dans Bootstrap 3 et ne semble pas vraiment être remplacé par quoi que ce soit. Est-ce que quelqu'un sait si un bon rendu de l'onglet gauche-droite est possible dans le plugin Bootstrap 3 Tab?

Les onglets Gauche, Droite et Ci-dessous ont été supprimés de Bootstrap 3, mais vous pouvez ajouter du CSS personnalisé pour y parvenir.

.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;
}

Exemple de travail: http://bootply.com/74926

METTRE À JOUR

Si vous n'avez pas besoin de l'apparence exacte d'un onglet (encadré de manière appropriée à gauche ou à droite lorsque chaque onglet est activé), vous pouvez une utilisation simple nav-stacked, avec Bootstrap col-*pour faire flotter les onglets vers la gauche ou la droite ...

nav-stackeddémo: 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>

L'équipe Bootstrap semble l'avoir supprimé. Voir ici: https://github.com/twbs/bootstrap/issues/8922 . La réponse de @ Skelly implique un css personnalisé que je ne voulais pas faire, alors j'ai utilisé le système de grille et les nav-pills. Cela fonctionnait bien et avait l'air super. Le code ressemble à ceci:

<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>

Vous pouvez le voir en action ici: http://bootply.com/81948

[Update] @SeanK donne la possibilité de ne pas avoir à activer les nav-pills via Javascript et d'utiliser à la place data-toggle="pill". Découvrez-le ici: http://bootply.com/96067 . Merci Sean.

Pour obtenir la prise en charge des onglets gauche et droit (désormais également avec sideways) pour Bootstrap 3, le composant bootstrap-vertical-tabs peut être utilisé.

https://github.com/dbtek/bootstrap-vertical-tabs

Vous ne devriez pas avoir besoin de le rajouter. Cela a été supprimé à dessein. La documentation a quelque peu changé et la classe CSS nécessaire ("nav-stacked") n'est mentionnée que sous le composant pills, mais devrait également fonctionner pour les onglets.

Ce tutoriel montre comment utiliser correctement la configuration de Bootstrap 3 pour faire des onglets verticaux:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills