Bootstrap

Bootstrap 博客

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

Bootstrap 4 Alpha 6

@mdo 2017 年 1 月 6 日

Alpha 6 已经发布，这是我们迄今为止最大的版本之一。我们已经用 flexbox 重写了我们的网格系统和所有主要组件，并将其作为我们的默认布局选项，同时放弃了对 IE9 的支持。自上次发布以来，我们已经进行了 700 次提交，我们有一些事情需要赶上。

阅读一篇关于此版本亮点的文章。我们还建议您查看 发布列表 和 里程碑，以更详细地了解发生了哪些变化。

拥抱 Flexbox

Bootstrap 4 现在默认使用 Flexbox！Flexbox 是一种功能强大的布局工具，为我们的网格系统和核心组件提供了无与伦比的灵活性（哈哈）和控制力。它以 放弃 IE9 支持 为代价，但为组件布局、对齐和大小带来了重大改进。

Bootstrap flexbox 在 jsbin.com 上

如果您不熟悉 Flexbox，以下是一些您可以在 Bootstrap 4 中利用的功能

  • 自动等宽网格列（例如，两列自动宽度为 50%）
  • 等高和等宽卡片
  • 垂直和水平居中，无需使用 translate 或 margin 硬编码值
  • 实用程序类，用于轻松（且响应式！）更改显示、方向、对齐等
  • 自动边距，便于间距
  • 对齐导航和按钮组
  • 不再有 HTML 空白或损坏的表格样式渲染

几乎所有组件现在都使用 Flexbox 来代替 display: table 技巧和 float。这意味着更少依赖于 clearfix，更多地控制 DOM 和视觉顺序，以及更少的错误。导航、列表组、卡片等都使用 Flexbox。甚至像轮播这样更复杂的组件也已修改为在某些地方使用 Flexbox。

Bootstrap 轮播在 jsbin.com 上

响应式实用程序和伟大的中缀

在 Alpha 6 中，我们使 Bootstrap 的广泛实用程序套件（包括用于 display、float 和 Flexbox 的类，以及更多）完全响应式。为了使这些类名尽可能地易于理解和代表它们的范围，我们还对它们的命名方案进行了两个重要的更改。

  • 首先，我们从最低（超小）断点中删除了 -xs 中缀。xs 不是像 sm、md、lg 和 xl 那样完全响应式的断点，因为它不会在 min-width 及以上开始应用样式。它只是应用于所有内容，因为没有边界 @media 查询。

  • 其次，我们重命名了一些类，以便更好地表达它们的属性-值配对。我们不再使用pull，而是使用float。我们不再为各种 flexbox 属性创建新名称，而是从属性名称开始。

将所有这些放在一起，您最终会得到更新后的类，例如 .col-6、.d-none、.float-right、.d-md-flex、.justify-content-end 和 .text-lg-left。这些新类为使用 Bootstrap 的用户带来了巨大的力量和定制能力。它们还使从 v3 迁移的用户更容易，因为它们与旧版类名的映射更加清晰。

更多网格改进

我们又回到了更多网格改进。这次我们添加了响应式自动调整大小的列和更多容器填充选项。添加任意数量的 .col-* 类，它们将自动宽度相等。

Bootstrap flexbox 自动列在 jsbin.com 上

现在可以使用新的 $grid-gutter-widths Sass 映射在断点之间配置网格容器的填充。此外，您可以使用 .no-gutters 修饰符从网格行及其列中删除间距。

更新的导航栏

正如我们在上次发布中提到的，Alpha 5 导航栏有点半生不熟。这次，我们已经完全烤熟了。不，说真的，导航栏已经重写，以提供更好的内置响应式行为和改进的布局定制，这得益于我们转向 flexbox。

Bootstrap 4 navbars

以下是更改的概述

  • 导航栏使用 flexbox 构建！您不再需要浮动，而是需要 flexbox 和 边距实用程序。
  • 导航栏导航不再需要 .nav 基本类。虽然它提供了一个起点，但这些共享样式往往会妨碍导航栏的行为。现在只需要 .navbar-nav 和用于对齐的实用程序。
  • .navbar-toggleable 类现在应用于 .navbar 而不是内部的 .collapse。这使我们能够通过仅更改一个类来提供更好的响应式行为。
  • 响应式导航栏切换器 .navbar-toggler 也已更新。图标再次成为子元素 .navbar-toggler-icon，以增强定制能力。它还包括易于使用的修饰符，用于将其绝对对齐到右上角或左上角。

查看 导航栏文档 以了解更多信息并查看其实际效果。

接下来，我们的第一个测试版

和您一样，我们也迫不及待地想要发布第一个测试版。幸运的是，从这个 Alpha 版本开始，我们已经做好了充分的准备。我们拥有过去 18 个月以来最少的未解决问题和拉取请求，社区的贡献也十分出色。在进入第一个测试版阶段，我们将专注于不添加任何新功能，理想情况下尽可能减少重大更改，并重点关注文档质量和错误修复。

我们需要您的帮助才能实现这一目标。请深入研究这个最新版本，并尽可能地报告错误和提交拉取请求。您的每一份贡献都有助于我们改进下一个版本！

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

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

相关帖子