Bootstrap Navbar コンポーネントのレスポンシブ化

Bootstrap の Navbar コンポーネントを自前のスタイルやスクリプトを組まずにレスポンシブ対応できるか試そうとして調べていたところ、現行バージョン ( v3.1.1 ) の サンプルコードは、レスポンシブ対応されていることが分り調べ損に終わりました。ですが、調べている最中に分かったことがいくつかある ( 自分が知らないことが多すぎた ) ので、まとめてみました。

使用ライブラリ

• Bootstrap v3.1.1
• jQuery 1.10.0

Navbar サンプル

Navbar のサンプルコードを移植してみました。ブラウザの表示倍率を変えるか、ウィンドウのサイズを変えることによって表示内容が変わることが確認できます。

Collapse による折り畳み

ブラウザのサイズによって表示を切り替える機能は bootstrap.css がお世話してくれます。下記コード周辺が該当箇所です。

bootstrap.css (L:3642)

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
}
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}
.navbar-collapse {
  max-height: 340px;
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
  overflow-y: auto;
}
@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }
  …

ボタンで Collapse の切り替え作業を実施する場合、bootstrap.js の collapse プラグインが自動的にハンドリングしてくれます。

collapse.js (L:161)

$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
  var $this   = $(this), href
  var target  = $this.attr('data-target')
      || e.preventDefault()
      || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
  var $target = $(target)
  var data    = $target.data('bs.collapse')
  var option  = data ? 'toggle' : $this.data()
  var parent  = $this.attr('data-parent')
  var $parent = parent && $(parent)

  if (!data || !data.transitioning) {
    if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed')
    $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
  }

  $target.collapse(option)
})

また、Collapse の切り替え時にアニメーションを持たせたい場合は transitions プラグインを使用します。( デフォルトで有効になっています )

Bootstrap 2.x 系から 3.x 系の移植作業

調べているときに Stack Overflow などに掲載されているサンプルをいくつか拝借してみましたが、バージョンを意識せずに遊んでいると動かないことが何度かありました。意外と変更点があるので注意が必要です。

移植時はもちろん、有志のサンプルを弄る場合には下記ガイドを参考にすると良いでしょう。

Bootstrap3 移行ガイド
http://bootstrap.s1.adexd.net/

AngularJS ui.bootstrap との合わせ技

AngularJS の UI Bootstrap にも Collapse が用意されているので、サンプルを若干修正してみました。ほんのわずかですが、見通しが良くなったような気がします。

まとめ

Bootstrap を使用すれば、簡単にレスポンシブな画面が作れることが分りました…が、用意されているコンポーネントやプラグインの種類を把握したり、修正や拡張する場合のお作法などを熟知したりしておかないと、大変なことになりそうな気がしました。