ホームページ >ウェブフロントエンド >フロントエンドQ&A >bootstrap4.0と3.0の違いは何ですか

bootstrap4.0と3.0の違いは何ですか

青灯夜游
青灯夜游オリジナル
2022-01-10 14:41:512656ブラウズ

相違点: 1. Bootstrap3 はフロート レイアウトを使用し、Bootstrap4 はフレックス レイアウトを使用します; 2. Bootstrap4 のグリッド システムは指定された数の列を追加する必要はありませんが、Bootstrap3 は追加できません; 3. Bootstrap3 には 4 つのグリッド クラスがあります、Bootstrap4 は 5 つのグリッド タイプを実行します。

bootstrap4.0と3.0の違いは何ですか

#このチュートリアルの動作環境: 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 で、一定の大きさで非表示にしたい場合は、次の表を参照してください##hidden-xsd-sm-block ##hidden-smhidden-mdhidden-lghidden-xlvisible-xsvisible-smvisible-mdvisible-lg##visible- xld-xl-blockB3 で hidden-sm を使用すると sm サイズのみが非表示になり、他のサイズは非表示になることに注意してください。 B4の場合、単純にd-sm -noneと指定するとsmサイズの要素は非表示になりますが、sm以上のサイズも非表示になり、sm以下のサイズは通常表示されます。これには上位互換性が伴います。問題があるため、sm要素を非表示に設定する場合はmdを設定する必要があります サイズ表示は上表の通り、他も同様 上位互換性を非表示、下位互換性を表示
#Bootstrap3 Bootstrap4
d-sm-none d-md-block
d-md-none d-lg-block
d-lg-none d-xl-block
d-xl-none
d-sm-none
d-sm-block d-md-none
d-md- block d-lg-none
d-lg-block d-xl-none

[関連推奨事項: "
ブートストラップ チュートリアル

"]

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。