Onglets empilés dans Bootstrap 3


157

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?


1
Vous pouvez utiliser la .navclasse seule, puis avec la grille, définissez la largeur de la navigation et votre contenu. Pas besoin d'un 'nav empilé' car il .navest empilé par défaut.
Patrick Berkeley

Réponses:


236

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>

33
Cela résout parfaitement le problème. Je me demande toujours pourquoi ils ont retiré cela de Bootstrap 3.
osmbergs

24
Pourquoi a-t-il été supprimé? oO
roosevelt

4
Oui, le .nav seul est empilé, mais il ne ressemble pas à un onglet (bordures gauche et droite appropriées) lorsqu'il est sélectionné / actif. C'est le but des onglets.
Zim

17
Vous ne devriez pas avoir besoin de le rajouter. Cela a été supprimé à dessein. Consultez la documentation officielle de Bootstrap pour savoir comment vous devez gérer cela maintenant sous JavaScript / Tabs. Consultez également ce didacticiel sur la manière d'utiliser correctement la configuration de Bootstrap 3 pour créer des onglets verticaux. tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
Neil Monroe

3
pour un contenu textuel simple, l'une ou l'autre solution convient. Si quelqu'un d'autre est confronté au problème dont je parle: la solution de @ dbtek fonctionnait le mieux: bootstrap-vertical-tabs Je devais juste inclure le fichier CSS ... merci @dbtek!
msanjay

47

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.


10
Vous n'avez pas besoin d'inclure le javascript. Si vous ajoutez data-toggle = "pill" à chaque a-tag, cela fonctionnera automatiquement en utilisant bootstrap. Vous pouvez voir ici: bootply.com/96067
SeanK

Merci @SeanK. Je l'ai ajouté à la réponse.
David Lemayian

c'était bien et j'aurais préféré cela sans le CSS personnalisé, mais les onglets de @ Skelly ont un aspect et une relation plus continus entre l'onglet actif et le contenu. Ce serait bien si la même chose pouvait être obtenue ici, mais je ne pouvais pas comprendre comment. J'ai fait un fork en réduisant juste un exemple pour plus de simplicité: bootply.com/QZfrLF0XjD
msanjay

1
D'un autre côté, j'ai mis du contenu coloré et cela a semblé le gérer beaucoup mieux que l'approche acceptée. voir bootply.com/SeQ6z7fhbQ et bootply.com/cre9NpmXpA
msanjay


9

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


Ils l'ont complètement supprimé maintenant. Voir le lien ci-dessus pour la procédure.
Neil Monroe

Merci beaucoup. L'article auquel vous avez lié fournit des exemples pratiques et fonctionnels et de nombreuses explications. C'est exactement ce que je cherchais.
Aluan Haddad

Pour ce que ça vaut, cela ne semble juste que pour les pilules de navigation. Les onglets de navigation seront empilés mais le style ressemble à des onglets horizontaux sur le dessus. Étant donné que le PO a posé des questions spécifiquement sur les onglets de navigation, je ne pense pas que cela puisse être considéré comme une réponse acceptable.
Jay Mathis

L'URL ne fonctionne plus! Cette réponse devient alors dénuée de sens!
Bobort
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.