ブートストラップ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クラスを使用して、ナビゲーションをインラインとして表示します