bootstrap快速入门_在5分钟内学习Bootstrap 4-快速入门指南

bootstrap快速入门

了解世界上最受欢迎的前端组件库的最新版本。 (Get to know the newest version of the worlds most popular front-end component library.)

In January 2018, Bootstrap 4 (aka v4) finally got released after being in alpha for over two years. It represents a major rewrite. Not only are there a lot of changes under the hood, but there are also a few new concepts you’ll need to wrap your head around.

2018年1月，Bootstrap 4(aka v4)在发布Alpha版本超过两年后终于发布了。 它代表主要的重写。 不仅要进行很多更改，而且还需要一些新概念来解决问题。

So in this tutorial, I’m going to explain the most important changes from Bootstrap v3 to v4. I’m assuming that you’ve used Bootstrap previously, so I won’t explain the basics.

因此，在本教程中，我将解释从Bootstrap v3到v4的最重要更改。 我假设您以前使用过Bootstrap，所以我将不介绍基础知识。

You can also check out our free course on Bootstrap 4 on Scrimba.

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

Want to learn Bootstrap 4? Here’s our free 10-part course. Happy Easter!

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

Now let’s have a look at the most important changes (in no particular order):

现在，让我们看一下最重要的更改(无特定顺序)：

1：更扁平的按钮 (1: Flatter buttons)

Let’s begin with a fun and visual one! The buttons in v4 have a flatter design than they did in v3. Here are the previous buttons:

让我们从有趣和视觉化的视频开始吧！ v4中的按钮比v3中的按钮具有更扁平的设计。 以下是先前的按钮：

And here are some of the new ones:

这是一些新的：

This is more in line with more modern design guidelines like those found in Material Design, which has become hugely popular in the last couple of years.

这与更现代的设计指南(例如Material Design中的指南)更加吻合，该指南在最近几年变得非常流行。

2：媒体查询更好 (2: The media queries are better)

Bootstrap v3 had too few breakpoints for its grid, in my opinion, as the lowest one, xs, was at 768 px. A lot of traffic usually comes from screens narrower than that, so this has been frustrating for many developers.

我认为Bootstrap v3的网格断点太少，因为最低的xs为768 px。 通常，许多流量来自比此窄的屏幕，因此，这使许多开发人员感到沮丧。

So now they’ve added a new breakpoint, xl. This one takes the role lg used to have, and pushes the rest of the breakpoints downwards, making the range go all the way down to 576 px.

因此，现在他们添加了一个新的断点xl 。 这个角色扮演了lg过去的角色，并将其余的断点向下推，使范围一直下降到576 px 。

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

This makes it easier for you to construct grids which work well across all screen sizes.

这使您更容易构造在所有屏幕尺寸上都能正常工作的网格。

3：Flexbox支持使您更具灵活性 (3: Flexbox support gives you more flexibility)

The famous Bootstrap grids are now created with Flexbox instead of floats. At first sight, this doesn’t make a huge difference for you as a developer, as most grid layouts work exactly the same. However, it does open up a few more possibilities.

现在使用Flexbox而不是float来创建著名的Bootstrap网格。 乍一看，这对您作为开发人员而言并没有太大的区别，因为大多数网格布局的工作原理完全相同。 但是，它确实提供了更多的可能性。

Previously, you had to define the width of each column (from 1 to 12). Now you can define the width of one column, and then let the other ones be automatically set by Flexbox.

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

Here’s an example of doing exactly that:

这是一个执行此操作的示例：

As you can see in the markup below, we’re only setting the width of the middle column to be 6 (which equals half of the full width) and then the rest of the columns will simply take up whatever space remains.

如您在下面的标记中看到的，我们仅将中间列的宽度设置为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类 (Flexbox classes)

Bootstrap 4 also comes with a bunch of classes you can apply to control both Flexbox containers and items. To turn an element into a Flexbox container, simply give it the class of d-flex.

Bootstrap 4还附带了一堆类，您可以应用这些类来控制Flexbox容器和项目。 要将元素转换为Flexbox容器，只需为其提供d-flex类。

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

