私はこのページ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');            
});

ボタンをクリックすると、サイドバーが上から切り替わります。サイドバーが上記のWebサイトのように動作するのを見るのは素晴らしいことです。どんな助けでもありがたいです！

ブートストラップ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;
  }
}

また、Bootstrapサイドバーの例がいくつかあります

ブートストラップ4

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

編集：ブートストラップサイドバーのオプションをもう1つ追加しました。

ブートストラップ3サイドバーを作成するには、実際には3つの方法があります。私はコードをできるだけ単純にするように努めました。

固定サイドバー

ここでは、ページと同じ高さで開発したシンプルな固定サイドバーのデモを見ることができます

列のサイドバー

また、コンテナー内の2列または3列のページで機能するかなりシンプルな列サイドバーも開発しました。最長の列の長さになります。ここでデモを見ることができます

ダッシュボード

グーグルブートストラップダッシュボードを使用すると、このような複数の適切なダッシュボードを見つけることができます。ただし、それらのほとんどは多くのコーディングを必要とします。追加のJavaScriptなしで動作するダッシュボードを開発しました（ブートストラップJavaScriptの横にあります）。ここにデモがあります

もちろん、3つの例すべてについて、jquery、bootstrap css、js、theme.cssファイルを含める必要があります。

スライドバー

ボタンを押したときにサイドバーを非表示にしたい場合は、少しのjavascriptでも可能です。デモはこちらです

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

ドキュメントには記載されていませんが、Bootstrap 3の左側のサイドバーは「折りたたみ」メソッドを使用して可能です。

bootstrap.jsで述べたように：

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

これは、クラスに「幅」を追加すると、高さではなく幅で拡張されることを意味します。

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