bootstrap3とbootstrap4の違い

前書き: bootstrap4 の出現後、bootstrap3 の不便な点は、フレームワークを使用するフロントエンド開発者にとってより便利になるように修正されました。 (ブートストラップを以下 bs と呼びます)

1. グリッドシステム

オリジナルの bs3 と比較して、bs4 は適応範囲が広いです。従来のbs3のxs sm md lgのうち、bs4では超大画面に適応するためにxlレンジが追加されました。

#元のバージョンではすべてフロート レイアウトが使用され、新しいバージョンではフレックス レイアウトが使用されます。新しいバージョンでは、グリッド システムの列は指定された数の列を追加する必要がありません。たとえば、行に 2 つの列がある場合、それらは自動的に -6 と -6 に分割されます。 3 つの列のうち 1 つが列番号を指定しているが、他の 2 つは列番号を指定していない場合、つまり (12-x/)2 となります。

2.img-circle と新しいバージョンのrounded-circle

古いバージョンでは、img-circle は画像にのみ有効ですが、新しいバージョンでは、丸丸はすべてに有効 すべての要素が有効ですが、使ってみないと分かりません。

関連する推奨事項: 「bootstrap 入門チュートリアル 」

3. メディア オブジェクト

media-left、media- を削除しました。右はmedia-bodyのみで、bodyの前に画像を書くと左、bodyの後に画像を書くと右になります。

Four.display series/offset/margin/padding

Offset:col-[size]-offset-[x] は使用されなくなり、代わりに Is offset-[サイズ]-[x]

マージン: ml 左マージン mr 右マージン、mt 上マージン、mb 下マージン mx-水平方向 my- 垂直方向

ml- 1

Padding: pl,pr,pt,pb, px,py

5. カラー

一次二次情報成功警告危険光ダーク

bg - [カラー]

テキスト -[カラー]

btn -[]

バッジ - []はbs3ラベル

に対応します

以上がbootstrap3とbootstrap4の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。