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 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
通过构造函数实例化对象的方法
Jun 28 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
php框架知识点的整理和补充
2021/03/01 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
document.getElementById介绍
2011/09/13 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
javascript时间函数大全
2014/06/30 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
Python连接phoenix的方法示例
2017/09/29 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python实现全排列的打印
2018/08/18 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
Python用户自定义异常的实现
2020/12/25 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
军训心得体会
2013/12/31 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书