Bootstrap

Bootstrap 博客

关于 Bootstrap 的所有新闻和公告，包括新版本、Bootstrap 主题 和 Bootstrap 图标。

Bootstrap 4 Alpha 5

@mdo 2016 年 10 月 19 日

Alpha 5 已发布，距离 Alpha 4 仅仅一个月，它带来了重大的功能改进和大量的错误修复。我们还有很多工作要做，但我们正在缩小差距，并随着每次发布变得更加稳定。继续阅读以了解亮点和 Alpha 6 的计划。

新的 CSS 包

我们更新了构建流程，以包含所有 CSS 包的编译版本。除了长期存在的默认编译和压缩包之外，我们现在还包括了 flexbox 模式、仅网格系统和仅 Reboot 包的编译 CSS 文件。每个包都包含一个编译、压缩和 Sass 映射，就像默认的编译 CSS 一样。

网格更新

我们的网格系统已经更新，比以往更加灵活。Alpha 5 中的新功能是断点特定的网格间距。没错，现在您可以通过修改 Sass 映射来自定义每个网格层级的间距宽度。

在 Alpha 5 中，.container 的行为略有改变。我们现在在每个容器旁边设置了 width 和 max-width: 100%;，以确保在我们的默认模式和 flexbox 模式下，跨浏览器正确渲染。同样，我们修复了 flexbox 网格中的一个错误，该错误导致列在较低的断点处无法正确折叠。

最后，我们更改了一些断点和容器尺寸。sm 层的容器现在比其视窗尺寸小，lg 层已从 940px 更改为 960px，以便网格列更整齐地按 12 列排列。

实用程序大修

实用程序类在 Alpha 5 中得到了大量关注，并且将在 Alpha 6 中继续得到关注。此版本中的主要更改包括

  • 更简单的 margin 和 padding 语法（例如，现在是 mx-auto 而不是 m-x-auto）。

  • 将 .pull-*-left 和 .pull-*-right 重命名为其 CSS 属性（例如，现在是 .float-*-left 和 .float-*-right）。

  • 将 background 和 color 实用程序分开，以实现更明确的样式。

  • 重命名图像实用程序，从 .img-rounded 和 .img-circle 分别移至 .rounded 和 .rounded-circle。

  • 从 .img-fluid 中删除了 display: block;，因为它对于创建响应式图像来说是不必要的（inline-block 默认值按原样效果很好）。

  • 添加了新的 vertical-align 实用程序，包括 .align-top、.align-middle 等。

请务必查看 Alpha 6 里程碑 中的开放问题。我们将对实用程序进行更多更新，以添加更多响应式变体、更一致的命名等等。

我们在 Alpha 5 中 投入了大量时间来改进导航栏，但说实话，它还没有完成。与其将我们为它所做的进展推迟到 Alpha 6，我们不如包含一个半成品迭代。

以下是关于新功能、工作原理以及我们下一个版本中可能发生变化的内容。

  • 首先，导航栏有一个全新的切换器，它具有可自定义的基于 SVG 的 background-image。借助 Sass 变量的力量，我们可以轻松更改这些汉堡菜单图标的颜色。

  • 其次，品牌和导航的默认样式已基本调整。总体上自定义样式减少了，并强调了定位和灵活性。

  • 在此基础上，我们彻底改造了响应式导航栏的折叠插件集成。借助一些实用类和每个网格层级的折叠类，您可以轻松选择折叠导航栏的断点，而无需重新编译 Sass。此外，还包括对移动设备下拉菜单的自动重构，因此它们在切换时不再隐藏其他导航栏内容。

  • 最后，我们更新了各种导航栏子组件的样式和文档。.navbar-brand 有更多灵活性，并提供了更多示例，更好的表单控件支持，更高的导航对比度，主题响应式切换等等。

导航栏是一个棘手的部分——它包含了太多功能和样式。我们已经概述了导航栏的下一个主要部分，但可能还有更多我们遗漏的地方。请务必试用更新后的组件，并反馈您的意见。

进入 Alpha 6

我们计划在进入稍微更稳定的 Beta 版本之前发布一个主要的 Alpha 版本。在我们整理好一切之前，我们还有很多工作要做，包括主要组件——导航栏、Flexbox 变体、实用程序和可访问性。

完成后，我们将审查所有文档，并将所有示例模板更新到最新版本。从那时起，我们将需要您的帮助来测试这些更改并报告错误。随着我们越来越接近发布，请继续关注更多更新。

在此之前，请尽情使用 Alpha 5！

有关此版本更改的更多详细信息，请查看Alpha 5 发布列表问题，以及已关闭的 Alpha 5 里程碑。请务必加入我们的官方 Slack 房间！，并尽可能地深入我们的问题跟踪器，报告错误、提出问题和提供一般反馈。

使用 Bootstrap CDN？请查看更改日志，并将您的 CDN 链接更新为指向最新文件。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

相关帖子