105

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

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

4

5 に答える 5

127

ブートストラップ 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でレスポンシブなナビゲーションバーサイドバー「引き出し」を作成しますか?

于 2013-10-16T09:41:05.903 に答える
25

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')
  });
});
于 2015-01-14T14:53:15.493 に答える
9

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

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

固定サイドバー

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

列のサイドバー

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

ダッシュボード

ブートストラップ ダッシュボードを Google で検索すると、このような適切なダッシュボードが複数見つかります。ただし、それらのほとんどは多くのコーディングを必要とします。追加の JavaScript なしで機能するダッシュボードを開発しました (ブートストラップ JavaScript の隣)。ここにデモがあります

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

スライドバー

ボタンを押したときにサイドバーを非表示にしたい場合は、これもほんの少しの JavaScript で可能です。

于 2015-06-26T18:51:47.180 に答える