Я щойно відвідав цю сторінку 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>

Сама бічна панель має клас прихованих xs. Він видаляється за допомогою наступних js

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

Якщо натиснути кнопку, вона перемикає бічну панель зверху. Буде чудово бачити, як бічна панель веде себе так, як показує веб-сайт. Будь-яка допомога вдячна!

Завантаження 3

Так, це можливо. Цей приклад "без полотна" повинен допомогти розпочати роботу.

https://codeply.com/p/esYgHWB2zJ

В основному вам потрібно обернути макет у зовнішній розділ і використовувати медіа-запити для перемикання макета на менших екранах.

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

EDIT: Я додав ще один варіант для бічних панелей завантаження.

Насправді є три манери, за допомогою яких можна зробити завантажувальну панель 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;
    }
}

Його не згадується в doc, але ліва бічна панель на Bootstrap 3 можлива за допомогою методу "Згорнути".

Як згадує bootstrap.js:

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

Це означає, що додавання класу "width" у ціль, буде розширюватися на ширину замість висоти:

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