1. まとめトップ

Bootstrap2.3.2から3.xへの変更まとめ

Bootstrapが3.0が正式に公開されました。今までの2.3.2から3.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでclass名の変更箇所など掲載中。あと使えそうなツールなども紹介しています。

更新日: 2015年02月11日

cccabinetさん

  • このまとめをはてなブックマークに追加
8 お気に入り 23307 view
お気に入り追加

Bootstrapはそもそも米Twitter社内のプロジェクトとしてスタートし、2011年にリリースされて以来、同社から提供されていましたが、プロジェクトのメイン開発者は2012年9月末にTwitterを退社し、Twitterから分離独立したオープンソースプロジェクトになりました。
そのため名称が「Twitter Bootstrap」から「Bootstrap」に変更され、サイトもBootstrap3からはhttp://twitter.github.com/bootstrap/からhttp://getbootstrap.comに移転しました。

Bootstrap3の解説

Bootstrap2.xとの変更箇所

変更箇所(ここではクラスの変更のみ表示)
●グリッドシステム(Grid system)
 グリッドの設定
  可変レイアウト:.row-fluid⇒.row、.container-fluid⇒.containerにそれぞれ統合されたが、.container-fluidは3.1.0で復活
 カラムの指定:.span*⇒.col-*(初期RC1)⇒.col-xx-*(RC1の途中~)
 オフセット(空白)カラムの指定:.offset*⇒.col-offset-*(初期RC1)⇒.col-xx-offset-*(RC1の途中~)
 カラムの表示順変更(新設)

●文字の体裁(Typography)
 文字の一部の色
  .muted⇒.text-muted
  .text-primaryが追加
  .text-error⇒.text-danger
 マークなしリスト:.unstyled⇒.list-unstyled
 インライン(横並び)リスト:.inline⇒.list-inline

●テーブル(Tables)
 行/セルの背景色:行だけでなくセルにも指定可能に
  .activeが追加
  .infoは廃止
  .error⇒.danger
 レスポンシブテーブル(新設)

●フォーム(Forms)
 フォームの設定
 横並びフォームの設定
 水平フォームの設定
 静的テキスト(新設)
 インラインチェックボックスの設定:.checkbox.inline⇒.checkbox-inline
 インラインラジオボタンの設定:.radio.inline⇒.radio-inline
 フォーム全体の無効化(新設)
 コントロールのサイズ
  小さめ:.input-small⇒.input-sm (RC1の途中~)
  大きめ:.input-large⇒.input-lg (RC1の途中~)
  コントロールの幅サイズ:.input-mini、.input-small、.input-medium、.input-large、.input-xlarge、.input-xxlargeはすべて廃止
 ラベル、コントロールの外枠、ヘルプテキストの色指定
  .success⇒.has-success
  .warning⇒.has-warning
  .error⇒.has-error
  .infoは廃止
 検索用フォーム:form.form-search、input.search-query(廃止)
 ブロックタイプのコントロール:input.input-block-level(廃止)
 複数グリッドコントロール:.controls、.controls-row(廃止)
 編集不能コントロール:.uneditable-input(廃止)
 フォームボタン用スタイル:.form-actions(廃止)
 インラインヘルプテキスト:.help-inline(廃止)

●ボタン(Buttons)
 ホタンの色:.btn⇒.btn.btn-default(RC1の途中~)
 ボタンのサイズ
  大きめ:.btn-large⇒.btn-lg(RC1の途中~)
  小さめ:.btn-small⇒.btn-sm(RC1の途中~)
  極小:.btn-mini⇒.btn-xs(初期RC1では廃止⇒途中で復活)

●イメージ(Images)
 イメージ枠
  枠付:.img-polaroid⇒.img-thumbnail
 レスポンシブイメージ(新設)
  常にmax-width:100%;、height:auto;で表示

●ヘルパークラス(Helper classes)
 すべての要素の表示を隠す(新設)
 テキスト非表示:.hide-text⇒.text-hide

●レスポンシブユーティリティ(Responsive utilities)
 表示/非表示
  .visible-phone⇒.visible-sm(RC1)⇒.visible-xs(RC2~)
  .visible-tablet⇒.visible-md(RC1)⇒.visible-sm(RC2~)
  .visible-desktop⇒.visible-lg(RC1)⇒.visible-md(RC2~)
  .hidden-phone⇒.hidden-sm(RC1)⇒.hidden-xs(RC2~)
  .hidden-tablet⇒.hidden-md(RC1)⇒.hidden-sm(RC2~)
  .hidden-desktop⇒.hidden-lg(RC1)⇒.hidden-md(RC2~)
 印刷時の表示/非表示(新設)

