下一代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脚本 Node.js 使用入门
Mar 07 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
js canvas实现擦除动画
Jul 16 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
原生JS实现幻灯片
Feb 22 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
跟老齐学Python之Python文档
2014/10/10 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python实现Virginia无密钥解密
2019/03/20 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
python实现在线翻译功能
2020/03/03 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js