Twitter bootstrap3で変わるところを先取り

Twitter bootstrapがそろそろ version3になります。
version2とどのように違うのかをちょっとだけ予習しておきます。


対応ブラウザ


IE8以上、モダンブラウザ、モバイルブラウザは対応する模様。
ただし、ntn-childがtableで使われていたりするので、IE8はまぁ見れるよ。程度とするのが無難。


Unofficially, Bootstrap should look and behave well enough in Chromium for Linux and Internet Explorer 7, though they are not officially supported.

グリッドシステム


  • Bootstrap3はデフォルトでレスポンシブ
  • 12カラム構成の変更はなし(ただし、指定するクラスは変更された
  • -sm,-lgプレフィックスが追加された

Bootstrap2では、bootstrap-responsive.min.css等を読み込むことで、レスポンシブデザインにすることができました。Bootstrap3では、標準でレスポンシブデザインとなります。


Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

気になるグリッドシステムをもう少し


row-fluidから rowへ


Bootstrap2では、"row-fluid"というクラスを追加して、レスポンシブデザインとなるようにしていましたが、
Bootstrap3では "row"で動作します。


spanXからcol-Xへ


表示画面の幅を12分割するという構成は変わっていません。
しかし、ブロック要素の幅の指定が、span6のような形式からcol-6へ変更されました。


Bootstrap2で span6を指定し、responsive.cssを読み込んでいた場合、
以下のような動作となりました。


デバイスの幅が768pxより小さい場合は、
bootstrap-responsive.min.css のメディアクエリにより
幅が100%へ変換

デバイスの幅が1200pxより大きい場合は、全体のほぼ半分の幅になるように調整

Bootstrap3からは "col-6"の指定をした場合、
どのデバイスで閲覧しても50%の幅になるようになっています。


sm, lgプレフィックス


  • 768px未満は col-x
  • 768px以上993px未満は col-sm-x
  • 993px以上は col-lg-x

Bootstrap3からは、デバイスの幅ごとに、ブロック要素の表示幅を変更することができます。
それには、sm, lgの各プレフィックスを付与する必要があります。


これにより、以下の様な対応ができるようになります。


<div class="row">
<div class="col-sm-4 col-lg-2">サイドバー</div>
<div class="col-sm-8 col-lg-10">メイン</div>
</div>

これは、デスクトップ等の大きい画面の際は、サイドバーは全体の1/6の大きさ、タブレット型のデバイスの場合は全体の1/3の大きさにするという指定ができるようになりました。


カラムの表示順制御(.col-lg-push-*, .col-lg-pull-*)


Boostrap2で組む上での問題点として、以下のような問題が発生することがありました。


  • 左側にメニューを配置
  • 右側をメイン領域

この構成にした場合、モバイルデバイスで閲覧した場合、左側のメニューが最初に表示されることになります。(通常であれば折りたたみますが)


Bootstrap3ではこの表示順を制御することができます。
以下のようにすると、右側と書いてあるdivが右側に表示され、左側と書いてあるdivが左側に表示されるようになります。
SEOでページ中での出現位置をなるべく上にしたいという考えがある方は使うといいかもしれません。
また、モバイルでは当然右側が上に表示されるようになります。


<div class="row">
<div class="col-lg-9 col-lg-push-3">右側</div>
<div class="col-lg-3 col-lg-pull-9">左側</div>
</div>

visible-*, hidden-*の変更


  • .visible-phone は .visible-sm
  • .visible-tablet は .visible-md
  • .visible-desktop は .visible-lg
  • .hidden-phone は .hidden-sm
  • .hidden-tablet は .hidden-md
  • .hidden-desktop は .hidden-lg

使用している場合は、phone部分を sm, tablet部分をmd, desktop部分を lgに置き換えるだけ


フォームの変更点


TODO


  • control-group から form-group
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。