溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下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中如果你想實現在某個尺寸下隱藏，你應該參照下表
| 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有哪些區別”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
