Extend

Approach

Bootstrap 4の設計方針について(概要)

• レスポンシブ、モバイルファースト
• ベースクラスを基本として修飾クラスで拡張する
• 状態に対応したz-indexのスケールを用いる
• JavaScriptよりHTMLとCSSによる実装を優先する
• カスタムスタイル style='..." よりもユーティリティを活用する
• HTML構造規則(セレクタ結合子)への依存を避ける

Icons

Bootstrap 3付属の Glyphicons は廃止され、Bootstrap 4は外部アイコンライブラリを利用する。

推奨ライブラリ(Bootstrap開発チームによるテスト済+利用実績あり)

• Font Awesome
• Iconic (カスタムフォームの実装に Open Iconic が用いられている)
• Octicons

その他は More options を参照。

Migration

旧バージョン(Ver 3)との違いを中心とした解説(Ver 4はほぼ完全に一から書き直しているため全面的な変更が多い)

Ver 4 Beta版から安定版までの変更点(まとめ)

• Stable changes : Beta 3から安定版への変更点
• Beta 3 changes : Beta 2からBeta 3への変更点
• Beta 2 changes : Beta 1からBeta 2への変更点

バージョン3から4への変更点(まとめ)

• 対応ブラウザ
  • IE10+/iOS7+ (IE8,9,iOS6を切り捨て)
  • Android v5,0 Lollipop + WebView
• 全体的な変更点
  • Flexboxがデフォルトで有効
  • CSS処理ソース形式ををLessからSassに変更
  • CSSの基本単位を em から rem に変更
  • グローバルフォントサイズを 14px から 16px に変更, etc.
• グリッド
  • Flexboxベースに移行
• コンポーネント
  • panels, thumnail, wells, Glyphicons, Affix, pagerを廃止
  • ほぼ全てのコンポーネントを書き直し

コンポーネント別の変更(まとめ/主要項目のみ、詳細はリンク先の本文参照)

• Reboot
  • リセットCSSを Normalize.css から Reboot に変更
• タイポグラフィ
  • .page-header を削除(代替としてユーティリティを使用)
  • Dropped .dl-horizontal (代替として .row を使用)
• 画像
  • .img-responsive から .img-fluid に名称変更
  • .img-rounded から .rounded に名称変更
  • .img-circle から .rounded-circle に名称変更
• 表
  • (特にネストしたテーブルの)カスタマイズを容易にするためCSSの子結合子 ( > ) を大部分除去
  • レスポンシブ対応テーブルは親要素が不要になった
  • .table-condensed から .table-sm に名称変更
• フォーム
  • .control-label から .col-form-label に名称変更
  • .input-(lg|sm) から .form-control-(lg|sm) に名称変更
  • .form-group-* を削除(代替として .form-control-* )
• ボタン
  • .btn-default から .btn-secondary に名称変更
  • .btn-xs を削除
  • button.js の状態付きボタン機能を削除
• ボタングループ
  • Flexboxベースで書き直し
  • .btn-group-justified を削除
  • .btn-group-xs を削除
• ドロップダウン
  • 単純化して再設計
  • 新設計により div と ul の要素からの作成に対応
• グリッド
  • 576px の sm ブレークポイントを追加 (xs, sm, mb, lg, xl の計5種類)
  • 記法を .col-{breakpoint}-{modifier}-{size} から .{modifier}-{breakpoint}-{size} に変更
  • push/pull機能を廃止(代替としてFlexboxを使用)
• リストグループ
  • Flexboxベースで書き直し
  • a.list-group-item を .list-group-item-action に変更
• モーダル
  • Flexboxベースで書き直し
  • remote オプションを削除
  • loaded.bs.modal イベントを削除
• ナビゲーション
  • Flexboxベースで書き直し
  • 設定単純化のためCSSの子結合子 ( > ) を大部分削除
• ナビゲーションバー
  • Flexboxベースで完全に再設計
  • レスポンシブ対応 .navbar-expand-{breakpoint} の設定先を .navbar 設定要素に変更
• ページネーション
  • Flexboxベースで書き直し
  • .pagination のアイテムに .page-(item|link) の設定が必要になった
• パンくずリスト
  • これもアイテムに .breadcrumb-item の設定が必要になった
• Labels and badges
  • バージョン3のBadgeを廃止
  • バージョン3のLabelをBadgeに名称変更( label 要素との混同を避けるため)
• Panels, thumbnails, and wells
  • これらのコンポーネントは廃止し、代わりに新コンポーネントのカードを使う
• プログレスバー
  • バーの配色を .progress-bar-* から .bg-* に変更
  • アニメーション用設定を .active から .progress-bar-animated に変更
• カルーセル
  • 全面書き直し
  • 構造(特に親子)に依存するCSS記述を回避(.carousel- 接頭辞を使う)
• 表 ⇒ (上記参照)
• ユーティリティ
  • Displayのレスポンシブ設定を追加 .d-(sm|md|lg|xl)-(none|inline|...)
  • 文字寄せのレスポンシブ設定を追加 .text-(sm|md|lg|xl)-(left|center|right)
• Vendor prefix mixins
  • 採用をやめ、代わりに Autoprefixer を採用

その他

• Documentation : (Jekyllを用いた)ドキュメント生成の変更点
• Responsive utilities : レスポンシブ実装の変更点(大幅に単純化)

About

Overview

Bootstrap開発チーム、歴史等について

Brand

Bootstrapロゴ/ブランド(画像ダウンロードあり)とその使用ガイドラインについて

Licence

BootstrapのオープンソースライセンスのFAQ

Translations

翻訳サイトへのリンク集