下一代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中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
原生JS实现汇率转换功能代码实例
May 13 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
PyCharm配置mongo插件的方法
2018/11/30 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Python是怎样处理json模块的
2020/07/16 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
会计学自我鉴定
2014/02/06 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技