下一代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 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
微信小程序实现商品属性联动选择
Feb 15 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
第六章 php目录与文件操作
2011/12/30 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
jquery选择器使用详解
2014/04/08 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python中sys模块是做什么用的
2020/08/16 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
播音主持专业个人自我评价
2014/01/09 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
先进班集体申报材料
2014/12/26 职场文书
小学数学教师研修日志
2015/11/13 职场文书