相違点: 1. Bootstrap3 はフロート レイアウトを使用し、Bootstrap4 はフレックス レイアウトを使用します; 2. Bootstrap4 のグリッド システムは指定された数の列を追加する必要はありませんが、Bootstrap3 は追加できません; 3. Bootstrap3 には 4 つのグリッド クラスがあります、Bootstrap4 は 5 つのグリッド タイプを実行します。
#このチュートリアルの動作環境: Windows7 システム、bootstrap4 バージョン、DELL G3 コンピューター
Bootstrap4 と Bootstrap3 の違い
- Bootsrap3 はフロート レイアウトを使用しますが、Bootstrap4 はフレックス レイアウトを使用します
- Bootsrap4 のグリッド システムは、指定された数のグリッド システムを追加する必要はありません。 row などの列 2 つの列があり、任意のサイズで行を均等に分割します。
- Bootstrap3 には 4 つのラスター タイプしかありません:col-xs extra small、col-sm small 、col-md、mediumcol-lglarge)
- Bootstrap4 には 5 つのラスター タイプがあります (col-extra small、col-sm-small、col-md-medium、col-lg) -large,col -xl-extralarge)
- Bootstrap4 は単位として rem を使用します
- Bootstrap4 は列を設定するときに offset-sm-4 を渡しますオフセット、Bootstrap3 は、col-sm-offset-4
- Bootstrap4 は、container-sm、container-md... などの応答性の高いコンテナを追加します。サイズはグリッド クラスより小さいです。
注:
hidden-xs,
visible-xs Bootstrap3 の は、
#Bootstrap4 では使用できません。
Class
Bootstrap4 で、一定の大きさで非表示にしたい場合は、次の表を参照してください
#Bootstrap3 |
Bootstrap4 |
##hidden-xs | d-sm-block |
##hidden-sm
d-sm-none d-md-block |
|
hidden-md
d-md-none d-lg-block |
|
hidden-lg
d-lg-none d-xl-block |
|
hidden-xl
d-xl-none |
|
visible-xs
d-sm-none |
|
visible-sm
d-sm-block d-md-none |
|
visible-md
d-md- block d-lg-none |
|
visible-lg
d-lg-block d-xl-none |
| ##visible- xl
d-xl-block |
|
B3 で hidden-sm を使用すると sm サイズのみが非表示になり、他のサイズは非表示になることに注意してください。 B4の場合、単純にd-sm -noneと指定するとsmサイズの要素は非表示になりますが、sm以上のサイズも非表示になり、sm以下のサイズは通常表示されます。これには上位互換性が伴います。問題があるため、sm要素を非表示に設定する場合はmdを設定する必要があります サイズ表示は上表の通り、他も同様 上位互換性を非表示、下位互換性を表示
[関連推奨事項: "
ブートストラップ チュートリアル
"]
以上がbootstrap4.0と3.0の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。