it-swarm.com.de

Ausblenden der Seitenleiste mit Bootstrap 3

Ich habe gerade diese Seite besucht http://www.elmastudio.de/ und mich gefragt, ob es möglich ist, den linken Seitenleisten-Kollaps mit Bootstrap 3 zu erstellen.

Code zum Ausblenden der Seitenleiste von oben (nur Telefon):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

Sidebar selbst hat die Klasse hidden-xs. Es wird mit dem folgenden js entfernt

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Wenn Sie auf die Schaltfläche klicken, wird die Seitenleiste von oben umgeschaltet. Es ist großartig zu sehen, dass sich die Seitenleiste so verhält wie auf der Website oben. Jede Hilfe wird geschätzt!

99
Chris We

Bootstrap 3

Ja es ist möglich. Dieses "Off-Canvas" -Beispiel soll Ihnen den Einstieg erleichtern.

http://bootply.com/88026

Grundsätzlich müssen Sie das Layout in ein Outer Div einschließen und mithilfe von Medienabfragen das Layout auf kleineren Bildschirmen umschalten.

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

Es gibt auch mehrere mehr Bootstrap Sidebar-Beispiele hier


Bootstrap 4

Erstellen Sie in Bootstrap 4 eine ansprechende Navigationsleisten-Sidebar "Schublade"?

121
Zim

Für alle Interessierten gibt es hier eine weitere hilfreiche Starter-Vorlage.

http://startbootstrap.com/templates/simple-sidebar.html

89
Chris W.

http://getbootstrap.com/examples/offcanvas/

Dies ist das offizielle Beispiel, kann für einige besser sein. Es befindet sich im Abschnitt mit den Beispielen für Experimente. Da es jedoch offiziell ist, sollte es mit der aktuellen Version von bootstrap auf dem neuesten Stand gehalten werden.

Sieht so aus, als hätten sie eine CSS-Datei hinzugefügt, die in ihrem Beispiel verwendet wurde:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

Und etwas JS-Code:

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});
24
Jon

BEARBEITEN: Ich habe eine weitere Option für bootstrap Seitenleisten hinzugefügt.

Tatsächlich gibt es drei Möglichkeiten, wie Sie eine bootstrap 3-Seitenleiste erstellen können. Ich habe versucht, den Code so einfach wie möglich zu halten.

Feste Seitenleiste

Hier sehen Sie eine Demo einer einfachen festen Seitenleiste, die ich mit derselben Höhe wie die Seite entwickelt habe

Seitenleiste in einer Spalte

Ich habe auch eine ziemlich einfache Spaltenseitenleiste entwickelt, die in einer Seite mit zwei oder drei Spalten in einem Container funktioniert. Es nimmt die Länge der längsten Spalte ein. Hier sehen Sie eine Demo

Instrumententafel

Wenn Sie das bootstrap -Dashboard googeln, finden Sie mehrere geeignete Dashboards, z. B. dieses . Die meisten von ihnen erfordern jedoch viel Codierung. Ich habe ein Dashboard entwickelt, das ohne zusätzliches Javascript funktioniert (neben dem bootstrap Javascript). Hier ist eine Demo

Für alle drei Beispiele müssen Sie natürlich die Dateien jquery, bootstrap css, js und theme.css einschließen.

Slidebar

Wenn Sie möchten, dass die Seitenleiste beim Drücken einer Taste ausgeblendet wird, ist dies auch mit ein wenig Javascript möglich. Hier ist ein Demo

8
FabianW

Über Angular: Mit ng-class von Angular können wir die Seitenleiste ein- und ausblenden.

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}
6
Razan Paul

Es wird in der Dokumentation nicht erwähnt, aber die linke Seitenleiste in Bootstrap 3 ist mit der "Collapse" -Methode möglich.

Wie von bootstrap.js erwähnt:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Dies bedeutet, dass durch Hinzufügen der Klasse "width" zum Ziel die Breite anstelle der Höhe erhöht wird:

http://jsfiddle.net/2316sfbz/2/

3
erw13n