0

Bootstrap 3 でオフ キャンバス ナビゲーション (右からスライド イン) を作成する方法を見つけようとしていますが、ビューポートが 992 ピクセル未満の場合にのみ表示するトグルと、ビューポートが 992 ピクセルより大きい場合に表示する通常のブートストラップ ナビゲーション992ピクセル。

jasny-bootstrap は良いスタートですが、ビューポートが 992px より大きい場合に通常の Bootstrap ナビゲーションを表示する方法がわかりません。また、ライブラリ全体を含めることなく、最小限の JS を使用したいと考えています。

ブートストラップ オフ キャンバス ページからこのフィドルを作成しましたが、まだ理解できません。http://www.jsfiddle.net/UWP5V

次のコードを使用して実現されます

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

2 に答える 2

2

ナビゲーション バーの表示/非表示は、@media クエリを使用して CSS で完全に行われます。navbar が折りたたまれるサイズは、 less variable として定義されます@grid-float-breakpoint-max。

これを変更するには、Bootstrap カスタマイザーに移動し、値を入力して、@grid-float-breakpoint-maxカスタマイズされた Bootstrap をダウンロードします。

Jasny Bootstrap offcanvas は、変更された設定で簡単に動作するはずです。

于 2014-05-31T09:33:50.727 に答える
0

そのhttp://getbootstrap.com/css/#responsive-utilitiesには BS レスポンシブ ユーティリティを使用し ます。

変更されたサンプルを確認する

http://jsfiddle.net/freedawirl/wL4d7m3w


利用可能なクラス ビューポートブレークポイント間でコンテンツを切り替えるために、利用可能なクラスを 1 つまたは組み合わせて使用​​します。

Extra small devices = Phones (<768px) use .visible-xs or .hidden-xs
Small devices = Tablets (≥768px) use .visible-sm or .hidden-sm  
Medium devices = Desktops (≥992px) use .visible-md or .hidden-md    
Large devices = Desktops (≥1200px) use .visible-lg or .hidden-lg

必要に応じて以下を調整します

<!-- Desktop Nav -->
<div class="navbar navbar-fixed-top navbar-inverse  visible-sm" role="navigation">

<!-- Mobile Nav -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas visible-xs" id="sidebar"  role="navigation">

 <!-- So that list shows up with nav call -->
 <div class="list-group visible-xs">
于 2014-10-29T22:30:59.490 に答える