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!
twitter-bootstrap-3
bootstrap-4
sidebar
collapse
Chris We
quelle
quelle
Antworten:
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.
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?
quelle
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:
quelle
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
quelle
Via Angular: Mit
ng-class
Angular können wir die Seitenleiste ein- und ausblenden.http://jsfiddle.net/DVE4f/359/
.
quelle
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:
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/
quelle