Reduzieren der Seitenleiste mit Bootstrap

102

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!

Chris We
quelle
7
Sind wir uns alle einig, dass elmastudio.de diesen Seitenleisten-Zusammenbruch nicht mehr hat?
Peter V. Mørch
Schauen Sie sich

Antworten:

124

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?

Zim
quelle
@ Delucia: Es funktioniert auf Chrome unter Android. Bootply selbst funktioniert nicht richtig, aber klicken Sie auf den Link "Zum Rendern wechseln".
Dan Dascalescu
2
Hier ist die offizielle Bootstrap- Dashboard-Vorlage mit Seitenleiste
Shaijut
1
@stom: Es versteckt sich auf den Mobil- und Tablet-Versionen, was das Problem ist.
Fuddin
25

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')
  });
});
Jon
quelle
9

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

FabianW
quelle
6

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;
    }
}
Razan Paul
quelle
3

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/

erw13n
quelle
Wie würden Sie es tun, um das linke Menü nur zu 80% auszublenden und eine kleine Schaltfläche anzuzeigen, um das Menü erneut zu erweitern?
Pathros