変更箇所(ここではクラスの変更のみ表示)
●グリフアイコン(Glyphicons)
 アイコンの設定:i.icon-xxx⇒span.glyphicon.glyphicon-xxx
 アイコンの種類(140⇒200に増加)

●ドロップダウン(Dropdowns)
 ドロップダウンの見出し(新設)
 サブドロップダウンメニュー:li.dropdown-submenu(廃止)

●ボダングループ(Button groups)
 ボタングループのサイズ(新設)
 ドロップダウンボタンつきボタングループ(新設)
 均等サイズのボタングループ(新設)

●インプットグループ(Input groups)
 インプットグループの設定
  .input-prependと.input-append⇒.input-group
  .add-on⇒.input-group-addon
 インプットグループのサイズ(新設)
  大きめ:.input-lg⇒.input-group-lg(RC2~)
  小さめ:.input-sm⇒.input-group-sm(RC2~)
 アドオンをチェックボックスやラジオボタンにする(新設)
 アドオンをボタンにする
  ボタンをspan.input-group-btnで囲む
 アドオンをドロップダウンボタンや分離ボタンにする
  .btn-group⇒.input-group-btn
  後にボタンドロップダウンや分離ボタンがつく場合は、ul.dropdown-menuに.pull-rightを追加

●ナビゲーション(Navs)
 均等サイズのナビゲーション(新設)
 積み重ねタブナビゲーション:ul.nav.nav-tabs.nav-stacked⇒リンクつきリストグループに変更
 任意方向のタブ:.tabs-below、.tabs-left、.tabs-right(廃止)
 ナビゲーションリスト:ul.nav.nav-list(廃止)
 ナビゲーションリンク見出し:li.nav-header(廃止)

●ナビゲーションバー(Navbar)
 ナビゲーションバーの設定
 左寄せ:.pull-left⇒.navbar-left
 右寄せ:.pull-right⇒.navbar-right
 フォーム以外でのボタン(新設)
 ナビゲーションバー内のテキストリンク(新設)
 ナビゲーションバーの縦仕切り線:.divider-vertical(廃止)
 ナビゲーションバー内の検索フォーム:.navbar-search(廃止)

●パンくずリスト(Breadcrumbs)
 パンくずリストの設定:仕切りに使う <span class="divider">/</span> は不要に

●ページ送り(Pagination)
 ページ送りの設定:div.pagination > ul⇒ul.pagination
 ページ送りのサイズ
  大きめ:.pagination-large⇒.pagination-lg(RC1の途中~)
  小さめ:.pagination-small⇒.pagination-sm(RC1の途中~)
  極小:.pagination-miniは廃止

変更箇所(ここではクラスの変更のみ表示)
●ラベル(Labels)
 ラベルの一部の色
  .label⇒.label.label-default(RC1の途中~)
  .label-important⇒.label-danger

●バッジ(Badges)
 バッジの色(Default以外は全て廃止)

●ジャンボトロン(Jumbotron)
 ジャンボトロンの設定:.hero-unit⇒.jumbotron

●サムネイル(Thumbnails)
 サムネイルの設定
  ul.thumbnails > li.span*⇒div.row > div.col-xx-*(グリッドシステムで設定)

●アラート(Alerts)
 アラートの設定:.alert-blockは不要に(RC1の途中~)
 アラートの一部の色:.alert⇒.alert.alert-warning(RC2の途中~)
 アラート内のリンク(新設)
 アラートメッセージを閉じるボタンの設定

●プログレスバー(Progress bars)
 プログレスバーの設定
  .bar⇒.progress-bar
 プログレスバーの色
  水色:.progress-info⇒.progress-bar-info
  緑色:.progress-success⇒.progress-bar-success
  黄色:.progress-warning⇒.progress-bar-warning
  赤色:.progress-danger⇒.progress-bar-danger
  ※指定場所が.progressと同列から.progress-barと同列に変更

●リストグループ(List group)(新設)
 リストグループの設定
 バッジつきリストグループ
 リンクつきリストグループ(積み重ねタブナビゲーションを継承)
 ヘッダありリンクつきリストグループ

●パネル(Panels)(新設)
 パネルの設定
 ヘッダつきパネルの設定
 フッタつきパネルの設定
 パネルの色
 テーブルつきパネル
 リストグループつきパネル:初期3RC1にあった.list-group-flushは不要に

●囲み枠(Wells)
 囲み枠の大きさ
  大きめ:.well-large⇒.well-lg(RC1の途中~)
  小さめ:.well-small⇒.well-sm(RC1の途中~)

変更箇所(ここではクラスの変更のみ表示)
●モーダル(Modals)
 モーダルの設定
  div.modal.hide⇒div.modal(.hideは不要に)
  div.modal-dialogとdiv.modal-contentの追加

