Empilées les Onglets dans le Bootstrap 3

Je suis en train de mettre en œuvre aligné à gauche empilées les onglets à l'aide de l'Onglet plugin jquery dans le Bootstrap 3, où les onglets sont rendus à la verticale à gauche de l'onglet de contenu, plutôt que sur le dessus. Lorsque j'essaie de celui-ci;

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

Onglets sont empilés les uns sur les autres, mais ne sont pas bien rendu comme étant tournée vers la gauche, au lieu de cela, ils sont juste horizontale onglets collé sur le dessus les uns des autres. Le contenu de l'onglet est bien montré/caché dans le contenu de la vrd.

Cela a été traité dans le Bootstrap 2.x à l'aide de la onglet à gauche et onglet à droite classes, mais c'est déconseillé dans le Bootstrap 3 et ne semble pas vraiment être remplacé par n'importe quoi. Quelqu'un sait-il si bon gauche-droite de l'onglet rendu possible dans le Bootstrap 3 Onglet plugin?

  • Vous pouvez utiliser le .nav classe seul, puis avec la grille de régler la largeur de la valeur liquidative et de votre contenu. Pas besoin d'un "empilés nav' depuis .nav est empilé par défaut.
InformationsquelleAutor osmbergs | 2013-08-25
  1. 232

    À gauche, à Droite et en Dessous des onglets ont été retirés de Bootstrap 3, mais vous pouvez ajouter CSS personnalisé pour atteindre cet..

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

    De travail exemple: http://bootply.com/74926

    Mise à JOUR

    Si vous n'avez pas besoin de connaître la regarder d'un onglet (bordé de façon appropriée sur la gauche ou la droite de chaque onglet est activé), vous pouvez simplement utiliser nav-stacked, avec Bootstrap col-* flotter les onglets à gauche ou à droite...

    nav-stacked dé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>
    • Cela résout parfaitement le problème. Vous vous demandez encore pourquoi ils ont tiré de Bootstrap 3 si.
    • Convertis au MOINS: gist.github.com/lavoiesl/6610753
    • J'ai eu des problèmes de mise CKEditor dans un onglet de la fenêtre au-dessus de CSS. Ce qui a fonctionné pour moi a été de les mettre tous dans une rangée, les onglets dans une seule colonne, contenu dans l'autre: <div class="row"><div class="col-md-2 tabs-left"><ul class="nav nav-tabs">....</ul></div><div class="col-md-10">... J'ai fait cela, et a supprimé les 3 float règles de la CSS en dessus comme ils ne sont pas nécessaires w/ la ligne de classe.
    • Pourquoi était-il retiré? o.O
    • greate, mais ce que nous pouvons faire avec une table dans un onglet à gauche?
    • Avez-vous voir l'Onglet à Gauche exemple ici: bootply.com/74926 ?
    • Il n'y a pas de réel besoin pour l'ajout de gauche/droite des onglets. Mon commentaire ci-dessus: Vous pouvez utiliser le .nav classe seul, puis avec la grille de régler la largeur de la valeur liquidative et de votre contenu. Pas besoin d'un "empilés nav' depuis .la valeur liquidative est empilé par défaut.
    • Oui, l' .nav seul est empilées, mais il ne ressemble pas à un onglet (approprié à gauche, à droite frontières) lorsqu'elle est activée/actif. C'est le but d'onglets.
    • Compris. Je pense juste qu'il est préférable d'utiliser .nav et additif avec les styles pour les bordures, coins arrondis, etc. que de remplacer toutes les construite en .nav-tabs styles.
    • Vous ne devriez pas avoir besoin de l'ajouter de nouveau. Il fut retiré à dessein. Voir l'officiel de Bootstrap, documentation sur la façon dont vous devriez être de la manipulation de ce désormais sous JavaScript / Onglets. Voir aussi, ce tutoriel sur la façon d'utiliser le Bootstrap 3 installation correctement pour faire des onglets verticaux. tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
    • Alors je fais comme la continuité apparence de l'onglet sélectionné dans l'onglet contenu, malheureusement, cela ne semble pas marcher droit. Par exemple, lorsque nous spécifier un bg couleur du contenu dans l'onglet contenu, il chevauche l'onglet en-tête ainsi - s'il vous plaît voir la section bootply.com/cre9NpmXpA
    • pour du texte simple, le contenu, la solution est très bien. Si quelqu'un d'autre face à la question que je parle: @dbtek la solution qui a le mieux fonctionné: bootstrap-vertical-tabs j'ai juste eu à inclure le fichier CSS... merci @dbtek!
    • J'ai le sentiment que les onglets ont été supprimés dans le cadre de l'ensemble mobile-première transition. Tandis que les onglets sont gentils, ils font moins de sens du point de vue sémantique sur un appareil avec pas assez de largeur pour le contenu dans les onglets.
    • bootply n'est pas de travail et montrant erreur d'application.personne ne sait quel est le problème??
    • Vous devez ajouter votre commentaire comme une réponse. La meilleure solution dans ce fil que j'ai essayé.
    • J'ai des problèmes avec le contenu de la hauteur à l'intérieur de l'onglet de contenu. L'astuce ci-dessus résolu mon problème: gist.github.com/lavoiesl/6610753#gistcomment-1684105
    • Cela peut-il avoir le volet couvert avec un haut à droite et en bas de la frontière? quelque chose comme ceci horizontal onglets jsfiddle.net/996Bw
    • Merci pour le "nav-stack" l'idée, j'ai été rayonnages de mon cerveau en essayant de trouver une solution qui était propre et que vous avez fourni gentiment

    InformationsquelleAutor Zim
  2. 46

    Le Bootstrap équipe semble avoir enlevé. Voir ici: https://github.com/twbs/bootstrap/issues/8922 . @Skelly la réponse implique css personnalisé qui je ne voulais pas le faire j'ai utilisé le système de grille et nav-pills. Il a bien fonctionné et de grand air. 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 avoir à activer la nav-pills à l'aide de Javascript et d'utiliser data-toggle="pill". Découvrez-le ici: http://bootply.com/96067. Merci Sean.

    • Vous n'avez pas besoin d'inclure le javascript. Si vous ajoutez des données-toggle="pilule" à chacune une balise ensuite, il sera automatiquement en utilisant bootstrap. Vous pouvez le voir ici: bootply.com/96067
    • Merci @SeanK. L'avoir ajouté à la réponse.
    • c'était sympa et j'aurais préféré sans le CSS personnalisé, mais @Skelly les onglets n'ont plus 'continue' aspect et la relation entre l'onglet actif et le contenu. Serait bonne si la même chose pourrait être atteint en quelque sorte ici, mais je ne pouvais pas comprendre comment. J'ai fait une fourche se rétrécissant vers le bas juste un exemple pour la simplicité: bootply.com/QZfrLF0XjD
    • D'autre part, j'ai mis en couleur le contenu et ce qui semblait gérer beaucoup mieux que la démarche acceptée. voir bootply.com/SeQ6z7fhbQ et bootply.com/cre9NpmXpA
    • bootply.com/96067 le lien ne fonctionne pas maintenant.
    InformationsquelleAutor David Lemayian
  3. 29

    Pour obtenir de gauche et de droite des onglets (maintenant aussi avec sur le côté) support pour Bootstrap 3, bootstrap-vertical-onglets composant peut être utilisé.

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

    InformationsquelleAutor dbtek
  4. 9

    Vous ne devriez pas avoir besoin de l'ajouter de nouveau. Il fut retiré à dessein. La documentation a quelque peu changé et la classe CSS qui est nécessaire ("nav-stack") n'est mentionné sous les pilules volet, mais devrait fonctionner pour les onglets ainsi.

    Ce tutoriel montre comment utiliser le Bootstrap 3 installation correctement pour faire des onglets verticaux:

    tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

    • Je ne vois pas de mention dans le BS3 docs sur les onglets verticaux.
    • Ils ont enlevé complètement maintenant. Voir le lien ci-dessus pour la procédure.
    • Je vous remercie beaucoup. L'article que vous avez lié à des pratiques, des exemples et beaucoup d'explication. C'est juste ce que je cherchais.
    • Pour ce que ça vaut, cela ne regarde droit nav-pills. nav-tabs seront empilées, mais le style ressemble à l'horizontale languettes sur le dessus. Depuis l'OP a demandé spécifiquement sur nav-tabs, je ne pense pas que cela peut être considéré comme une réponse acceptable.
    InformationsquelleAutor Neil Monroe