Which will give you a Flexbox container with text inside it:

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

Note: I’m only mentioning the Flexbox related styles here.

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

Let’s also add a few items, and add another class to control how they’ll position themselves in the container.

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

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

Which makes the items centre themselves in the container:

这使得物品在容器中居中：

You can also add classes on the items themselves. Check the Flex section in the docs to learn more about that.

您还可以在项目本身上添加类。 查看文档中的“ Flex”部分 ，以了解有关此内容的更多信息。

4：使用类控制间距 (4: Control spacing with classes)

This one is pretty cool. You can now control the padding and margins using the p-* and m-* classes. The range goes from 0.25 rem to 3 rem through applying the numbers from 0 to 5.

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

For example, let’s give our Flexbox container a p-5 class, in order to create as much padding as possible:

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

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

Here’s how that will look:

外观如下：

You can also add t, b, r og l if you want spacing on specific sides (top, bottom, right, left), like this:

如果要在特定边(上，下，右，左)上留出间距，也可以添加t ， b ， r og l ，如下所示：

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

That will only add padding on the left side, like this:

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

Note: the original flexbox container actually had a _p-2_ class by default.

注意：默认情况下，原始的flexbox容器实际上具有_p-2_类。

5：从像素到Rems (5: From pixels to rems)

Bootstrap 4 has swapped out pixels with relative units of measurements (rems) in all places except media queries and grid behaviours. This means more flexibility and responsiveness, as rem units aren’t absolute, which pixels are.

Bootstrap 4已在除媒体查询和网格行为之外的所有位置交换了具有相对度量单位(rems)的像素。 这意味着更大的灵活性和响应能力，因为rem单位不是绝对的，而是像素。

With rems all font sizes are relative to the root element (the html tag), and by default, 1rem equals 16px. However, if you change the font-size to, say, 50% in the root element, then 1rem will equal 8px throughout the app.

对于rems所有字体大小rems对于根元素( html标记)，默认情况下1rem等于16px 。 但是，如果将根元素的字体大小更改为50％，则整个应用程序中1rem将等于8px 。

Note that this switch doesn’t mean that you need to use rems when you’re applying your own styles on your website.

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

6：卡片取代面板，Kong和缩略图 (6: Cards replace panels, wells, and thumbnails)

Bootstrap also comes with a whole new component called cards, which replace panels, wells, and thumbnails. A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colours, and powerful display options.

Bootstrap还附带了一个名为card的全新组件，它可以替换面板 ， Kong和缩略图 。 卡是一种灵活且可扩展的内容容器。 它包括页眉和页脚选项，各种内容，上下文背景颜色以及强大的显示选项。

7：再见IE9 (7: Goodbye IE9)

Bootstrap v4 has dropped support for IE8, IE9, and iOS 6. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.

Bootstrap v4不再支持IE8，IE9和iOS6。v4现在仅是IE10 +和iOS 7+。 对于需要这两个网站之一的网站，请使用v3。

There are of course many more changes which didn’t make it into this article, so check out the Migration section in the docs to see all the changes.

当然，还有许多未在本文中进行的更改，因此请查看文档中的“ 迁移”部分以查看所有更改。

Finally, if you want to learn Bootstrap v4 properly, be sure to check out our free course on Scrimba.

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

Also, when you’ve gotten this far, feel free to connect with me via Twitter:

此外，当您走到这一步时，请随时通过Twitter与我联系：

Thanks for reading! My name is Per, I’m the co-founder of Scrimba, and I love helping people learn new skills. Follow me on Twitter if you’d like to be notified about new articles and resources.

谢谢阅读！ 我叫Per，我是Scrimba的共同创始人，我喜欢帮助人们学习新技能。 如果您想收到有关新文章和新资源的通知，请在Twitter上关注我。

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。

翻译自: https://www.freecodecamp.org/news/learn-bootstrap-4-in-5-minutes-da94728efe41/

bootstrap快速入门