Gestapelte Tabs in Bootstrap 3

157

Ich versuche, linksbündig gestapelte Registerkarten mithilfe des Tab-Abfrage-Plugins in Bootstrap 3 zu implementieren, bei dem Registerkarten vertikal links vom Registerkarteninhalt und nicht oben gerendert werden. Wenn ich Folgendes versuche;

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

Registerkarten sind übereinander gestapelt, werden jedoch nicht richtig nach links gedreht gerendert, sondern sind nur horizontale Registerkarten, die übereinander geklebt werden. Der Inhalt der Registerkarte wird in den Inhaltsbereichen ordnungsgemäß angezeigt / ausgeblendet.

Dies wurde in Bootstrap 2.x mit den Klassen tab-left und tab-right behandelt , aber dies ist in Bootstrap 3 veraltet und scheint nicht wirklich durch irgendetwas ersetzt zu werden. Weiß jemand, ob das korrekte Rendern von Tabs von links nach rechts im Bootstrap 3-Tab-Plugin möglich ist?

Osbergs
quelle
1
Sie können die .navKlasse alleine verwenden und dann mit dem Raster die Breite des Navigationsgeräts und Ihren Inhalt festlegen. Keine Notwendigkeit für ein 'gestapeltes Navi', da .naves standardmäßig gestapelt ist.
Patrick Berkeley

Antworten:

236

Die Registerkarten "Links", "Rechts" und "Unten" wurden aus Bootstrap 3 entfernt. Sie können jedoch benutzerdefiniertes CSS hinzufügen, um dies zu erreichen.

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

Arbeitsbeispiel: http://bootply.com/74926

AKTUALISIEREN

Wenn Sie nicht das genaue Aussehen einer Registerkarte benötigen (links oder rechts entsprechend eingefasst, wenn jede Registerkarte aktiviert ist), können Sie sie nav-stackedzusammen mit Bootstrap einfach verwendencol-* die Registerkarten nach links oder rechts verschieben ...

nav-stackedDemo: 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>
Zim
quelle
33
Dies löst das Problem perfekt. Ich frage mich immer noch, warum sie dies aus Bootstrap 3 herausgezogen haben.
Osbergs
24
Warum wurde es entfernt? oO
Roosevelt
4
Ja, das .nav allein ist gestapelt, aber es sieht nicht wie eine Registerkarte (entsprechende linke, rechte Ränder) aus, wenn es ausgewählt / aktiv ist. Das ist der Zweck von Tabs.
Zim
17
Sie sollten dies nicht wieder hinzufügen müssen. Dies wurde absichtlich entfernt. In der offiziellen Bootstrap-Dokumentation finden Sie unter JavaScript / Tabs, wie Sie jetzt damit umgehen sollten. In diesem Tutorial erfahren Sie auch, wie Sie das Bootstrap 3-Setup ordnungsgemäß für vertikale Registerkarten verwenden. tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
Neil Monroe
3
Für einfachen Textinhalt ist jede Lösung in Ordnung. Wenn jemand anderes mit dem Problem konfrontiert ist, über das ich spreche: Die Lösung von @ dbtek hat am besten funktioniert: Bootstrap-Vertical-Tabs Ich musste nur die CSS-Datei einfügen ... danke @dbtek!
Msanjay
47

Das Bootstrap-Team scheint es entfernt zu haben. Siehe hier: https://github.com/twbs/bootstrap/issues/8922 . @ Skellys Antwort beinhaltet benutzerdefiniertes CSS, was ich nicht wollte, also habe ich das Rastersystem und Navi-Pillen verwendet. Es hat gut funktioniert und sah toll aus. Der Code sieht so aus:

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

Sie können dies hier in Aktion sehen: http://bootply.com/81948

[Update] @SeanK bietet die Möglichkeit, die Nav-Pillen nicht über Javascript aktivieren zu müssen und stattdessen zu verwenden data-toggle="pill". Überprüfen Sie es hier: http://bootply.com/96067 . Danke Sean.

David Lemayian
quelle
10
Sie müssen das Javascript nicht einschließen. Wenn Sie jedem a-Tag data-toggle = "pill" hinzufügen, funktioniert dies automatisch mithilfe von Bootstrap. Sie können hier sehen: bootply.com/96067
SeanK
Danke @SeanK. Habe es der Antwort hinzugefügt.
David Lemayian
Das war schön und ich hätte es ohne das benutzerdefinierte CSS vorgezogen, aber die Registerkarten von @ Skelly haben ein "kontinuierlicheres" Aussehen und eine Beziehung zwischen der aktiven Registerkarte und dem Inhalt. Wäre gut, wenn das hier irgendwie erreicht werden könnte, aber ich konnte nicht herausfinden, wie. Ich habe eine Gabel gemacht, die der Einfachheit halber nur ein Beispiel einschränkt
msanjay
1
Auf der anderen Seite habe ich einige farbige Inhalte eingefügt, und dies schien viel besser damit umzugehen als der akzeptierte Ansatz. siehe bootply.com/SeQ6z7fhbQ und bootply.com/cre9NpmXpA
msanjay
9

Sie sollten dies nicht wieder hinzufügen müssen. Dies wurde absichtlich entfernt. Die Dokumentation hat sich etwas geändert und die erforderliche CSS-Klasse ("nav-stacked") wird nur unter der Pillen-Komponente erwähnt, sollte aber auch für Registerkarten funktionieren.

Dieses Tutorial zeigt, wie Sie das Bootstrap 3-Setup richtig verwenden, um vertikale Registerkarten zu erstellen :
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

Neil Monroe
quelle
Sie haben es jetzt vollständig entfernt. Informationen zum Verfahren finden Sie unter dem obigen Link.
Neil Monroe
Vielen Dank. Der Artikel, auf den Sie verlinkt haben, enthält praktische Beispiele und viele Erklärungen. Das ist genau das, wonach ich gesucht habe.
Aluan Haddad
Für das, was es wert ist, sieht dies nur für Navi-Pillen richtig aus. Navi-Tabs werden gestapelt, aber das Styling sieht aus wie horizontale Tabs oben. Da das OP speziell nach Navigationsregistern gefragt hat, kann dies meiner Meinung nach nicht als akzeptable Antwort angesehen werden.
Jay Mathis
Die URL funktioniert nicht mehr! Diese Antwort wird dann bedeutungslos!
Bobort