下一代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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
javascript动态加载三
Aug 22 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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创建Cookie数组的详解
2013/07/03 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python中取绝对值简单方法总结
2020/07/24 Python
关于python中导入文件到list的问题
2020/10/31 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
.net笔试题
2014/03/03 面试题
承诺书范文
2014/06/03 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
业务员岗位职责范本
2015/04/03 职场文书
雷锋观后感
2015/06/10 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
python+opencv实现目标跟踪过程
2022/06/21 Python