Я только что посетил эту страницу http://www.elmastudio.de/ и задался вопросом, можно ли с помощью Bootstrap 3 создать коллапс левой боковой панели.

Код для свертывания боковой панели сверху (только на телефоне):

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

Сама боковая панель имеет класс hidden-xs. Удаляется с помощью следующих js

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Если вы нажмете кнопку, боковая панель будет переключена сверху. Приятно видеть, как боковая панель ведет себя так, как показано на веб-сайте выше. Любая помощь приветствуется!

Бутстрап 3

Да, это возможно. Этот пример «вне холста» должен помочь вам начать работу.

https://codeply.com/p/esYgHWB2zJ

В основном вам нужно обернуть макет во внешний div и использовать медиа-запросы для переключения макета на меньших экранах.

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

Кроме того, здесь есть еще несколько примеров боковой панели Bootstrap

Бутстрап 4

Создать адаптивный «ящик» боковой панели навигации в Bootstrap 4?

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

Это официальный пример, для кого-то может быть лучше. Он находится в разделе примеров экспериментов, но, поскольку он является официальным, его следует обновлять до текущей версии начальной загрузки.

Похоже, они добавили файл css вне холста, используемый в их примере:

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

И немного кода JS:

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

РЕДАКТИРОВАТЬ: я добавил еще один вариант для боковых панелей начальной загрузки.

На самом деле существует три способа сделать боковую панель bootstrap 3. Я старался сделать код максимально простым.

Фиксированная боковая панель

Здесь вы можете увидеть демонстрацию простой фиксированной боковой панели, которую я разработал, такой же высоты, как и страница.

Боковая панель в столбце

Я также разработал довольно простую боковую панель столбцов, которая работает на странице из двух или трех столбцов внутри контейнера. Требуется длина самого длинного столбца. Здесь вы можете увидеть демо

Панель приборов

Если вы используете панель управления загрузкой Google, вы можете найти несколько подходящих панелей, таких как эта . Однако для большинства из них требуется много кода. Я разработал приборную панель, которая работает без дополнительного javascript (рядом с javascript начальной загрузки). Вот демо

Для всех трех примеров вы, конечно, должны включить файлы jquery, bootstrap css, js и theme.css.

Ползунок

Если вы хотите, чтобы боковая панель скрывалась при нажатии кнопки, это также возможно с помощью небольшого JavaScript. Вот демонстрация

Через Angular: используя ng-classAngular, мы можем скрыть и показать боковую панель.

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

Это не упоминается в документе, но левая боковая панель в Bootstrap 3 возможна с использованием метода "Collapse".

Как упоминалось в bootstrap.js:

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

Это означает, что добавление класса "width" в цель будет расширяться по ширине, а не по высоте:

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