千呼万唤始出来 —— Bootstrap 4 正式发布!新网站、新文档、新主题

这真的需要我们多年的努力, 但 Bootstrap 4 终于来了! 语言已经开始无法描述整个团队和我为这个版本所感到的兴奋, 但我会尽我所能. 感谢所有人, 特别是团队成员们, 以及所有那些在 Pull Request(PR) 中贡献代码或者提交了 issue 的每一个人. 谢谢你们.

自我们上一个 beta 版本以来, 我们一直在努力稳定我们 CSS 的几个关键部分, 打磨我们的文档, 增加一些额外的惊喜, 并计划我们的后续版本. 我们依然有一些问题需要解决,但没有什么会阻止我们发布稳定的版本.

跃跃欲试? 转到我们的官方文档 并且浏览. 请务必阅读我们的 新示例 以及 迁移文档页面!

想要阅读文档之前了解更多? 太棒了, 上车!

什么是新?

自从上一次测试以来,没有发生重大改变,但我们已经做出了一些关键的改进,并解决了一些棘手的错误。

  • 打印样式和实用程序类已更新。我们改进了打印页面的渲染方式,以确保页面尺寸合理,而不是将其渲染为移动设备。打印显示实用程序还包括一个新的 display 值,以匹配我们的标准显示实用程序。

  • 添加了边界工具(例如 .border-top ),默认为 1px 的浅灰色边框。现在,将元素的所有边框或边框的子集快速添加到组件中会更加容易。

  • 我们的 $spacers$sizes Sass 地图已经更新,可以像我们的彩色地图一样进行更多的定制。您现在可以在CSS中一致地添加,删除或替换所有键值对。 请访问我们的主题文档了解更多信息和示例。

  • 为我们的主题文档添加文档,使用我们提供的 CSS 变量为那些生活在边缘,不要想要使用Sass。

  • 增加了响应式 .order-0.order-last 类,以更好地控制 flexbox 网格。

另外,我们对重用和扩展变量和一般的代码清理做了大量的改进。但是,这还不是全部。

新的例子

稳定的v4版本中的几乎每个例子都经过了彻底的修改。 我们删除了一些过时的示例并添加了一些新的示例,并且彻底修改了一些示例。

Bootstrap examples

Here's the rundown of changes to each:

  • You've likely already seen our Album example, but it's been updated for this release to include more content in our photo cards and improved mobile rendering.

  • Pricing is brand new with this release and is a fully custom page built with our utilities and card components. It's responsive and easily extended.

  • Checkout is a brand new, extensive form example featuring all the best parts of our form layouts, validation styles, grid, and more.

  • Product is also new and is a cheeky riff on Apple-style marketing pages, largely built with only our utility classes. Don't take it too seriously!

  • Blog has been rewritten from the ground up. Gone is the two column blue header layout. We've built a snarky magazine-style layout with featured posts and responsive navigation.

  • Dashboard has been overhauled as well to feature a live ChartJS example, includes a refreshed sidebar with Feather icons, and is semi-responsive.

  • Floating labels is brand new and builds on our sign-in example to provide a CSS-only implementation of the floating input label. This one's experimental and may see major changes before we bring it to Bootstrap proper.

  • 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 component and utilities.

CoverCarouselSign-in, and our framework examples only saw minor updates to improve code quality and fix a few smaller bugs. Overall this was a huge update for our examples and I'm excited to iterate on these and add more in future releases.

记录我们的思路

新的稳定版本 v4 是对我们在 Bootstrap 中做的事情的一些指导原则的简要提现。我们的目的是在编写代码、构建linters和调试的同时,将所有在我们头脑中思考的东西都保存并记录下来。这些思考大部分内容都集中在编写响应式CSS的概念和策略,如何使用简单的选择器,以及编写更少的 JavaScript。

点击查看新详情页面,如果你需要反馈意见和建议,请创建一个 issue 并且提一个 pull request 。

已知的问题

没有任何版本可以修复所有 bug,对于我们的 v4 稳定版本来说也是如此。这里有一些我们希望在小版本(v4.1)或补丁(v4.0.1)中首先解决的问题,如果时间和范围允许的话。

  • 输入框组,数据验证,圆角 。在 Beta3 中我重构了这几个,我当时以为那已经很好了,但是我错了。这里面有一些圆角的问题,我们可以用 CSS 修复它们而不破坏向后兼容性的唯一方法就是限制组件的可扩展性。我们可能需要一个修饰符类来避免一些粗糙的CSS,并满足所有的关键功能。你可以查看 issue 和 PR 了解更多详情。

  • 表格,特别是 .table-active,这是一个很奇葩的选择器,我们无意间在发布之前遗留下了这个问题。该错误导致  rgba() 背景色在双应用下的问题 - 可能会出现在 <tr>中,也可能是 <td> 或者 <th> 中。

