下一代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 相关文章推荐
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 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版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
对Python 数组的切片操作详解
2018/07/02 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python 实现端口扫描工具
2020/12/18 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
指针和引用有什么区别
2013/01/13 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
公务员培训自我鉴定
2014/02/01 职场文书
小学社会实践活动总结
2014/07/03 职场文书
致接力运动员加油稿
2015/07/21 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript