下一代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 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
js调用刷新界面的几种方式
May 03 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
Vue组件开发初探
2017/02/14 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
银行职员自我鉴定
2014/04/20 职场文书
秋天的图画教学反思
2014/05/01 职场文书
单位实习鉴定评语
2015/01/04 职场文书
个人收入证明格式
2015/06/24 职场文书
公司老总年会致辞
2015/07/30 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android