Сворачивание боковой панели с помощью 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');            
});

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

96
collapse sidebar twitter-bootstrap-3

6 ответов

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

http://bootply.com/88026

в основном вам нужно обернуть макет во внешний 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 здесь

120

есть еще один полезный шаблон стартера здесь, для тех, кто заинтересован.

http://startbootstrap.com/templates/simple-sidebar.html

87

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

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

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

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

и некоторые JS код:

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

EDIT: я добавил еще один вариант для боковых панелей bootstrap.

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

исправлена боковой панели

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

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

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

Панель управления

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

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

ползунковый регулятор

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

8

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

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 возможна с помощью метода "свернуть".

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

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

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

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

3