Tôi vừa truy cập trang này http://www.elmastudio.de/ và tự hỏi liệu có thể xây dựng thu gọn thanh bên trái với Bootstrap 3 hay không.

Mã để thu gọn thanh bên từ trên cùng (chỉ dành cho điện thoại):

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

Bản thân thanh bên có lớp xs ẩn. Nó được gỡ bỏ với js sau

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

Nếu bạn nhấp vào nút, nó sẽ chuyển thanh bên từ trên xuống. Thật tuyệt khi thấy thanh bên hoạt động giống như trang web ở trên hiển thị. Bất kỳ trợ giúp được đánh giá cao!

Bootstrap 3

Vâng nó có thể. Ví dụ "off-canvas" này sẽ giúp bạn bắt đầu.

https://codeply.com/p/esYgHWB2zJ

Về cơ bản, bạn cần bao bọc bố cục trong một div bên ngoài và sử dụng các truy vấn phương tiện để chuyển đổi bố cục trên màn hình nhỏ hơn.

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

Ngoài ra, có một số ví dụ về thanh bên Bootstrap khác ở đây

Bootstrap 4

Tạo một "ngăn kéo" thanh điều hướng đáp ứng trong Bootstrap 4?

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

Đây là ví dụ chính thức, có thể tốt hơn cho một số người. Nó nằm trong phần ví dụ Thử nghiệm của họ, nhưng vì nó là chính thức, nó phải được cập nhật với bản phát hành bootstrap hiện tại.

Có vẻ như họ đã thêm một tệp css off canvas được sử dụng trong ví dụ của họ:

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

Và một số mã JS:

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

CHỈNH SỬA: Tôi đã thêm một tùy chọn nữa cho thanh bên bootstrap.

Thực tế có ba cách cư xử mà bạn có thể tạo một thanh bên bootstrap 3. Tôi đã cố gắng giữ cho mã càng đơn giản càng tốt.

Thanh bên cố định

Tại đây, bạn có thể xem bản demo của một thanh bên cố định đơn giản mà tôi đã phát triển với cùng chiều cao với trang

Thanh bên trong một cột

Tôi cũng đã phát triển một thanh bên cột khá đơn giản hoạt động trong một trang hai hoặc ba cột bên trong một vùng chứa. Nó có chiều dài của cột dài nhất. Tại đây bạn có thể xem bản demo

bảng điều khiển

Nếu bạn google bảng điều khiển bootstrap, bạn có thể tìm thấy nhiều bảng điều khiển phù hợp, chẳng hạn như bảng điều khiển này . Tuy nhiên, hầu hết chúng yêu cầu rất nhiều mã hóa. Tôi đã phát triển một bảng điều khiển hoạt động mà không cần thêm javascript (bên cạnh javascript bootstrap). Đây là một bản demo

Đối với cả ba ví dụ, tất nhiên bạn phải bao gồm các tệp jquery, bootstrap css, js và theme.css.

Thanh trượt

Nếu bạn muốn thanh bên ẩn khi nhấn một nút, điều này cũng có thể thực hiện được chỉ với một chút javascript. Đây là bản demo

Qua Angular: sử dụng ng-classAngular, chúng ta có thể ẩn và hiện thanh bên.

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

Nó không được đề cập trên doc, nhưng thanh bên Trái trên Bootstrap 3 có thể sử dụng phương pháp "Thu gọn".

Như đã đề cập bởi bootstrap.js:

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

Điều này có nghĩa là, thêm "chiều rộng" của lớp vào mục tiêu, sẽ mở rộng theo chiều rộng thay vì chiều cao:

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