Bootstrap4一次重大更新 几乎涉及每行代码


Posted in Javascript onMay 16, 2016

对Bootstrap来说去年8月19日是个特别的日子——不仅是项目四周年纪念日,也是经过了一年密集开发之后发布Bootstrap 4内测版的日子。Bootstrap 4是一次重大更新,几乎涉及每行代码。

1、新增功能

Bootstrap4一次重大更新 几乎涉及每行代码

Bootstrap 4中有太多重大的更新,本文不能面面俱到,下面是一些颇受关注的亮点:

从Less迁移到Sass: 现在,Bootstrap已加入Sass的大家庭中。得益于Libsass,Bootstrap的编译速度比以前更快;
改进网格系统:新增一个网格层适配移动设备,并整顿语义混合。
支持选择弹性盒模型(flexbox):这是项划时代的功能——只要修改一个Boolean变量,就可以利用flexbox的优势快速布局。
废弃了wells、thumbnails和panels,使用cards代替:Cards是个全新概念,但使用起来与wells、thumbnails及panels很像,且更方便。
将所有HTML重置样式表整合到Reboot中:在用不了Normalize.css的地方可以用Reboot了,它提供了更多选项。例如box-sizing: border-box、margin tweaks等都存放在一个单独的 Sass 文件中。
新的自定义选项:不再像上个版本一样,将渐变、淡入淡出、阴影等效果分放在单独的样式表中。而是将所有选项都移到一个Sass变量中。想要给全局或考虑不到的角落定义一个默认效果?很简单,只要更新变量值,然后重新编译就可以了。
不再支持IE8,使用rem和em单位:放弃对IE8的支持意味着开发者可以放心地利用CSS的优点,不必研究css hack技巧或回退机制了。使用rem和em代替px单位,更适合做响应式布局,控制组件大小。如果要支持IE8,只能继续用Bootstrap 3。
重写所有JavaScript插件:为了利用JavaScript的新特性,Bootstrap 4用ES6重写了所有插件。现在提供UMD支持、泛型拆解方法、选项类型检查等特性。
改进工具提示和popovers自动定位:这部分要感谢Tether工具的帮助。
改进文档:所有文档以Markdown格式重写,添加了一些方便的插件组织示例和代码片段,文档使用起来会更方便,搜索的优化工作也在进行中。
更多变化:支持自定义窗体控件、空白和填充类,此外还包括新的实用程序类等。
以上更新只是冰山一角, v4版共有1100多次commits和 12万行代码更新,这些更新可以在v4-alpha文档中查看。

2、开发计划

v4版本所有的源代码都在Github的v4-dev分支上开源。此外,还有一个v4开发和跟踪pr ,公布master的changes列表和待开发列表。大家可以贡献自己的代码,来让这个项目变得更好。

总体的开发和发布计划如下:

还会在不断改进中发布几个alpha版本; 新特性和新功能冻结之后发布两个Beta版本进行充分测试; 发布 2 个候选版本,测试是否能用于生产环境; 发布最终版本。

Slack上还有个专门讨论v4的频道,Bootstrapers可以点击这里加入。

3、支持v3

发布Bootstrap 3时,Bootstrap曾放弃了对2.x版本的支持,给很多用户造成了麻烦,同样的错误不会犯第二次。在不久的将来,开发团队还会继续修复v3的bug,改进文档。v4最终发布之后,v3的文档也不会下线。

4、One more thing……

除了发布Bootstrap 4 alpha外,官方还发布了Bootstrap主题。

Bootstrap4一次重大更新 几乎涉及每行代码这些主题耗费的精力很大,它们自己就有很多工具集,和Bootstrap本身一样。

作为开始,发布的主题有: dashboard, application,和marketing,使用multiple-use license 协议。

点击这里查看更多主题信息。

5、反馈

1)有人提到,在v3.5.5(最后的稳定版本)中,bootstrap.min.css是123KB,而在新的4.0.0alpha bootstrap.min.css 中只有88KB,值得庆祝。

2)有人反馈说dashboard主题并不是完完全全的响应式,比如在tables->order history中。

3)Bootstrap改成默认使用Sass,引起了广泛的讨论。

4)也有人表示,一个组织愿意放弃旧技术(不再支持IE8)用新技术(ES6)来重写库,值得尊敬。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
JS获取元素多层嵌套思路详解
May 16 #Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 #Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 #Javascript
在javascript中创建对象的各种模式解析
May 16 #Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 #Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 #Javascript
Javascript基础教程之比较null和undefined值
May 16 #Javascript
You might like
PHP 中的批处理的实现
2007/06/14 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
详解JavaScript事件循环机制
2018/09/07 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
js实现秒表计时器
2019/12/16 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 队列详解及实例代码
2016/10/18 Python
python装饰器深入学习
2018/04/06 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
python turtle 绘制太极图的实例
2019/12/18 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
幼儿园父亲节活动方案
2014/03/11 职场文书
法制报告会主持词
2014/04/02 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers