下一代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冒泡事件详解及阻止示例
Mar 21 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
在Vue中使用mockjs代码实例
Nov 25 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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
js数组的操作详解
2013/03/27 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python实现简单图片物体标注工具
2019/03/18 Python
详解python播放音频的三种方法
2019/09/23 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
C#中的验证控件有几种
2014/03/08 面试题
总裁秘书岗位职责
2013/12/04 职场文书
老乡聚会通知
2015/04/23 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
详解TypeScript的基础类型
2022/02/18 Javascript
Go 内联优化让程序员爱不释手
2022/06/21 Golang