ブートストラップ3と4の違い
説明
Bootstrapは、HTML、CSS、およびJSフレームワークを使用して、Web上にレスポンシブモバイルファーストサイトを構築するための強力で人気のあるモバイルファーストフロントエンドフレームワークです。
次の表は、Bootstrap3とBootstrap4の違いを示しています。
| S.No. | 成分 | ブートストラップ3 | ブートストラップ4 |
|---|---|---|---|
| 1 | CSSソースファイル | もっと少なく | SCSS |
| 2 | グリッドシステム | 4層グリッドシステム（xs、sm、md、lg） | 5層グリッドシステム（xs、sm、md、lg、xl） |
| 3 | CSSユニット | px | レム |
| 4 | フォントサイズ | 14px | 16px |
| 5 | ドロップダウン構造 | <ul>と<li>で作成 | <ul>または<div>で作成 |
| 6 | オフセット列 | col-md-offset-4 | オフセット-md-4 |
| 7 | 画像 | .img-レスポンシブクラス | .img-流体クラス |
| 8 | テーブル | 親の<div>要素に.table-responseクラスを追加します | .table-responseクラスを<table>要素に追加します |
| 9 | グリフィコン | サポートされています | サポートされていません |
| 10 | メディアオブジェクト | .media、.media-body、.media-object、.media-heading、.media-right、.media-left、.media-list、.media-bodyなどのメディアオブジェクトのクラスを使用します | メディアオブジェクトには.mediaクラスのみを使用します。 |
| 11 | ダーク/インバーステーブル | サポートされていません | .table-darkクラスを使用して、ダーク/インバーステーブルを作成します |
| 12 | チェックボックスとラジオボタン | .radio、.radio-inline、.checkbox、または.checkbox-inlineクラスを使用して、チェックボックスとラジオボタンを表示します。 | .form-check、.form-check-label、.form-check-input、または.form-check-inlineクラスを使用して、チェックボックスとラジオボタンを表示します。 |
| 13 | フォームコントロールサイズ | .input-lgクラスと.input-smクラスを使用して、入力コントロールのサイズを増減します。 | .form-control-lgクラスと.form-control-smクラスを使用して、入力コントロールのサイズを増減します。 |
| 14 | ヘルプテキスト | .help-blockクラスを使用してヘルプテキストを表示します | .form-textクラスを使用してヘルプテキストを表示する |
| 15 | スタイル | 使用.btnデフォルトと.btnインフォボタンのクラスを | 使用.btn-二、.btn光と.btn、ダークボタンで授業をして落とし.btnデフォルトのクラスを。 |
| 16 | アウトラインボタン | サポートされていません | .btn-outline- *クラスを使用して、ボタンをアウトラインカラーでスタイル設定します |
| 17 | ボタンのサイズ | .btn-XSクラスが提供されています | 利用可能な唯一の.btn-SMと.btn-LGクラスとドロップ.btn-XSクラスを |
| 18 | メニューヘッダー | liタグに.dropdown-headerクラスを使用します | 使用.dropdown・ヘッダにクラスH1 - H2タグ |
| 19 | 仕切り | li要素で.dividerクラスを使用します | div要素で.dropdown-dividerクラスを使用します |
| 20 | Navbarを修正しました | .navbar-fixed-topクラスと.navbar-fixed-bottomクラスを使用して、ナビゲーションバーを上または下に修正します | .fixed-topクラスと.fixed-bottomクラスを使用して、ナビゲーションバーを上または下に修正します |
| 21 | ポケットベル | .previousクラスと.nextクラスを使用してページを揃えます | サポートされていません |
| 22 | ジャンボトロン全幅 | 全幅ジャンボトロンで.jumbotron-fluidクラスを使用しません | 全幅ジャンボトロンには.jumbotron-fluidクラスを使用します |
| 23 | カルーセルアイテム | カルーセルアイテムに.itemクラスを使用します。 | カルーセルアイテムに.carousel-itemクラスを使用します。 |
| 24 | ウェル、パネル、サムネイル | サポートされています | サポートされていません。代わりにカードを使用してください |
| 25 | インラインナビゲーション | .nav-inlineクラスは含まれていません | .nav-inlineクラスを使用して、ナビゲーションをインラインとして表示します |