Свертывание боковой панели с помощью Bootstrap 3

Я только что посетил эту страницу 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');            
});

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

ОТВЕТЫ

Ответ 1

Бутстрап 3

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

http://bootply.com/88026

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

/* 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?

Ответ 3

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

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

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

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

И некоторый код JS:

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

Ответ 4

ОБНОВЛЕНИЕ: я добавил еще одну опцию для боковых панелей начальной загрузки.

Есть три способа, которыми вы можете создать боковую панель начальной загрузки 3. Я старался сделать код максимально простым.

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

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

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

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

Панель

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

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

SlideBar

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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