关键词: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的下边距离, 内嵌列表移除下边距
未完--------这两天补完
网友评论