下一代Bootstrap的5个特点 超酷炫!


Posted in Javascript onJune 17, 2016

Bootstrap 4的初始版已经发布很久,还是希望大家都可以认识到,这是对这个流行的(可能是最流行的)响应式CSS框架一次重大的彻底整修。该项目创始人,Mark Otto说这次的发布“几乎涉及每一行代码”,这并不是在开玩笑。

下一代Bootstrap的5个特点 超酷炫! 

1.更轻巧的文件大小
 有这样一句话,“删掉的代码必定是已经调试过的代码,”——最好的重构一定会导致项目删除大量代码,迅速瘦身。如果你下载初始版本,那么你会发现,与最新的稳定版本Bootstrap 3(3.3.5)——约为123KB大小(bootstrap.min.css文件)——相比,新的4.0.0初始bootstrap.min.css仅约为88KB。这可能是得益于IE8的支持。

2.从LESS切换到Sass 
社区和性能是Bootstrap决定在版本4中作此切换的两个主要原因。特别是,争论的依据为:
----SaaS项目比LESS迭代更快
----切换到Sass提高了框架的性能

然而,从GitHub的页面来看,LESS看上去仍具有人气的优势,但Bootstrap表示,Sass增长的速度非常快。无论哪种方式,你都可以用正确的方法在Bootstrap 3中的Sass里做很多CSS编码工作。有些人在怀疑的是,PostCSS——一款极有前途的模块化工具,是否有强大的性能做预处理工作,以及是否应该替代LESS。 

3.切换Flexbox支持
 Bootstrap 4现在支持使用W3C的Flexbox功能,Flexbox功能依然可以消弭所有浏览器的支持。出于这个原因,这是一个可选功能,如果需要的话,可以打开。
 如果你需要快速复习Flexbox,那么我给你推荐一个指南—— 《A Complete Guide to Flexbox》 。还有新出来的关于Flexbox的一个视频系列,如果你更喜欢这种方式的话。 

4.重新调整卡片式UI布局模式
 我和Andrew Trice都认为这是一个早在2013年谷歌的Material Design中就应该理解的重要的UI布局模式,现在Bootstrap 4将所有的筹码都压在了这一趋势上。Bootstrap废弃了wells、thumbnails和panels,转而使用cards代替。

 下一代Bootstrap的5个特点 超酷炫!

5.在ES6中重写JS插件
 ECMAScript 6在几个月前终于定稿和标准化,Bootstrap紧跟这一最新的web技术。他们已经重写了所有的JavaScript插件以便于利用ES6的优势,并且他们也已经更新了一起的插件,“UMD支持,通用的拆卸方法,选择类型检查,等等等等。”

译文链接:http://www.codeceo.com/article/bootstrap-5-cool-things.html
英文原文:5 Cool Things About the Next Version of Bootstrap
翻译作者:码农网 ? 小峰

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

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

Javascript 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 #Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 #Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 #Javascript
Bootstrap前端开发案例二
Jun 17 #Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 #Javascript
Bootstrap前端开发案例一
Jun 17 #Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
组合算法的PHP解答方法
2012/02/04 PHP
深入php多态的实现详解
2013/06/09 PHP
PHP答题类应用接口实例
2015/02/09 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
js实现简单模态框实例
2018/11/16 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
TensorFlow实现模型评估
2018/09/07 Python
python3人脸识别的两种方法
2019/04/25 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
社会学专业求职信
2014/02/24 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
项目投资建议书
2014/05/16 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript