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!

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.

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

Istnieje również kilka innych przykładów paska bocznego Bootstrap

Bootstrap 4

Utworzyć responsywną „szufladę” paska bocznego paska nawigacyjnego w Bootstrap 4?

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:

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

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

Przez Angular: używając ng-classAngulara możemy ukryć i pokazać boczny pasek.

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

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:

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

Oznacza to, że dodanie klasy „szerokość” do celu spowoduje rozszerzenie o szerokość zamiast wysokości:

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