下一代Bootstrap的5个特点 超酷炫!

 更新时间:2016年06月17日 16:17:33   作者:小峰  
下一代Bootstrap的5个特点,超酷炫,你还犹豫什么,赶紧来学习吧

Bootstrap 4的初始版已经发布很久,还是希望大家都可以认识到,这是对这个流行的(可能是最流行的)响应式CSS框架一次重大的彻底整修。该项目创始人,Mark Otto说这次的发布“几乎涉及每一行代码”,这并不是在开玩笑。

 

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代替。

 

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学习教程

相关文章

  • JS PHP字符串截取函数实现原理解析

    JS PHP字符串截取函数实现原理解析

    这篇文章主要介绍了JS PHP字符串截取函数实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • ES6 fetch函数与后台交互实现

    ES6 fetch函数与后台交互实现

    最近在学习react-native,遇到调用后端接口的问题。看了看官方文档,推荐使用es6的fetch来与后端进行交互,这篇文章主要介绍了ES6 fetch函数与后台交互实现,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • file-loader打包图片文件时路径错误输出为[object-module]的解决方法

    file-loader打包图片文件时路径错误输出为[object-module]的解决方法

    这篇文章主要介绍了file-loader打包图片文件时路径错误输出为[object-module]的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JavaScript变量和变换详情

    JavaScript变量和变换详情

    这篇文章主要介绍了JavaScript变量和变换详情,文章基于JavaScript的相关资料展开相关内容需要的小伙伴可以惨一下
    2022-04-04
  • 12个非常实用的JavaScript小技巧【推荐】

    12个非常实用的JavaScript小技巧【推荐】

    下面小编就为大家带来一篇12个非常实用的JavaScript小技巧【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript canvas仿代码流瀑布

    JavaScript canvas仿代码流瀑布

    这篇文章主要为大家详细介绍了JavaScript canvas仿代码流瀑布,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JavaScript使用Math.random()生成简单的验证码

    JavaScript使用Math.random()生成简单的验证码

    今天小编就为大家分享一篇关于JavaScript使用Math.random()生成简单的验证码,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 基于JS实现点击图片在弹出层显示大图效果

    基于JS实现点击图片在弹出层显示大图效果

    Javascript是个好东西。Jquery是基于这个好东西的一个强大的库。本文将利用JavaScript实现点击图片在弹出层显示大图功能,感兴趣的可以了解一下
    2022-08-08
  • 让html页面不缓存js的实现方法

    让html页面不缓存js的实现方法

    这篇文章主要介绍了让html页面不缓存js的实现方法,分析了HTML页面缓存js的原理,并由此分析实现不缓存js的方法,是非常实用的技巧,需要的朋友可以参考下
    2014-10-10
  • three.js利用gpu选取物体并计算交点位置的方法示例

    three.js利用gpu选取物体并计算交点位置的方法示例

    这篇文章主要给大家介绍了关于three.js利用gpu选取物体并计算交点位置的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11

最新评论