關鍵詞:Bootstrap v4? flex ?柵格化 ? Bootstrap 插件

最近看了下bootstrap 最新版本bootstrap-4.0.0-alpha.6 和之前Boostrap 3 穩定版變化有點大,確實感嘆外國人的更新速度快,同時作為前端開發來說,始終要保持節奏,這個時代,變化太快了.

來說說新版本主要的變化:

單位的變化,初始字體大小的變化 B4大多采用REM (對于根元素的字體大小的單位), 與EM (相對于父元素字體單位)有很大不同.用REM目前主要適配電腦 手機 大屏手機.

柵格化的變化

從V3版本的col- 開始, 它的珊格化是靠dispaly:float ;在通過數字確定占用一行的比例,很方便的布局

到了V4版本,改用display:flex ;彈性布局,這個東西好,他能設置子塊級元素對齊方式,子塊級元素的排列方式.還可以在同一行只設置一列的寬度,其余自由填充,這是FLex的魅力.可以說比之前的V3版本更具有靈活性..說到這,最近很火的小程序,它的CSS布局教程也是采用Flex,看來Twiteer 騰訊 技術人員都開始拋棄Float了. 新增加一換行類"w-100"

視圖斷點的增加與名稱改變

視圖斷點(多了個Small device)

B4 拋棄了B3中的 hidden-xs, visibile-xs ?改為 up ?down 模式, 新增加大屏幕手機模式

媒體類的增加

媒體類--像騰訊朋友圈模式那種,只要media ? .media-body 即可實現, 省去一些B3中的media-header ?media-left 等 改用media新寫法

細節方面調整

修改了原先段落外編劇20像素改為1rem;標題H1到H5的上邊距離多移

移除所有列表UL OL DL的上邊距離,跟段落一樣1REM的下邊距離, 內嵌列表移除下邊距

未完--------這兩天補完