Właśnie odwiedziłem tę stronę http://www.elmastudio.de/ i zastanawiałem się, czy możliwe jest zbudowanie zwinięcia lewego paska bocznego za pomocą Bootstrap 3.
Kod zwijania paska bocznego od góry (tylko 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>
Sam pasek boczny ma klasę hidden-xs. Jest usuwany za pomocą następujących plików js
$('.sidebar-toggle').click(function(){
$('#sidebar').removeClass('hidden-xs');
});
Kliknięcie przycisku powoduje przełączenie paska bocznego od góry. Wspaniale jest zobaczyć, jak pasek boczny zachowuje się tak, jak pokazuje powyższa witryna. Każda pomoc jest mile widziana!
twitter-bootstrap-3
bootstrap-4
sidebar
collapse
Chris We
źródło
źródło
Odpowiedzi:
Bootstrap 3
Tak, to możliwe. Ten przykład „poza płótnem” powinien pomóc Ci zacząć.
https://codeply.com/p/esYgHWB2zJ
Zasadniczo musisz owinąć układ w zewnętrzny element DIV i użyć zapytań o media do przełączania układu na mniejszych ekranach.
Istnieje również kilka innych przykładów paska bocznego Bootstrap
Bootstrap 4
Utworzyć responsywną „szufladę” paska bocznego paska nawigacyjnego w Bootstrap 4?
źródło
http://getbootstrap.com/examples/offcanvas/
To jest oficjalny przykład, dla niektórych może być lepszy. Znajduje się w sekcji przykładów eksperymentów, ale ponieważ jest oficjalna, powinna być aktualizowana z aktualną wersją bootstrap.
Wygląda na to, że dodali plik css poza kanwą użyty w ich przykładzie:
http://getbootstrap.com/examples/offcanvas/offcanvas.css
I trochę kodu JS:
źródło
EDYCJA: Dodałem jeszcze jedną opcję dla pasków bocznych bootstrap.
W rzeczywistości istnieją trzy sposoby na utworzenie paska bocznego bootstrap 3. Starałem się, aby kod był jak najprostszy.
Naprawiono pasek boczny
Tutaj możesz zobaczyć demo prostego, stałego paska bocznego, który opracowałem, o tej samej wysokości co strona
Pasek boczny w kolumnie
Opracowałem również dość prosty pasek boczny z kolumnami, który działa na dwu- lub trzykolumnowej stronie wewnątrz kontenera. Zajmuje długość najdłuższej kolumny. Tutaj możesz zobaczyć demo
Deska rozdzielcza
Jeśli korzystasz z pulpitu nawigacyjnego Google Bootstrap, możesz znaleźć wiele odpowiednich pulpitów nawigacyjnych, takich jak ten . Jednak większość z nich wymaga dużo kodowania. Opracowałem dashboard, który działa bez dodatkowego javascript (obok javascript bootstrap). Oto demo
We wszystkich trzech przykładach trzeba oczywiście dołączyć pliki jquery, bootstrap css, js i theme.css.
Slidebar
Jeśli chcesz, aby pasek boczny ukrywał się po naciśnięciu przycisku, jest to również możliwe za pomocą niewielkiego javascript.Oto demo
źródło
Przez Angular: używając
ng-class
Angulara możemy ukryć i pokazać boczny pasek.http://jsfiddle.net/DVE4f/359/
.
źródło
Nie wspomniano o tym w dokumencie, ale lewy pasek boczny w Bootstrap 3 jest możliwy przy użyciu metody „Zwiń”.
Jak wspomniano w bootstrap.js:
Oznacza to, że dodanie klasy „szerokość” do celu spowoduje rozszerzenie o szerokość zamiast wysokości:
http://jsfiddle.net/2316sfbz/2/
źródło