5分钟学会Bootstrap 4

图片来源。

去年，Bootstrap 4（又名 v4）终于在 Alpha 测试版发布两年多后正式发布。它代表着一次重大的重写。它不仅在底层进行了大量改进，而且还引入了一些需要您深入理解的新概念。

因此，在本教程中，我将讲解 Bootstrap v3 到 v4 最重要的变化，以防您尚未花时间深入了解。我假设您之前使用过 Bootstrap，因此我不会讲解基础知识。

您还可以在 Scrimba 上查看我们关于 Bootstrap 4 的免费课程。

想学习 Bootstrap 4 吗？这里有我们免费的 10 部分课程。复活节快乐！

现在让我们来看看最重要的变化（无特定顺序）：

#1：扁平按钮

让我们先来一个有趣又直观的版本！v4 中的按钮设计比 v3 中的更扁平。以下是之前的按钮：

以下是一些新内容：

这更符合更现代的设计指南，例如过去几年中非常流行的Material Design中的设计指南。

#2：媒体查询更好

在我看来，Bootstrap v3 的网格断点太少了，最低的断点xs也只有 768 像素。很多流量通常来自比这更窄的屏幕，所以这让很多开发者很郁闷。

所以现在他们添加了一个新的断点xl。这个断点承担了以前的角色lg，并将其余断点向下推，使范围一直下降到576 像素。

$grid-breakpoints: (  xs: 0,  sm: 576px,  md: 768px,  lg: 992px,  xl: 1200px) !default;

这使得您可以更轻松地构建适用于所有屏幕尺寸的网格。

#3：Flexbox 支持为您提供更多灵活性

著名的 Bootstrap 网格现在使用 Flexbox 而不是浮动来创建。乍一看，这对开发者来说并没有太大的区别，因为大多数网格布局的工作原理完全相同。然而，它确实开辟了更多的可能性。

以前，您必须定义每列的宽度（从 1 到 12）。现在，您可以定义一列的宽度，然后让 Flexbox 自动设置其他列的宽度。

下面是一个具体的例子：

正如您在下面的标记中看到的，我们仅将中间列的宽度设置为 6（等于全宽的一半），然后其余列将占用剩余的空间。

<div class="container">  
  <div class="row">    
    <div class="col">1 of 3</div>
    <div class="col-6">2 of 3 (wider)</div>    
    <div class="col">3 of 3</div>  
  </div>
</div>

Flexbox 类

Bootstrap 4 还附带了许多类，可用于控制 Flexbox 容器和项目。要将元素转换为 Flexbox 容器，只需为其添加 类即可d-flex。

<div class="d-flex">I'm a flexbox container!</div>

这将为您提供一个包含文本的 Flexbox 容器：

注意：我在这里只提到与 Flexbox 相关的样式。

我们还添加一些项目，并添加另一个类来控制它们在容器中的位置。

<div class="d-flex `justify-content-center"`">  
  <div>Flex item</div>  
  <div>Flex item</div>  
  <div>Flex item</div>  
</div>

这使得物品位于容器的中心：

您还可以为项目本身添加类。查看文档中的Flex 部分了解更多信息。

#4：使用类控制间距

这个很酷。现在你可以使用p-*和m-*类来控制填充和边距。范围从 0.25 rem 到 3 rem，通过应用 0 到 5 之间的数字来实现。

例如，让我们为 Flexbox 容器提供一个p-5类，以便创建尽可能多的填充：

<div class="d-flex p-5">I'm a flexbox container!</div>

它看起来是这样的：

如果您希望在特定侧面（顶部、底部、右侧、左侧）留出间距，还可以添加t、b、rog l，如下所示：

<div class="d-flex pl-5">I'm a flexbox container!</div>

这只会在左侧添加填充，如下所示：

注意：原始 flexbox 容器实际上_p-2_默认有一个类。

#5：从像素到 Rems

Bootstrap 4 已将除媒体查询和网格行为之外的所有位置的像素替换为相对测量单位 (rem)。这意味着更高的灵活性和响应速度，因为 rem 单位不是绝对的，而像素是。

所有字体大小都是rems相对于根元素（html标签）的，默认情况下，1rem它们相等16px。但是，如果你将根元素的字体大小更改为 50%，那么整个应用程序的字体1rem大小都将相等。8px

请注意，此开关并不意味着您rems在网站上应用自己的样式时需要使用。

#6：卡片取代面板、井和缩略图

Bootstrap 还附带一个全新的组件，称为卡片，用于取代面板、井和缩略图。卡片是一种灵活且可扩展的内容容器。它包含页眉和页脚选项、丰富的内容、上下文背景颜色以及强大的显示选项。

#7：再见 IE9

Bootstrap v4 已不再支持 IE8、IE9 和 iOS 6。v4 现在仅支持 IE10+ 和 iOS 7+。对于需要上述任一版本的网站，请使用 v3。

当然，还有更多的变化没有包含在这篇文章中，因此请查看文档中的迁移部分以查看所有变化。

最后，如果您想正确学习 Bootstrap v4，请务必查看我们关于 Scrimba 的免费课程。

此外，当您读到这里时，欢迎随时通过 Twitter 与我联系：

感谢阅读！我叫 Per，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想及时收到新文章和资源的通知，请在Twitter上关注我。