Bootstrap4一次重大更新 几乎涉及每行代码

对Bootstrap来说去年8月19日是个特别的日子——不仅是项目四周年纪念日，也是经过了一年密集开发之后发布Bootstrap 4内测版的日子。Bootstrap 4是一次重大更新，几乎涉及每行代码。

1、新增功能

Bootstrap 4中有太多重大的更新，本文不能面面俱到，下面是一些颇受关注的亮点：

从Less迁移到Sass： 现在，Bootstrap已加入Sass的大家庭中。得益于Libsass，Bootstrap的编译速度比以前更快；
改进网格系统：新增一个网格层适配移动设备，并整顿语义混合。
支持选择弹性盒模型（flexbox）：这是项划时代的功能——只要修改一个Boolean变量，就可以利用flexbox的优势快速布局。
废弃了wells、thumbnails和panels，使用cards代替：Cards是个全新概念，但使用起来与wells、thumbnails及panels很像，且更方便。
将所有HTML重置样式表整合到Reboot中：在用不了Normalize.css的地方可以用Reboot了，它提供了更多选项。例如box-sizing: border-box、margin tweaks等都存放在一个单独的 Sass 文件中。
新的自定义选项：不再像上个版本一样，将渐变、淡入淡出、阴影等效果分放在单独的样式表中。而是将所有选项都移到一个Sass变量中。想要给全局或考虑不到的角落定义一个默认效果？很简单，只要更新变量值，然后重新编译就可以了。
不再支持IE8，使用rem和em单位：放弃对IE8的支持意味着开发者可以放心地利用CSS的优点，不必研究css hack技巧或回退机制了。使用rem和em代替px单位，更适合做响应式布局，控制组件大小。如果要支持IE8，只能继续用Bootstrap 3。
重写所有JavaScript插件：为了利用JavaScript的新特性，Bootstrap 4用ES6重写了所有插件。现在提供UMD支持、泛型拆解方法、选项类型检查等特性。
改进工具提示和popovers自动定位：这部分要感谢Tether工具的帮助。
改进文档：所有文档以Markdown格式重写，添加了一些方便的插件组织示例和代码片段，文档使用起来会更方便，搜索的优化工作也在进行中。
更多变化：支持自定义窗体控件、空白和填充类，此外还包括新的实用程序类等。
以上更新只是冰山一角， v4版共有1100多次commits和 12万行代码更新，这些更新可以在v4-alpha文档中查看。

2、开发计划

v4版本所有的源代码都在Github的v4-dev分支上开源。此外，还有一个v4开发和跟踪pr ，公布master的changes列表和待开发列表。大家可以贡献自己的代码，来让这个项目变得更好。

总体的开发和发布计划如下：

还会在不断改进中发布几个alpha版本； 新特性和新功能冻结之后发布两个Beta版本进行充分测试； 发布 2 个候选版本，测试是否能用于生产环境； 发布最终版本。

Slack上还有个专门讨论v4的频道，Bootstrapers可以点击这里加入。

3、支持v3

发布Bootstrap 3时，Bootstrap曾放弃了对2.x版本的支持，给很多用户造成了麻烦，同样的错误不会犯第二次。在不久的将来，开发团队还会继续修复v3的bug，改进文档。v4最终发布之后，v3的文档也不会下线。

4、One more thing……

除了发布Bootstrap 4 alpha外，官方还发布了Bootstrap主题。

这些主题耗费的精力很大，它们自己就有很多工具集，和Bootstrap本身一样。

作为开始，发布的主题有： dashboard, application,和marketing，使用multiple-use license 协议。

点击这里查看更多主题信息。

5、反馈

1）有人提到，在v3.5.5（最后的稳定版本）中，bootstrap.min.css是123KB，而在新的4.0.0alpha bootstrap.min.css 中只有88KB，值得庆祝。

2）有人反馈说dashboard主题并不是完完全全的响应式，比如在tables->order history中。

3）Bootstrap改成默认使用Sass，引起了广泛的讨论。

4）也有人表示，一个组织愿意放弃旧技术（不再支持IE8）用新技术（ES6）来重写库，值得尊敬。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 20分钟成功编写bootstrap响应式页面 就这么简单

    20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中

  • 论Bootstrap3和Foundation5网格系统的异同

    论Bootstrap3和Foundation5网格系统的异同

    Bootstrap和Foundation是我最喜欢的两个前端框架,尤其是在快速开发网站的原型上.它们都提供了随时可用的组件,加快了我的工作流程.除了一些细小差别,在我看来它们大部分的基本特征都是类似. 在这篇文章里,我将介绍它们网格的基本构造.首先,我将会向你展示它们是如何构建的,描述它们的主要部件,以及它们对不同屏幕的大小表现出的差异.然后,我将通过一个真实例子的实践来帮助你增添知识. 让我们一起开始吧! 比较一:媒体查询的比较 在分析Bootstrap和Foundation的栅格结构之前,让

  • 使用bootstrap3开发响应式网站

    使用bootstrap3开发响应式网站

    本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下 第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站. 下面就是本文的实例,具体代码: 时间线来自国外网站,使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position:

  • Bootstrap安装环境配置教程分享

    Bootstrap安装环境配置教程分享

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 一.下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. D

  • 学做Bootstrap的第一个页面

    学做Bootstrap的第一个页面

    本文实例分享了第一个Bootstrap页面的实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><!--为了确保适当的绘制和触屏

  • 20分钟打造属于你的Bootstrap站点

    20分钟打造属于你的Bootstrap站点

    本文的主要目的让你在20分钟内学会使用twitter bootstrap创建一个站点,如何建立站点,下文为大家介绍: 基本的HTML模板  .我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来.下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html. <!DOCTYPE html> <head> <title>Twitter Bootstrap Tutorial - A re

  • bootstrap3 兼容IE8浏览器！

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap都已经预先定义好了,当我们制作网页上,只需直接调用里面的css即可 bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式.IE8浏览

  • Bootstrap3制作自己的导航栏

    Bootstrap3制作自己的导航栏

    导航栏是一个很好的功能,是Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 role="

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

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

    Bootstrap 4的初始版已经发布很久,还是希望大家都可以认识到,这是对这个流行的(可能是最流行的)响应式CSS框架一次重大的彻底整修.该项目创始人,Mark Otto说这次的发布"几乎涉及每一行代码",这并不是在开玩笑. 1.更轻巧的文件大小  有这样一句话,"删掉的代码必定是已经调试过的代码,"--最好的重构一定会导致项目删除大量代码,迅速瘦身.如果你下载初始版本,那么你会发现,与最新的稳定版本Bootstrap 3(3.3.5)--约为123KB大小(bo

  • 开启BootStrap学习之旅

    开启BootStrap学习之旅

    本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习.这里有我对VS2013更新的简要介绍,有兴趣的话你可以看一眼Visual Studio 2013更新内容简介 bootstrap深受广大屌丝喜爱的原因到底是什么呢 1.

随机推荐