방금이 페이지를 방문했습니다. 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;
  }
}

또한 여기에 몇 가지 부트 스트랩 사이드 바 예제가 더 있습니다.

부트 스트랩 4

부트 스트랩 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')
  });
});

편집 : 부트 스트랩 사이드 바에 대한 옵션을 하나 더 추가했습니다.

실제로 부트 스트랩 3 사이드 바를 만들 수있는 세 가지 방식이 있습니다. 코드를 가능한 한 간단하게 유지하려고 노력했습니다.

고정 사이드 바

여기 에서 페이지와 같은 높이로 개발 한 간단한 고정 사이드 바 의 데모 를 볼 수 있습니다 .

열의 사이드 바

또한 컨테이너 내부의 2 개 또는 3 개 열 페이지에서 작동하는 다소 간단한 열 사이드 바를 개발했습니다. 가장 긴 열의 길이를 사용합니다. 여기에서 데모를 볼 수 있습니다.

계기반

Google 부트 스트랩 대시 보드를 사용하는 경우이 대시 보드와 같은 적합한 대시 보드를 여러 개 찾을 수 있습니다 . 그러나 대부분은 많은 코딩이 필요합니다. 추가 자바 스크립트 (부트 스트랩 자바 스크립트 옆)없이 작동하는 대시 보드를 개발했습니다. 다음은 데모입니다.

세 가지 예제 모두에 대해 jquery, bootstrap css, js 및 theme.css 파일을 포함해야합니다.

슬라이드 바

이 또한 조금 밖에 javascript.Here 가능합니다 버튼을 누르면 숨기기에 기사를하려는 경우입니다 데모

Angular를 통해 : 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;
    }
}

문서에는 언급되어 있지 않지만 부트 스트랩 3의 왼쪽 사이드 바는 "접기"방법을 사용하여 가능합니다.

bootstrap.js에서 언급했듯이 :

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

즉, 클래스 "width"를 target에 추가하면 height 대신 너비로 확장됩니다.

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