Bootstrap

Bootstrap 3 で何が変わるのかをまとめてみた

TABLEofCONTENTS

まとめというよりTODOリストを翻訳しました的な内容ですね。

Twitter Bootstrap 3 の変更点概要

Bootstrap 自体の仕様だけでなく体制なども変更されるようです。

  • モバイルファースト
  • twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog（プライベートレポート）を twbs organization アカウントへ移行
  • サイトの URL を http://getbootstrap.com に変更
  • CSS はレスポンシブ用スタイルも含めて1ファイルにする
  • IE7, Firefox3系 のサポート廃止
  • Glyphicon のフォント版を採用
  • Apache ライセンスから MIT ライセンスへ移行
  • *-wip ブランチの開発スタイルから 3.1.0-modal-revamp のような機能ごとのブランチに変更
  • 過去バージョンのダウンロードにタグを使う

コミュニティのプロジェクトを organization の正式プロジェクトに採用するなどして、コミュニティの強化を図りたいらしいです。また、@mdo と @fat の二人だけでは issue, pull requet の管理がきついらしくオフィシャルの contributor（貢献者）を募りたいようです。

以降で Wiki と Pull Request の内容から変更点の詳細と進捗をまとめます。

ドキュメント

主に organization 周りのページとコードの変更。

全般

  • Scaffolding と Base CSS ページを新規の CSS ページに統合。
  • Mustache テンプレート から i18n タグを除く。{{_i}} {{/i}} は使わない。
  • ギャラリーページを追加。
  • Extend ページを削除。
  • ページタイトル用の変数を追加。

ホームページ

  • Retina 用にスクリーンショットを更新。
  • 新しいサイト用にスクリーンショットを差替。
  • 新しいギャラリーページへリンク。
  • ギャラリーページにネタを追加。
  • Redo の例（？）

CSS ページ

  • アイコンを大きくする。

Example テンプレート

  • マークアップとモバイルファーストの変更を反映。

CSS

IE7, Firefox 3.6 のサポート廃止、CSS ファイルの統合、など。

  • IE7 のサポート廃止。* ハック、*zoom: 1; など IE7 用スタイルをすべて削除。
  • Firefox 3.6 のサポート廃止。-moz-box-shadow やボタンのインナーパディングハックを削除。
  • キャメルケースの変数名をダッシュ連結に変更。例 @bodyBackground を @body-background に変更。
  • モバイルファースト。レスポンシブ関連スタイルもすべて bootstrap.css 1つにまとめる。
  • @blue @orange などのセマンティックでない色変数を廃止し、@state-warning-text のような意味のある変数にする。また @black @white も廃止する。#000 #fff の方が 20% も短く、そもそも変数で変更する値ではないため。
  • .border-radius() .border-*-*-radius mixin の廃止。ベンダープレフィックスが必要 なのは Android 2.1, iOS 3.2 と古いブラウザのみなので削除。各コーナー（左上、右下など）はベンダープレフィックス不要のため mixin を削除。.border-left-radius のような 1辺（2コーナー）の mixin は引き続き使用可能。
  • layout.less の廃止。スタイルが2つしかなく、fluid（リキッド）コンテナは廃止（次セクション 参照）のため不要。.container のスタイルは grid.less へ移動。
  • clearfix mixin の名称変更。mixin は .clear_float()、クラスは .clearfix になる。現在 LESS は mixin と同名のクラスをサポートしていないため “mixins.less にクラスは含めない” 方針によりこのような変更となった。
  • .hide .show に !important を付加。どの要素でもこれらのクラスを機能させるため、より少ないコードで実現できる !important フラグを選択した。
  • reset.less を廃止し、最新の Normalize にアップグレードする。normalize.less を追加することになる。印刷用スタイルやレスポンシブ画像用スタイル（reset されたスタイルを変更するだけのもの）は scaffolding.less に移動。
  • .*-important を廃止して .*-danger に変更。ボタンやラベルなどの赤色のバリエーションのクラス名は .*-danger に統一する。
  • 未練たらしい “TODO” が無いことを確認する。

レイアウトとグリッドシステム

