Onglets empilés dans Bootstrap 3

Question

J'essaie de mettre en place 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. Lorsque j'essaie 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, ils ne sont que des onglets horizontaux collés les uns sur les autres. Le contenu des onglets est correctement affiché/caché dans les divs de contenu.

Cela était géré dans Bootstrap 2.x à l'aide de l'élément tab-gauche y tab-droit mais ces classes sont dépréciées dans Bootstrap 3 et ne semblent pas vraiment être remplacées par quoi que ce soit. Quelqu'un sait-il si un rendu correct des onglets gauche-droite est possible dans le plugin d'onglets de Bootstrap 3 ?

Answer 1

Les onglets Left, Right et Below ont été supprimés de Bootstrap 3, mais vous pouvez ajouter des CSS personnalisés 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://www.bootply.com/74926

Answer 2

L'équipe Bootstrap semble l'avoir supprimé. Voir ici : https://github.com/twbs/bootstrap/issues/8922 . La réponse de @Skelly implique des css personnalisés, ce que je ne voulais pas faire. J'ai donc utilisé le système de grille et les nav-pills. Cela a bien fonctionné et c'était très beau. 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

[Mise à jour] @SeanK donne la possibilité de ne pas activer les nav-pills par Javascript et d'utiliser plutôt data-toggle="pill" . Consultez-le ici : http://bootply.com/96067 . Merci Sean.

Answer 3

Pour obtenir la prise en charge des onglets à gauche et à droite (désormais aussi avec les côtés) pour Bootstrap 3, le composant bootstrap-vertical-tabs peut être utilisé.

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

Answer 4

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

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

Answer 5

Voici toutes les variantes de la navigation par onglets avec des exemples concrets. http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Navigations.php