私は最近 Twitter のブートストラップについて知り、最新バージョンの Bootstrap 3 について深く掘り下げてきました。Web サイトには、「オフ キャンバス」テンプレートの例があります (ここ: http://getbootstrap.com/examples/ offcanvas/ ) を変更しています。しかし、この例には、私には意味をなさないことがいくつかあります。
「Off Canvas」テンプレートの例では、「row-offcanvas」、「row-offcanvas-right」、「sidebar-offcanvas」などのクラスを参照する div 要素があります。これらは bootstrap.css で見つけることができず、Chrome DevTools でこれらを見つけることもできません。これらのクラスを削除しても効果はありません。これらのクラスには何か目的がありますか? それとも、存在しないように見えるクラスを例に含めたのは間違いでしたか?
@mgttlinger が述べたように、css はhttp://getbootstrap.com/examples/offcanvas/offcanvas.cssoffcanvas.cssを参照してください。
それがどのように機能するかをウォークスルーしたい場合は、 http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3 を参照してください.aspx . http://getbootstrap.com/examples/offcanvas/を出発点として使用し、オフキャンバスの作成に使用される CSS について説明します。
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvasは、キャンバス外の背景やその他のほとんどのレスポンシブ デザイン パターンに関する優れたリソースです。
ページのソースをよく見ると、ヘッダーに
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
これらのクラスはそこで定義されています。そして、少なくとも私にとっては、これを削除すると、明らかに目に見える違いが生じます.
私は間違ったことをしたのと同じことを経験しましたが、jsは機能していないようです。すべてのコードを削除し、すべてのjsとcssが機能していないことをリンクしてください。だから私はそれが動作する他のフォルダで他のjsを試し、動作する空のoffcanvasページにそれらをコピーします。次に、すべてのテンプレートコードを元に戻すと、正常に動作するようになりました。マシンの一部のコンポーネントが応答しなくなったのではないかと思います。再起動してみてください。