グリッドシステムは1つになり、fluid をあえて指定する必要はなくなる。

  • グリッドシステムのオーバーホール：デフォルトで fliud（リキッドレイアウト）
    • 今までのデフォルトの固定幅グリッドとは別に定義していた fuild グリッドシステム、コンテナ、レイアウトを廃止。
    • .row によるグリッドシステムは、ピクセル指定の幅やマージンの代わりに パーセンテージ指定や box-sizing: border-box を使う。
    • グリッドのネストをサポート。カラムは親要素のサイズに比例する。
    • オフセットもサポート。
  • テーブル用グリッドクラスの廃止
    • グリッド指定する必要はない。
    • .table 要素内の .span* から float 指定を削除。
  • input 用グリッドクラスの廃止
    • input 用のグリッド mixin および span クラスを廃止。
    • 新しいグリッドシステムでは input 要素はデフォルトで width: 100%;。
    • input 要素に直接クラスを指定するより、グリッドカラムに 100% 幅の input 要素を置く方が良い。
  • すべての .container に width の代わりに max-width を指定することで、navbar のようなコンポーネントで起こる問題を防止できる。

文字

  • @altFontFamily 変数の廃止。
  • レスポンシブ時の jumbotron 用 font-size を調整。
  • px の代わりに rem の使用を検討。IE8 用フォールバックで px は必要。

テーブル

  • table.info クラスの廃止。
  • ネスティングのためにより狭いスコープのテーブル用クラスを検討。

画像

  • サムネイルスタイルの整理。
    .thumbnail と同じなので .img-polaroid を廃止。通常のインライン（または inline-block）画像には .img-thumbnail を使う。複数の要素からなるコンポーネントには .thumbnail を使う。

ボタン

不明瞭でセマンティックでないものは廃止。

  • .btn-inverse の廃止。だってこれ マジで 意味わからんし。
  • デフォルトのデザインを改良（外側の box-shadow 廃止）。
  • disable ボタンのホバー時に background-color が変わるのを防止するためスタイルをリファイン。

フォーム

フォーム関連コントロールはデフォルトで 100% 幅。input グループをオーバーホールする。フォームステートをシンプルにする。

  • input 要素のボックスモデルを変更。すべての input 要素をデフォルトで box-sizing: border-box; width: 100%; に変更。これは各自で input 要素のサイズを指定する必要があることを意味する。3.0 以前では input 要素には約220px を指定していた。
  • デフォルトのデザインを改良（外側の box-shadow 廃止）。
  • .input-group 用の input-prepend input-append を廃止。これらのクラスは各要素に指定する。また、ボタンを使うにはマークアップの追加が必要。
    • input やアドオンをラップする親要素に .input-group クラスを指定する。
    • テキストを prepend/append するには、.addon の代わりに　.input-group-addon を使う。
    • ボタンを prepend/append するには、その要素のクラスとして .btn の代わりに　.input-group-btn を使う。
  • .form-search の廃止。
  • fieldset[disabled] をサポート。disabled な fieldset 内のフォームコントロールを適切なスタイルにする。
  • グリッド input の .controls-row を廃止。3.0 では input 要素が width: 100%; であり、別途 input 用グリッドを実装したくないので廃止した。代わりに標準のグリッドシステムで input 要素群を .row でラップし、個別の input を .span* のカラムにすればよい。
  • .input-block-level mixin とクラスを廃止。input 要素が width: 100%; なので冗長になるため。input 要素は display: inline-block なので、block にしたい場合は個別に指定する必要がある。
  • Horizontal フォーム（ラベルと input 要素が横に並ぶフォーム）はモバイルファーストになる。768px 幅未満ではラベルと input 要素が1行ずつスタックし、それ以上の幅ならフロートして横に並ぶ。
  • チェックボックスとラジオボタンは div でラップする。label.checkbox の代わりに　label 内に div.checkbox が必要。これでラベルもクリッカブルになる。
  • インラインのチェックボックスとラジオボタン用クラスの追加。radio.inline の代わりに label に .radio-inline クラスを指定する。インラインのチェックボックスとラジオボタンは div でラップする必要はない。
  • 分割ドロップダウンと通常のドロップダウンのクラス名を分ける。
  • フィールドのステート（disabled）を個々の input 要素に適用する。
  • 新しいインプットグループ内でボタングループが機能するようにする（border-radius で問題あり）。
  • .help-inline .help-block をリファクタリング。
  • フォームコントロールのマージンを改善。現在上書きしまくっているため、フォームコントロールはデフォルトではマージン無しがいいかも。

アイコン

  • フォントアイコン！PNG を廃止して Glyphicon を v1.7 @font-face にする。
  • すべてのアイコンのクラスに プリフックスを追加：.glyphicon-

レスポンシブユーティリティ

  • 新しいモバイルファーストのアプローチに合わせて responsive-utilities.less をリファクタリングする。
  • メディアクエリーの変更をドキュメントに反映する。

ボタングループ

  • ボタングループ内でドロップダウンを使えるようにリファクタリングする。
  • 通常のドロップダウンを分割ドロップダウンのクラスを分ける。

