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

Code zum Reduzieren 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>

Die Seitenleiste selbst hat die Klasse hidden-xs. Es wird mit den 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, wie sich die Seitenleiste wie auf der obigen Website verhält. Jede Hilfe wird geschätzt!

Bootstrap 3

Ja es ist möglich. Dieses Beispiel "außerhalb der Leinwand" soll Ihnen den Einstieg erleichtern.

https://codeply.com/p/esYgHWB2zJ

Grundsätzlich müssen Sie das Layout in ein äußeres Div einschließen und Medienabfragen verwenden, um das Layout auf kleineren Bildschirmen umzuschalten.

/* 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;
  }
}

Außerdem gibt es hier einige weitere Beispiele für die Bootstrap-Seitenleiste

Bootstrap 4

Erstellen Sie eine reaktionsfähige Navigationsleiste "Schublade" in Bootstrap 4?

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

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

Sieht so aus, als hätten sie eine in ihrem Beispiel verwendete Off-Canvas-CSS-Datei hinzugefügt:

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

Und etwas JS-Code:

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

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

Es gibt tatsächlich drei Arten, wie Sie eine Bootstrap 3-Seitenleiste erstellen können. Ich habe versucht, den Code so einfach wie möglich zu halten.

Seitenleiste korrigiert

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

Seitenleiste in einer Spalte

Ich habe auch eine ziemlich einfache Seitenleiste für Spalten entwickelt, die auf einer Seite mit zwei oder drei Spalten in einem Container funktioniert. Es dauert die Länge der längsten Spalte. Hier sehen Sie eine Demo

Instrumententafel

Wenn Sie das Google Bootstrap-Dashboard verwenden, 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.

Schieberegler

Wenn Sie möchten, dass sich die Seitenleiste beim Drücken einer Taste versteckt, ist dies auch mit nur wenig Javascript möglich. Hier ist eine Demo

Via Angular: Mit ng-classAngular 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;
    }
}

Es wird im Dokument 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'
  }

Wenn Sie dem Ziel die Klasse "width" hinzufügen, wird dies um die Breite anstatt um die Höhe erweitert:

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