it-swarm.com.de

Gestapelte Tabs in Bootstrap 3

Ich versuche, linksbündig angeordnete gestapelte Tabs mit dem Tab-JQuery-Plugin in Bootstrap 3 zu implementieren, wobei Tabs nicht oben, sondern vertikal links vom Tab-Inhalt 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 werden übereinander gestapelt, aber nicht richtig als nach links gedreht dargestellt. Stattdessen handelt es sich nur um horizontale, übereinander geklebte Registerkarten. Der Inhalt von Registerkarten wird in den Inhaltsbereichen ordnungsgemäß angezeigt/ausgeblendet.

Dies wurde in Bootstrap 2.x mit den Klassen Tabulator-links und Tabulator-rechts behandelt, wird jedoch in Bootstrap 3 und nicht mehr unterstützt scheint wirklich durch nichts ersetzt zu werden. Weiß jemand, ob im Bootstrap 3-Tab-Plugin ein korrektes Rendern von Tabulatoren von links nach rechts möglich ist?

153
osmbergs

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

[~ # ~] update [~ # ~]

Wenn Sie nicht das genaue Aussehen eines Tabs benötigen (bei Aktivierung jedes Tabs wird links oder rechts ein entsprechender Rahmen angezeigt), können Sie einfach nav-stacked, zusammen mit Bootstrap col-*, um die Tabs nach links oder rechts zu verschieben ...

nav-stacked demo: 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>
232
Zim

Das Bootstrap -Team hat es anscheinend entfernt. Siehe hier: https://github.com/twbs/bootstrap/issues/8922 . @ Skellys Antwort beinhaltet benutzerdefiniertes CSS was ich nicht tun wollte, habe ich das Rastersystem und die Navigationspillen benutzt. Es hat gut funktioniert und sah gut 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 Navigationspillen nicht über Javascript aktivieren zu müssen und stattdessen data-toggle="pill". Überprüfen Sie es hier: http://bootply.com/96067 . Danke Sean.

46
David Lemayian

Um Unterstützung für linke und rechte Tabs (jetzt auch mit seitlicher Ausrichtung) für Bootstrap 3) zu erhalten, kann die Komponente bootstrap-vertical-tabs verwendet werden.

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

29
dbtek

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

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

9
Neil Monroe