ラベル、バッジ、カウンター

色々検討が必要。

  • .label コンポーネントの角丸を小さくする。
  • .label のサイズを親要素の font-size に合わせて自動で調整する。
  • クソなので .badge を廃止。
  • 色オプション無しの .counter として .badge を再実装する。OS X の Mail.app ぽくできるだけニュートラルにする。

ヒーローユニット（ジャンボトロン）

（訳注：ジャンボトロンは商標です…）。

一般的な変更

  • .hero-unit から .jumbotron へクラスを変更。関連する変数も合わせて変更する。
  • 見出しの font-weight を軽くする。ボールドの代わりにセミボールドを使う。

モバイルファーストスタイルの改善

  • 初期状態では full-width にするか（角丸なし、など）？
  • ブレークポイントごとに文字のスタイルを改善するか？

ナビゲーション

ナビゲーションバー

  • .navbar-search の廃止。フォームレイアウトから .navbar-search を廃止したため。.navbar-form は生かす予定。
  • navbar とサブコンポーネントのデフォルトスタイルをオーバーホール：
    • ドロップダウンメニューのキャレット（インジケーターでなくメニューとして追加されている）を廃止。ドロップダウンメニューは navbar の端に位置する。
    • 縦の分割線は navbar の高さいっぱいには拡張しない。
    • navbar の box-shadow、グラデーションを廃止。
    • 44px だった navbar の高さを モバイルでは 62px へ、デスクトップでは 50px へ変更。
  • .navbar-inner の廃止。インナーの div は不要。
  • 標準・インバース navbar で .btn-navbar が :hover :focus のステートを含むように変更。
  • モバイルでのナビゲーションリンクのアクティブステートを変更。
  • nabvar 内の非ナビゲーションリンクサポートの改善。.navbar-link が必要なのがクソ。
  • nabvar 内でのフォーム・ボタンサポートの改善。スタイル上書きしまくりでクソすぎる。改善しよう。
  • ドロップダウンや他のコンポーネントを扱いやすくするため、collapsed navbar の振る舞いを改善。

Navs

  • BS2のサイドナビゲーションのように .nav-list のオプションをリデザインする。
  • 左・右・下のタブを廃止。左・右のタブは便利だが Bootstrap のコアからは削除する。必要なら JavaScript プラグインや CSS を各自で利用されたし。
  • ページネーションの親 div および中央・右のアライメントオプションを廃止。経緯は #6562 を参照。
  • ナビゲーションオプションを再実装。
    • Tabs
    • Pills
    • Justify バリエーション

モーダル

  • .hide が不要になりました。クラッシュを避けるためにユーティリティクラスで !important を使うようにしたため、モーダルで .hide を指定しなくて済む。現在は modals.less で直接 display: none; を指定している。3 にアップグレードする際は、既存のモーダルから .hide クラスを削除しておくこと。
  • モバイルファーストのためにモーダルをリビルドする
    • fixed の代わりに相対位置を使う。
    • 内容に合わせて高さが可変となるので overflow-y: scroll; は不要。
  • .modal-small .modal-large のサイズオプションを加えるか検討中。
  • 縦横位置の改善。

ドロップダウン

  • サブメニュー廃止。これが使われているのを見たことがないし、JavaScript でインタラクションやキーボードナビゲーションのコードを書くのはマジクソ。なので廃止。
2013.2.18 追記とりあえず CSS だけ復活させたようです。バージョン3 リリース時まで生き残るかはまだ決めてないとのこと。

サムネイル

  • .thumbnails メタコンポーネントの廃止。代わりにグリッドシステムを使うこと。.thumbnail のスタイルは利用可能だが、グリッドカラムのような width を指定した親要素が必要。

カルーセル

  • リデザイン！キャプション同様に前後ナビゲーションのスタイルを軽くする。
  • カルーセルコントロールのマークアップを変更。 .carousel-control 内に <span class="control"> が必要です。

まとめ

クソクソ書いてますがこれは @mdo がそう書いてるためいたしかたなくです。ご了承ください。

モバイルファーストということで fluid（リキッド）レイアウトが標準というかこれのみになったことが一番大きい変更でしょうか。変数名のキャメルケースや .navbar-inner の廃止が個人的にはあいたたたですが、よりシンプルに改善されるのは良いことですね。リリースされるのを wktk しつつ、色々準備しておかなければと思いました。本家の情報が更新されたら、このページにも随時反映する予定です。

間違いや抜けなどありましたらお知らせください。ではまた。

参考