Сворачивание боковой панели с Bootstrap 3

Question

Сворачивание боковой панели с 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>

боковая панель сама имеет скрытый-xs класс. Он удаляется со следующим js

$('.sidebar-toggle').click(function(){

     $('#sidebar').removeClass('hidden-xs');            

});

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

716 6

twitter-bootstrap-3 collapse sidebar

6 ответов:

Comments

Ничего не найдено.

Zim · Accepted Answer · 2017-03-15 16:39:37

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

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 боковой панели здесь

Chris W. · Accepted Answer · 2014-02-01 13:21:03

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

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

Jon · Accepted Answer · 2015-01-14 17:02:59

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

FabianW · Accepted Answer · 2015-12-29 00:38:16

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

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

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

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

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

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

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

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

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

Slidebar

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

Razan Paul · Accepted Answer · 2015-03-26 03:26:56

через угловой: с помощью 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;
    }
}

erw13n · Accepted Answer · 2015-10-26 00:49:36

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

Как упоминалось bootstrap.js:
Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }
это означает, что добавление класса "ширина" в цель будет расширяться по ширине вместо высоты:

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