Twitter Bootstrap Tabs Upside Down

Habe ich verwendet Twitter Bootstrap ( http://twitter.github.io/bootstrap/javascript.html#tabs ) - Tabs-feature, aber ich will es verkehrt herum, mit der Inhalte angezeigt, auf der Oberseite und der TabMenuNav an der Unterseite!
Ist das möglich?
Irgendwelche workarounds?

InformationsquelleAutor Kelvin Castelino | 2013-06-06
  1. 13

    Verwenden Sie die folgende CSS zu bekommen, was Sie erwartet. Ich fügte Grenze .tab-content - Klasse, um den Inhalt hervorgehoben. 

    .tab-content {
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
}

.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-top-color: transparent;
}

    Den HTML-Struktur sollte wie folgt sein:

    <div class="tabbable">
    <div class="tab-content">
        <div id="tab1" class="tab-pane active">
            tab1 content</div>
        <div id="tab2" class="tab-pane">
            tab2 content</div>
        <div id="tab3" class="tab-pane">
            tab3 content</div>
        <div id="tab4" class="tab-pane">
            tab4 content</div>
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
        <li><a href="#tab2" data-toggle="tab">tab2</a></li>
        <li><a href="#tab3" data-toggle="tab">tab3</a></li>
        <li><a href="#tab4" data-toggle="tab">tab4</a></li>
    </ul>
</div>

    Bootply Beispiel.

    • wenn es eine akzeptierte Antwort, bitte vergewissern Sie sich, dass das grüne Häkchen.
    • Ja, das war genau das, was ich gesucht habe! Danke!!! Aber ich hatte versucht tsippert die Antwort, die funktionierte einfach im Handumdrehen! Obwohl ich hatte zu zwicken Stile 🙂 Aber vielen, vielen Dank! 🙂
    • warum diese Antwort markiert nach unten, als unaccpeted Antwort? irgendwelche Gründe?
    • Nur Frage mich, wie es möglich wäre, zu arbeiten, ohne bootstrap tabs.js?
    • sorry mein Fehler, es ist mit bootstrap-infact. nicht alles enthalten, da es bereits ein bootstrap-Spielplatz. Vielen Dank für die Korrektur.
    InformationsquelleAutor Ravimallya
  2. 1

    Versuchen Sie zum umkehren der Reihenfolge, mit der <div class="tab-content"> ersten und mit <ul class="nav nav-tabs" id="myTab"> für die Letzte.

    <div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>
    • während die Umkehrung der Reihenfolge, die css musste auch optimiert werden.
    • Ja ich habe diese, und hat Prima funktioniert 🙂
    • Wenn es funktioniert, können Sie markieren Sie diese Frage als eine akzeptierte Antwort?
    • diese "Werke", aber ohne die css-tweaks sieht es nicht schön
    InformationsquelleAutor Tiago Sippert
Schreibe einen Kommentar