下一代 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支持,通用的拆卸方法,选择类型检查,等等等等。”

好了!让我们抢鲜来看看它的文档和长什么样子吧!

作者:小峰

来源:51CTO

时间: 2024-10-24 08:07:31

下一代 Bootstrap 的 5 个超酷特点的相关文章

新手学JavaScript(三)----超酷消息警告框插件(SweetAlert)

HTML JavaScript API     今天给大家推荐一款不错的超酷消息警告框–SweetAlert:SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击后回调函数等.和传统的alert相比: SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义.接下来看看它的具体使用! HTML     首先引入相应的js和c

推荐9款HTML5实现的超酷特效 带给你全新的视角和体验

中介交易 SEO诊断淘宝客 站长团购 云主机 技术大厅 之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能.广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.今天我们推荐8款使用HTML5生成的特殊效果,希望可以对大家的使用带来帮助! HTML5 3D

详解HP Gen8服务器的10大“超酷”特性

如今的数据中心中,IT管理者往往陷入忙乱中:错误警告.系统事件.安装和更新问题.呼叫支持服务等各种问题层出不穷.如何解决问题成为每个企业IT管理的难题.惠普的下一代服务器HP ProLiant Gen8将大大改变这一现状,新一代的服务器可让IT专业人员远程监控网络,并通过大量自动化.智能化的功能大幅减轻工作量 真正算得上最让用户省心的服务器. 1.快速显示视频.Gen8服务器提供在开启后的3秒内显示视频的功能.这与上一代的服务器接收视频需要一到数分钟形成鲜明对比,让客户可以收到状态和错误警报,而

JavaScript SweetAlert插件实现超酷消息警告框_javascript技巧

今天给大家推荐一款不错的超酷消息警告框–SweetAlert:SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击后回调函数等.和传统的alert相比: SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义.接下来看看它的具体使用! HTML 首先引入相应的js和css,该插件不需要jQuery插件的支持: <link

分享12套超酷的后台管理员界面网站模板

日期:2012-10-16  来源:GBin1.com 在上次的文章中我们介绍了一套超酷的黑色系单页面网站模板,今天我们带来了12套超棒的管理员专用网站模板,希望大家喜欢! 在这些超棒的网站模板可以直接应用到其它的开源CMS (例如,wordpress,magento等等),你可以很方便的自定义. 虽然管理员界面使用的数量相对用户界面并不多,但是专业的管理员界面网站模板要求更好的使用性和用户体验,并不是简单的设计.今天这套分享的模板相信能够带给大家超棒的体验! Charisma Admin Te

使用CSS3实现的超酷幻灯图片效果

  在线演示 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后使之动画. HTML标签 HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下: <section class="cr-container">     <!-- radio buttons and labels -->  <input id="select-img-1" name="ra

Fireworks制作超酷金属字

  如例图所示的这款金属字是否给你一种镏光溢彩的感觉呢?如果你回答No,我只好就此Stop了,呵呵.好了,废话不多,我们一起开始吧!看看到底如何制作出这样一款超酷的金属字效果来. 本节要点:重点掌握Effect(效果)命令中Adjust Color--Curves效果命令和Hue/Saturation效果命令的使用方法! 第一步. 新建文件,文件的大小为300*100像素,背景色采用白色.为了突出效果,建议你先不要采用其他色彩的背景色,等我们学习完毕,你自己重新开始时,再用其他的颜色来试验也不迟

Photoshop制作超酷的纸张撕裂效果图

  本教程主要使用Photoshop制作超酷的纸张撕裂效果图,真题的撕纸效果非常的漂亮,喜欢的朋友一起来学习吧. 先看看效果图 制作步骤 1.Ctrl+N新建一个1100×800像素大小的画布,填充背景颜色#9d9d9d;在背景图层的上方新建一层300像素高的色块填充,颜色为#c5c5c5,为该矩形框添加渐变色由黑到白的图层蒙版,使该图层上方与背景层融合; 2.在画布中置入一张等待被撕裂的图片; 3.Ctrl+T将图片各边进行适当变形处理; 4.用多边形套索工具(L)框选如下图所示,锯齿随意发挥

Photoshop制作超酷的2014立体字

  本教程主要使用Photoshop制作超酷的2014立体字教程,PS自带的3D工具非常强大,用来制作立体字是非常专业的.不过在使用之前,需要先对3D工具有一定的了解,如怎样设置透视,并给各个面增加材质,颜色等.这样才能快速做出想要的效果. 最终效果 1.新建一个大小1000*1000px的文档,填充背景颜色#1c1c1c.然后,新建文本"2014",字体Don't Panic,大小392pt. 2.去3D>从所选图层新建3D凸出,将文字层转换成3D图层. 3.复制背景层,将背景