bootstrap4.0與3.0有什麼差別

區別：1.Bootsrap3採用float佈局，Bootstrap4採用flex佈局；2、Bootstrap4中柵格系統可以不用添加指定的列數，Bootsrap3不行；3、Bootstrap3有4種柵格類，Bootstrap4有5種柵格類別。

本教學操作環境：Windows7系統、bootsrap4版、DELL G3電腦

Bootstrap4與Bootstrap3的差異

• Bootsrap3所採用的float佈局，而Bootstrap4所採用的flex佈局

• Bootstrap4中的柵格系統可以不用加入指定的列數如row裡面有2個col 會任何尺寸下均分row

• Bootstrap3只有4種柵格類別分別為（col-xs特小，col-sm小,col-md,中col-lg大）

• Bootstrap4有5種柵格類，（col-特小，col-sm-小，col-md-中，col-lg-大，col -xl-超大）

• Bootstrap4使用rem為單位

• Bootstrap4設定列偏移時透過offset-sm-4,而Bootstrap3透過col-sm-offset-4

• Bootstrap4增加了響應式容器如container-sm ,container-md….,當小於螢幕尺寸小於柵格類別時會佔滿整個螢幕

注意點：

Bootstrap4中不能使用Bootstrap3中的hidden-xs,visible-xs 類別

在Bootstrap4中如果你想實作在某個尺寸下隱藏，你應該參考下表

hidden-lghidden-xlvisible-xsvisible-sm

Bootstrap3	#Bootstrap4
hidden-xs	d-sm-block
hidden-sm	d-sm-none d-md-block
hidden-md	d-md-none d-lg-block
d-lg-none d-xl-block
d- xl-none
d-sm-none

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尺寸顯示，如上表，其他以此類推### 隱藏向上相容，顯示向下相容######【相關推薦：《###bootstrap教學###》】###

以上是bootstrap4.0與3.0有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！