web-dev-qa-db-ja.com

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

ボタンをクリックするとサイドバーが上から切り替わります。サイドバーが上記のWebサイトのように動作するのを見るのは素晴らしいことです。任意の助けは大歓迎です！

twitter-bootstrap-3sidebarcollapse
98
Chris We

ブートストラップ3

はい、可能です。この「キャンバスから外れた」例はあなたが始めるのを助けるべきです。

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サイドバーの例があります

ブートストラップ4

Bootstrap 4でレスポンシブナビゲーションバーのサイドバー「引き出し」を作成しますか。

120
Zim

興味のある人のための、もう1つの役に立つスターターテンプレートがあります。

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

88
Chris W.

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

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

あなたがブートストラップ3サイドバーを作ることができる実際には3つの方法があります。私はコードをできるだけ単純にしてみました。

固定サイドバー

ここでは、私が開発した単純な固定サイドバーの demo をページと同じ高さで見ることができます。

縦棒のサイドバー

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

ダッシュボード

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

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

スライドバー

サイドバーにボタンを押して非表示にしたい場合は、これは小さなjavascriptだけでも可能です。こちらは デモ です。

8
FabianW

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;
    }
}
6
Razan Paul

Docでは言及されていませんが、Bootstrap 3の左側のサイドバーは "Collapse"メソッドを使って可能です。

Bootstrap.jsで述べたように、

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

つまり、ターゲットにクラス "width"を追加すると、高さではなく幅で拡張されます。

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

3
erw13n