BootStrap 4正式版发布(原文翻译)
原文链接:http://blog.getbootstrap.com/2018/01/18/bootstrap-4/
关于Bootstrap
什么是Bootstrap
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Why Bootstrap
- 浏览器支持:基本支持大部分现代浏览器,不是IE6,是现代浏览器
- 响应式设计:自适应不同屏幕,包括该台式机、平板电脑和手机等
- 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
- 容易上手:首先它是开源的,并且有全面的文档,有庞大的用户群提供各种定制的样式主题等,最重要的是后台硬,强大的团队在一直维护和修复发现的问题。(很多国产项目做的很优秀,但是优秀优秀最后就消失了。很大原因是没有人维护和更新)
现在网上有很多基于Bootstrap的教程以及文档翻译,中文资料相对来说比较健全,同时基于Bootstrap设计的产品也有很多,很多插件也都有针对Bootstrap的主题资源提供,Bootstrap自己本身也支持定制化,基于Saas进行css文件构建,可以在官网针对需求进行定制化的生成和下载。
版本延续
Bootstrap之前有过三个版本,现在流传比较多得是V3.x版本,与v2.x版本相比,3这个版本对部分老旧浏览的兼容性处理已经被剔除(IE9一下等),与2018你那1月18日,官网发布了Bootstrap 4正式版,官方公告上可以看到v4针对之前又有了很多调整和改变。下文为v4版本的发布公告,使用google加上个人理解整理了一下,大家可以参考一下。英文好的可以直接看原文文档,文章开始有链接。
Bootstrap 4
这真的需要我们多年的努力,但Bootstrap 4终于来了!言语已经不能表达整个团队和我为这个版本发布所感到的兴奋,但我会尽我所能。感谢所有人,特别是团队成员,以及所有贡献代码和提出Issue的人。谢谢。
自从我们上一个测试版本以来,我们一直在努力稳定我们的CSS的几个关键部分,完善我们的文档,为它添加一些额外的惊喜功能,并计划我们的后续版本。我们仍然有一些问题需要解决,但没有什么会阻止我们发布稳定的版本。
急于体验一下吗?转到我们的文档站点并进行探索。请务必查看我们的新示例和迁移文档页面!
想要点击文档之前知道更多?太好了,开始!
新内容
自从上一次测试以来,没有发生重大改变,但我们已经做出了一些关键的改进,并解决了一些棘手的错误。
-
打印样式和实用程序类已更新。我们改进了打印页面的渲染方式,以确保页面尺寸合理,而不是将其渲染为移动设备。打印显示实用程序还包括一系列新
display
值,以匹配我们的标准显示实用程序。 -
额外的border设置功能已添加(例如
.border-top
),默认为1px的浅灰色边框。现在,为组件添加所有边框或者某些边框变得更加容易。 -
我们
$spacers
和$sizes
萨斯地图已经更新,以允许更多的定制与我们的色彩地图工作相同的方式。您现在可以在CSS中一致地添加,删除或替换所有键值对。前往我们的主题文档了解更多信息和示例。 -
为我们的Theming文档添加了文档,使用我们提供的CSS变量来生活在边缘,而不想使用Sass。
-
增加了对flexbox网格进行更多控制的响应
.order-0
和.order-last
类。
另外,我们对重用和扩展变量和一般的代码清理做了大量的改进。但是,这还不是全部。
新的例子
几乎每个例子在v4正式版本的都进行了调整。我们删除了一些过时的例子,添加了一些新的例子,并且彻底改变了其他一些例子。
以下是对每个更改的简要说明:
-
您可能已经看过我们的相册示例,但是已经为此版本进行了更新,以在照片卡中添加更多内容并改进了移动渲染。
-
定价列表是这个版本的全新功能,是一个完全自定义的页面,使用我们的实用程序和卡组件构建。它的响应速度和容易扩展。
-
付款表单是一个全新的,很通用的例子,用到了表单布局、表单验证样式,栅栏系统等等。
-
产品列表也是新的,仿苹果风格的营销页面的,使用了我们大部分utility。不要太认真!
-
博客模板已经从头改写了。抛弃了原来的蓝色头部两列的布局方式。我们已经建立了一个精采的帖子和响应导航杂志式的布局。
-
浮动标签是全新的,并以我们的登录示例为基础,提供仅CSS实现浮动输入标签(placeholder固定在输入框内)。这是个实验,我们把它带到Bootstrap之前可能会看到重大变化。
-
Finally, Offcanvas has been rewritten from the ground up to show off a navbar-built drawer, horizontal scrolling navigation, and some custom lists built on media object and utilities.
封面,传送带,登录和我们的框架示例只进行了一些小的更新,以提高代码质量和修复一些小的错误。总的来说,这是我们的代码示例的一次大的更新,我很高兴添加这些并在未来的迭代版本中添加更多。
引导文档(应该是这个意思,就是原来那个一步一步介绍的文档)
v4稳定版的新功能简要介绍了为什么我们要在Bootstrap中做的事情。我们的目的是在编写代码,构建短消息和调试时提炼和记录我们头脑中所有的事情。其中大部分内容都集中在编写响应式CSS的概念和策略上,使用简单的选择器以及限制需要编写多少JavaScript。
检查新的引导文档,如果碰到什么问题或建议反馈或者缺少什么请及时反馈给我们。
已知的问题
没有哪次发布能修复每一个bug,这一点对我们的v4稳定版本同样有效。在时间和范围允许的情况下,我们希望首先在次要版本(v4.1)或修补程序版本(v4.0.1)中解决一些问题。
-
输入组,验证和圆角。我重写了Beta 3的内容,但我认为它是错误的。我们有一些圆角的问题,我们可以用CSS修复它们而不破坏向后兼容性的唯一方法是限制组件的可扩展性。我们可能需要一个修饰符类来避免一些粗糙的CSS,并满足所有的关键功能。查看问题和交叉链接的公关了解更多详情。
-
特别是表变形,
.table-active
有一个怪异的选择,我们已经无意间留下来,因为以前的版本。该缺陷导致的双重应用rgba()
背景颜色 -once为<tr>
,一次用于任何<td>
/<th>
内的元件。
我们的第一个补丁版本还有一些还没有确定或者确定的问题,但是在我们下一个小版本发布之前,我们预计会有一些问题得到解决。我们可能还会在下一个补丁版本中打包我们的存储库的缺省分支变更。我们没有时间去适应测试一个巨大的不同代码库的合并,而没有考虑到v3的整个Git历史。再次,更多。
下一个版本
说到发布,我们对于我们的发展势头感到非常兴奋。我们的GitHub项目板在即将发布的版本中大部分都是最新的,所以请随时加入并观看。我们的下一个版本将是v4.1(等待任何bug修补程序),并将重点介绍一些小的新功能,实用程序,响应字体大小等等。从那里我们有更多的次要版本围绕另一组功能集合。
我们的目标是根据整体范围使RTL成为即将发布的次要版本的一部分。我们花了很长的时间去做这件事,但是我们正在努力。我们目前的计划是把重点放在我们的构建工具和组件上,所以你有条件的服务,bootstrap.min.css
或者bootstrap-rtl.min.css
。在公开的问题上请提供任何反馈意见; 当我们准备好的时候,我们会在社区的帮助下发起新的拉动请求。
值得重申的是每个次要版本都会带来一个新的托管版本的文档。现在,我们已经getbootstrap.com/docs/4.0/
发布了v4.1,我们会有这个补充getbootstrap.com/docs/4.1/
。之前的版本将继续从我们的导航链接,已经是v3.x和最后的v4 alpha的情况。
主题更新
引导主题今年得到重大更新!自从我们最初推出Bootstrap Themes以来,我们一直非常激动,我们终于准备好分享下一步的计划。
在过去的几个月中,我们一直在与一些令人惊叹的主题创作者合作,将他们的精彩作品带到Official Bootstrap Themes商店。我们不能更兴奋地宣布我们正在扩大Bootstrap主题,以包括十个全新的主题。我们目前的目标是第一季度推出的主题都建立在Bootstrap 4上(对不起,这些都没有v3)。根据最终评论,我们甚至可能在未来几周内让他们到你们身边。
Bootstrap的广泛性和实用性直接来自世界各地的设计师,开发人员和创作者,使用Bootstrap构建业务。我们希望利用我们的平台为这些创作者提供更多的观众,并为您提供最好的Bootstrap团队认可的主题。
随时准备发布,敬请关注更多信息。
谢谢
最后,最后要感谢所有为Bootstrap 4做出贡献的人。这是一个疯狂的旅程,我个人感到放心,兴奋,急于称它为稳定。自从我们在2015年首次开始工作以来,已经有大约6,000次提交到第4版。我们已经走了太多的方向,重写了太多的东西,但是我非常高兴和幸运。 。
再次欢呼每一个对Bootstrap有贡献和建立的人。能够为您和所有人共同构建这些工具是一种荣幸。
V3到V4迁移注意:
浏览器支持
- IE10+
- IOS 7+
- Android 5.0 Lollipop’s Browser and WebView.
全局变化
- Flexbox默认启用
- 源文件管理从Less切到了Sass
- css单位由px切换到rem
- 全局字体从14px变成了16px
- 栅格系统做了调整,添加了一个超小屏幕适配,媒体查询宽度临界点分别为576、768、992、1200;(v3为768、992、1200),对比v3将超小由col-xs-的替换成了col-,增加了一个超大col-xl-。
发现有好多啊,来项目了,先不写了
原文地址如下:https://getbootstrap.com/docs/4.0/migration/
自己先看着