Schede impilate in Bootstrap 3


157

Sto cercando di implementare le schede sovrapposte allineate a sinistra utilizzando il plug-in Tab jquery in Bootstrap 3 in cui le schede vengono visualizzate verticalmente a sinistra del contenuto delle schede, anziché in cima. Quando provo quanto segue;

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

Le schede sono sovrapposte l'una sull'altra, ma non vengono visualizzate correttamente come ruotate a sinistra, invece sono solo schede orizzontali incollate una sull'altra. Il contenuto della scheda viene mostrato / nascosto correttamente nelle div del contenuto.

Questo è stato gestito in Bootstrap 2.x usando le classi tab-left e tab-right , ma questo è deprecato in Bootstrap 3 e non sembra realmente essere sostituito con nulla. Qualcuno sa se nel plug-in Bootstrap 3 Tab è possibile il corretto rendering della scheda sinistra-destra?


1
Puoi usare la .navclasse da solo, quindi con la griglia imposta la larghezza del nav e il tuo contenuto. Non è necessario un "nav in pila" poiché .navè in pila per impostazione predefinita.
Patrick Berkeley,

Risposte:


236

Le schede Sinistra, Destra e Sotto sono state rimosse da Bootstrap 3, ma è possibile aggiungere CSS personalizzati per raggiungere questo obiettivo.

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

Esempio di lavoro: http://bootply.com/74926

AGGIORNARE

Se non hai bisogno dell'aspetto esatto di una scheda (delimitata in modo appropriato a sinistra o a destra quando ogni scheda è attivata), puoi usare semplicemente nav-stacked, insieme a Bootstrap, col-*per spostare le schede a sinistra o a destra ...

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>

33
Questo risolve perfettamente il problema. Mi chiedo ancora perché l'hanno estratto da Bootstrap 3.
Osmbergs,

24
Perché è stato rimosso? oO
roosevelt,

4
Sì, il solo .nav è impilato, ma non appare come una scheda (appropriati bordi sinistro, destro) quando è selezionato / attivo. Questo è lo scopo delle schede.
Zim

17
Non è necessario aggiungere nuovamente questo elemento. È stato rimosso intenzionalmente. Vedi la documentazione ufficiale di Bootstrap su come dovresti gestirla ora in JavaScript / Tab. Vedi anche questo tutorial su come utilizzare correttamente la configurazione di Bootstrap 3 per eseguire le schede verticali. tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
Neil Monroe

3
per un semplice contenuto di testo, entrambe le soluzioni vanno bene. Se qualcun altro deve affrontare il problema di cui sto parlando: la soluzione di @ dbtek ha funzionato meglio: bootstrap-vertical-tabs Ho dovuto solo includere il file CSS ... grazie @dbtek!
msanjay,

47

Il team Bootstrap sembra averlo rimosso. Vedi qui: https://github.com/twbs/bootstrap/issues/8922 . La risposta di @ Skelly riguarda css personalizzati che non volevo fare, quindi ho usato il sistema a griglia e le nav-pillole. Funzionava bene e sembrava fantastico. Il codice è simile al seguente:

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

Puoi vederlo in azione qui: http://bootply.com/81948

[Aggiornamento] @SeanK offre la possibilità di non dover abilitare le nav-pills tramite Javascript e invece di utilizzarle data-toggle="pill". Dai un'occhiata qui: http://bootply.com/96067 . Grazie Sean.


10
Non è necessario includere javascript. Se aggiungi data-toggle = "pill" a ciascun a-tag, funzionerà automaticamente usando bootstrap. Puoi vedere qui: bootply.com/96067
SeanK

Grazie @SeanK. L'ho aggiunto alla risposta.
David Lemayian,

è stato bello e avrei preferito questo senza il CSS personalizzato, ma le schede di @ Skelly hanno un aspetto più "continuo" e la relazione tra la scheda attiva e il contenuto. Sarebbe bello se lo stesso potesse essere realizzato in qualche modo qui ma non sono riuscito a capire come. Ho fatto una forchetta restringendo solo un esempio per semplicità: bootply.com/QZfrLF0XjD
msanjay

1
D'altra parte, ho inserito un contenuto colorato e questo sembrava gestirlo molto meglio dell'approccio accettato. vedi bootply.com/SeQ6z7fhbQ e bootply.com/cre9NpmXpA
msanjay


9

Non è necessario aggiungere nuovamente questo elemento. È stato rimosso intenzionalmente. La documentazione è cambiata in qualche modo e la classe CSS necessaria ("nav-stacked") è menzionata solo nella componente pillole, ma dovrebbe funzionare anche per le schede.

Questo tutorial mostra come utilizzare correttamente l'installazione di Bootstrap 3 per eseguire le schede verticali:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills


L'hanno rimosso completamente ora. Vedi il link sopra per la procedura.
Neil Monroe,

Grazie mille. L'articolo a cui hai collegato fornisce esempi pratici e funzionanti e molte spiegazioni. Questo è proprio quello che stavo cercando.
Aluan Haddad,

Per quello che vale, questo sembra giusto solo per le pillole nav. le schede di navigazione verranno impilate ma lo stile appare come schede orizzontali in alto. Dal momento che l'OP ha chiesto specificamente informazioni sulle schede di navigazione, non penso che questa possa essere considerata una risposta accettabile.
Jay Mathis,

L'URL non funziona più! Questa risposta diventa quindi insignificante!
Bobort,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.