●ボタン(Buttons)
 チェックボックスボタングループの設定
 ラジオボタングループの設定

●折り畳みスタイル(Collapse)
 パネルの設定(デザインがナビゲーション風からパネル風に変更(RC2~))
  .accordion⇒.panel-group
  .accordion-group⇒.panel.panel-default
  .accordion-heading⇒panel-heading
  .accordion-body⇒.panel-collapse
  .accordion-inner⇒.panel-body

●カルーセル(Carousel)
 スライドコントロールの設定
  ‹⇒span.icon-prev
  ›⇒span.icon-next

●入力時の先行表示機能(Typeahead)
 廃止され、typeahead.js(http://twitter.github.io/typeahead.js/)へ

Bootstrap3.0.1以降の変更箇所

3.0.1~
.container使用時の幅が最小幅より幅固定に
空白カラムの指定:.col-xs-offset-* が追加
カラムの順序変更:.col-xs-push-*、.col-xs-pull-* が追加
ブロックのセンタリング:.center-block が新設
非表示の設定:.hideが非推奨となった(.hiddenまたは.sr-onlyを推奨)

3.0.3~
均等サイズのボタングループで<button>で設定することが可能に(必ずボタングループ内の各ボタンをdiv.btn-groupで囲む)
幅一杯のジャンボトロンの設置が可能に

3.1.0~
可変レイアウト:.container-fluid が復活
文字の均等割付:.text-justify が新設
出典元の表示:blockquote > small ⇒ blockquote > footer に設定変更
引用の右寄せ:blockquote.pull-right ⇒blockquote.blockquote-reverse に設定変更
ユーザー入力:<kbd> が新設
テーブルの行/セルの背景色:.info が復活
アイコンつきコントロール:.form-group.has-feedback > span.glyphicon.glyphicon-xxx.form-control-feedback が新設
文字の背景色:.bg-primary、.bg-info、.bg-success、.bg-warning、.bg-danger が新設
ドロップダウンメニューの配置:.dropdown-menu.pull-left ⇒ dropdown-menu.dropdown-menu-left、.dropdown-menu.pull-right ⇒ dropdown-menu.dropdown-menu-right に設定変更
リストグループの背景色:.list-group-itemに.list-group-item-success、.list-group-item-info、.list-group-item-warning、.list-group-item-dangerのいずれかを追加
モーダルの大きさ 大きめ:.modal-lg、小さめ:.modal-sm が新設
整形済みテキスト<pre>:white-space: pre-wrapが廃止

3.2.0~
文字を折り返さない:.text-nowrapが新設
文字の変換 すべて小文字:.text-lowercase、すべて大文字:.text-uppercase、最初の文字が小文字⇒大文字:.text-capitalizeが新設
読み取り専用コントロール:[readonly]が新設
水平フォームのサイズ 大きめ:.form-group-lg、小さめ:.form-group-smが新設
閉じるアイコン:aria-hidden="true"はbutton内より独立したspanに移動し、<span class="sr-only">閉じる</span>を追加
閲覧時の表示:.visible-xxが.visible-xx-block,.visible-xx-inline,.visible-xx-inline-blockに分離
印刷時の表示:.visible-printが.visible-print-block,.visible-print-inline,.visible-print-inline-blockに分離
ストライププログレスバー、アニメーションプログレスバー:.progress.progress-striped⇒.progress-bar.progress-bar-stripedに設定変更
リストグループのリンクの無効:a.list-group-itemに.disabledを追加
動画の埋め込みが新設
 16:9のアスペクト比:.embed-responsive.embed-responsive-16by9 > <iframe>, <embed>,<object>のいずれかに.embed-responsive-item
 4:3のアスペクト比:.embed-responsive.embed-responsive-4by3 > <iframe>, <embed>,<object>のいずれかに.embed-responsive-item
モーダルの設定:aria-hidden="true"はbutton内より独立したspanに移動し、<span class="sr-only">閉じる</span>を追加
ツールチップ:オプションにtemplateが新設
ポップオーバー:オプションにtemplateが新設
アラートメッセージ:.alert-dismissable⇒.alert-dismissible、aria-hidden="true"はbutton内より独立したspanに移動し、<span class="sr-only">閉じる</span>を追加

3.3.0~
ユーザー入力:<kbd>を入れ子にすると太字で表記
テーブル:表題(<caption>)のスタイルが追加
グリフアイコン:.glyphicon-euroは.glyphicon-eurでも使用可
動画の埋め込み:<video>にも対応

3.3.2~
グリフアイコン:アイコンの種類が200⇒259に増加

BootstrapでGlyphicons以外に使えるアイコンフォント

Bootstrapのための便利なツール

1 2