我们的第一个补丁版本中还有一些没有确定或者定义的问题,但是在我们下一个次要版本发布之前,估计会有一些修补程序要发布。我们可能还会在下一个补丁版本中打包我们的 repository 中默认分支变更的部分。考虑到v3的整个版本历史,我们没有时间去测试合并一个巨大的不同代码库的各种分支。最后一句,很多东西很快就来。

下个版本

说到发布, 我们对于我们的发展势头感到兴奋. 我们的GitHub project boards 在即将到来的版本中大部分是最新的, 所以可以随便进去看一看. 我们的下一个版本将是 v4.1(等待任何bug修补程序)并将重点关注一些小的新功能, 实用程序,响应字体大小等等. 从那里我们可以看到更多的小版本,它们围绕着另一组特性。

我们的目标是根据整体范围使RTL成为即将发布的次要版本的一部分.我们花了很长的时间去做这件事, 但是我们正在努力. 我们目前的计划主要是在我们的构建工具和组件中实现这一点因此您可以有条件地服务, 例如, bootstrap.min.css 或者 bootstrap-rtl.min.css. 在公开的问题上请提供任何反馈意见; 当我们准备好了,我们会在社区的帮助下,提交一个新的 pull 请求。.

值得重申的是每个次要版本都会带来一个新的托管版本的文档。 现在, 我们有了 getbootstrap.com/docs/4.0/和 come v4.1's release, 我们会加上 getbootstrap.com/docs/4.1/. 之前我们已经存在的 v3.x 和 v4 alpha 文档链接将会继续停留在我们的导航链接中。

主题升级

Bootstrap Themes在今年有了重大的变动!自从我们最初推出Bootstrap以来,我们一直非常激动,现在终于可以分享我们下一步的计划了

在过去的几个月中,我们一直在与一些很了不起的主题的作者合作,将他们的精彩作品带到官方的 Bootstrap Themes商店。我们很开心的宣布我们正在扩展Bootstrap主题,包括十个全新的主题。我们目前准备把第一季度推出的主题都建立在Bootstrap 4上(十分抱歉,这些不包括V3)。根据以后的评价,我们可能在未来几周内就让他们到你们身边。

Bootstrap的广泛性和实用性直接发来自世界各地的设计师、开发人员和创作者们使用Bootstrap来构建他们的项目。 我们希望利用我们的平台为这些主题创作者提供更多的用户,为您展示出Bootstrap团队认为不错的主题。

我们随时准备发布,敬请关注以后更多的信息。

Thank you

最后,在最后要感谢所有为Bootstrap 4做出贡献的人。这是一个疯狂的旅程,我对这次的版本很放心,并且急于表示她很稳定。自从我们从2015年首次开始工作以来,已经有大约6000次代码提交到第四版,我们走了很多弯路,重写了很多东西,但我们依旧很幸运。

再次感谢每一个对Bootstrap有贡献的人。 能够为您和所有人共同构建此框架是一种荣幸。
<3
@mdo & team

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://blog.getbootstrap.com/2018/01/18...

译文地址:https://learnku.com/laravel/t/7544/time-...

本帖已被设为精华帖!
本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 9
巴啦啦

要大家是能把 bootstrap-v4 的文档翻译出来就好了

6年前 评论
阿麦

@仰望 http://code.z01.com/v4/ 已经有人翻译过了

6年前 评论

希望 Bootstrap 4 可以拯救我越写越难看的毛病

6年前 评论

看了下,新东西不多,多了个card,其他都是排版方面的

6年前 评论
Kurisu

what's new 翻译成 什么是新。。。。。。。。

6年前 评论

:neutral_face: 通过文档知道现在的栈格是基于 flex 布局构建的
但是之前项目中使用 flex 布局发现兼容性还是比较难受的
然后就用 bootstrap3 重构了,再也不敢用 flex

5年前 评论

@韩槑槑 只要不是用该死的IE基本都兼容了 当然也有兼容方案引入js解决

5年前 评论

感觉4没给老用户多大希望啊

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!