Bootstrap 4：您需要知道的一切

最新推荐文章于 2024-05-06 00:08:33 发布

cumichun6193

最新推荐文章于 2024-05-06 00:08:33 发布

阅读量526

点赞数

文章标签：编程语言 python css java html

原文链接：https://www.freecodecamp.org/news/bootstrap-4-everything-you-need-to-know-c750991f6784/

版权

深入解决常见的响应式Web设计问题 (A deep dive into solving common responsive web design problem)

This article will cover the practical fundamentals you need to start building responsive websites with the latest version of Bootstrap, version 4.

本文将介绍使用最新版本的Bootstrap版本4开始构建响应式网站所需的实用基础知识。

You may be wondering — why did Ohans write this 17,000 word guide to Bootstrap? After all, browser support for Flexbox and Grid are on the rise.

您可能想知道-Ohans为什么为Bootstrap撰写这份17,000字的指南？毕竟，浏览器对Flexbox和Grid的支持正在上升。

Well I’ve got good news for you — I’m well aware of these trends. I wrote a comprehensive intro to Flexbox a while back, and I’ve written more Medium articles on Flexbox and Grid than any other developer.

好了，我对您有个好消息-我很清楚这些趋势。不久前，我为Flexbox撰写了全面的介绍，并且我在Flexbox和Grid上撰写的中型文章多于其他任何开发人员。

This said, I think there are still plenty of situations where knowing the latest version of Bootstrap will help you.

也就是说，我认为在很多情况下了解最新版本的Bootstrap会对您有所帮助。

There’s no one tool for every use case.

每个用例都没有一种工具。

By the way, If you don’t know CSS well, I recommend learning it well first. Instead, get a decent CSS education. Understand Flexbox, and perhaps learn how the CSS Grid layout works too. Then tackle Bootstrap 4.

顺便说一句，如果您不太了解CSS，建议您先学习一下CSS。相反，接受体面的CSS教育。了解Flexbox ，也许还可以学习CSS Grid布局如何工作。然后解决Bootstrap 4。

But if you feel ready, let’s proceed. ?

但是，如果您准备好了，那就继续吧。？

Bootstrap 4快速说明 (A Quick Note on Bootstrap 4)

Bootstrap 4 is the latest version of the widely popular front-end framework, Bootstrap.

Bootstrap 4是广泛流行的前端框架Bootstrap的最新版本。

Bootstrap 4 has a lot of new exciting features and capabilities that make building responsive designs even easier than before. The biggest add-on is that it is heavily built on Flexbox.

Bootstrap 4具有许多令人兴奋的新功能，使响应式设计的构建比以前更加容易。最大的附加组件是它在Flexbox上大量构建。

我应该在2019年继续学习Bootstrap吗？ (Should I Still Learn Bootstrap in 2019?)

Years ago, the main reason I learned Bootstrap was the ease of building responsive designs. However, before the release of the new version of Bootstrap, I stopped using the framework. Why?

几年前，我学会Bootstrap的主要原因是易于构建响应式设计。但是，在发布新版本的Bootstrap之前，我停止使用该框架。为什么？

With the advent of Flexbox and CSS Grid, I found it easier to build responsive modules using native CSS support.

随着Flexbox和CSS Grid的问世，我发现使用本机CSS支持构建响应模块变得更加容易。

Among experienced developers, my guess is that Bootstrap is less popular. This is a personal opinion, not a verified fact. But, whether you’re an old hand, or new to the world of responsive designs, there are still good reasons to learn Bootstrap:

在有经验的开发人员中，我的猜测是Bootstrap不那么受欢迎。这是个人观点，不是经过验证的事实。但是，无论您是老手还是响应式设计的新手，仍然有充分的理由学习Bootstrap：

1.快速原型制作 (1. Fast Prototyping)

There are lots of other tools and frameworks that make prototyping fast. For instance, you may have heard of Bulma and Materialize.

还有许多其他工具和框架可以使原型制作快速。例如，您可能听说过布尔玛和物化。

Bootstrap is an equal contender here. Many would argue they do not need some of the other features of the framework. Yet, Bootstrap allows you to customize and pick what modules are relevant to you.

Bootstrap在这里是平等的竞争者。许多人认为他们不需要框架的其他一些功能。但是，Bootstrap允许您自定义和选择与您相关的模块。

2.响应式网页设计 (2. Responsive Web Design)

For beginners, responsive web design is a big deal. It’s easy to laugh it off when you’re an experienced developer, but think back to when you started. That sh*t was hard to pull off. Bootstrap makes it relatively easy.

对于初学者来说，响应式网页设计很重要。当您是经验丰富的开发人员时，很容易将其嘲笑，但请回想起您何时开始。那很难实现。 Bootstrap使它相对容易。

3.旧代码库 (3. Old Codebase)

When I stopped using Bootstrap for personal and new projects, I still had to refactor and maintain an old codebase at work. Whether you like it or not, a lot of older codebases are written in Bootstrap. You don’t want to look clueless just because you are “pro” and don’t like Bootstrap.

当我停止将Bootstrap用于个人和新项目时，我仍然不得不在工作中重构和维护旧的代码库。不管您是否喜欢，很多较旧的代码库都是用Bootstrap编写的。您不希望仅仅因为自己是“ pro ”并且不喜欢Bootstrap而显得笨拙。

4.最新版本更智能，更好 (4. The Latest Version is Smarter and Better)

The new Bootstrap version 4 is a lot smarter. It is built on top of Flexbox, and comes with a lot of savor we will explore in later sections of this article.

新的Bootstrap版本4更加智能。它建立在Flexbox的基础上，并且带有很多趣味，我们将在本文的后续部分中进行探讨。

5.更加易于定制 (5. Greater Ease of Customization)

The new Bootstrap 4 is a lot easier to customize.

新的Bootstrap 4易于定制。

I hated Bootstrap because you had to use Less or Sass for any meaningful customization. While that is still partly true, version 4 is a lot more customizable than the previous versions.

我讨厌Bootstrap，因为您必须使用Less或Sass进行有意义的自定义。尽管仍然部分正确，但版本4比以前的版本更具可定制性。

Bootstrap isn’t going to disappear that quickly. You can read more about whether it is worth the learn or not in this freeCodeCamp forum discussion:

Bootstrap不会很快消失的。您可以在此freeCodeCamp 论坛讨论中阅读有关是否值得学习的更多信息：

Will Bootstrap be dropped?"Every bootstrap website ever!" - it's even EASIER than that, why learn front end/gui at all? Just type Monster…forum.freecodecamp.org

Bootstrap会被丢弃吗？ “每个引导网站都有！” -甚至比这更容易，为什么还要学习前端/ GUI？ 只需输入Monster… forum.freecodecamp.org

您将学到什么 (What You’ll Learn)

I will teach you the fundamentals of how Bootstrap works.
我将教您Bootstrap工作原理的基础。
I will walk you through what is different in this new version of Bootstrap. If you’re a more experienced developer, this section will interest you.
我将向您介绍此新版本的Bootstrap中的不同之处。如果您是经验更丰富的开发人员，那么本节将使您感兴趣。
I have spent a lot of hours studying the Bootstrap framework. I will show you some of the helpful tips I have found along the way.
我花了很多时间研究Bootstrap框架。我将向您展示一些我在此过程中发现的有用提示。

This will make your work with the framework easier.
这将使您使用框架的工作更加轻松。
Learning the fundamentals is cool. What’s even cooler is applying these fundamentals to build real-world apps.
学习基础知识很酷。更酷的是应用这些基础知识来构建实际的应用程序。
I’ll walk you through building a lot of “small things.” Then, I’ll wrap things up with this startup homepage completely built with Bootstrap 4.
我将引导您完成许多“小事情”。然后，我将用完全由Bootstrap 4构建的启动主页进行总结。

Aren’t those pretty?

那些不是很漂亮吗？

Most people say, “all Bootstrap sites look the same.” I disagree. The statement should read, “all poorly built Bootstrap sites look the same.”

大多数人说：“所有Bootstrap网站看起来都一样。 ”我不同意。该声明应显示为：“所有构建不良的 Bootstrap站点看起来都一样。 ”

I’m excited to show you how to build beautiful sites using Bootstrap. I hope you are too.

我很高兴向您展示如何使用Bootstrap建立漂亮的网站。我希望你也是。

你应该知道什么 (What you Should Know)

I assume you have a good understanding of how HTML and CSS works.
我认为您对HTML和CSS工作原理有很好的了解。

If you don’t know CSS very well, I recommend taking my
如果您不太了解CSS，建议您将我CSS

Complete Introduction to CSS (paid course with over 70 lessons).
完整CSS简介 (带70堂课程的付费课程)。
You should have a decent knowledge of how Flexbox works.
您应该对Flexbox的工作方式有相当的了解。

Please read this
请阅读这个

detailed flexbox guide, or this example focused guide for a refresher on Flexbox.
详细的flexbox指南，或本示例重点介绍的Flexbox入门指南。

Bootstrap版本4有什么新功能？ (What is new in Bootstrap version 4?)

This section is targeted towards more experienced developers. If you’re new to the front-end space, skip this and come back after reading the other sections of the article.

本节针对更有经验的开发人员。如果您不熟悉前端空间，请在阅读本文的其他部分后跳过此步骤并回来。

The latest version of Bootstrap, version 4, is packed with a few vital changes.

最新版本的Bootstrap版本4进行了一些重要更改。

1.默认边框框值已更改 (1. The default border-box value has been changed)

Earlier versions of the bootstrap framework set the border-box value to content-box. Most people like myself found this annoying most of the time.

引导框架的早期版本将border-box值设置为content-box. 像我这样的大多数人在大多数时间都觉得很烦。

Now the Bootstrap team has switched the value to border-box. I find this is easier to understand.

现在，Bootstrap团队已将值切换为border-box 。我发现这更容易理解。

2.有意识CSS重置 (2. Opinionated CSS Resets)

CSS Resets have come a long way. In this version of Bootstrap, the CSS Reset stylesheet is called Reboot.

CSS重置已经走了很长一段路。在此版本的Bootstrap中，CSS Reset样式表称为Reboot。

Reboot does a few things differently. It is based on Normalize. It avoids margin-top , embraces the CSS inherit value, uses the rem unit heavily, and embraces the use of native font stack for optimum text rendering.

重新启动会做一些不同的事情。它基于规范化。它避免使用margin-top ，包含CSS inherit值，大量使用rem单元，并包含使用本机字体堆栈以实现最佳文本呈现。

I advise you to take 10 minutes to read about Reboot from the official docs. It’s quite a good read.

我建议您花10分钟时间来阅读官方文档中有关重新启动的信息。这是一个很好的阅读。

Bootstrap工作原理简介 (Introduction to How Bootstrap Works)

This section is geared towards those not familiar with how Bootstrap works. You may skip this if you’re a more experienced developer.

本节面向不熟悉Bootstrap工作原理的用户。如果您是经验更丰富的开发人员，则可以跳过此步骤。

Let’s begin.

让我们开始。

The usual flow for creating a basic web page goes like this:

创建基本网页的通常流程如下：

Write a basic markup document (HTML)
编写基本的标记文档(HTML)
Style the page using CSS
使用CSS设置页面样式

Let’s pretend for a bit to do just that.

让我们假装做到这一点。

Consider the basic markup below:

请考虑以下基本标记：

<h1>Hello World</h1><h2>Hi, there. Hello again</h2><a href="example.com">Link to my website</a>

The markup has two header elements and an anchor tag. Below is the result when viewed in a browser.

标记具有两个标头元素和一个锚标记。以下是在浏览器中查看的结果。

This is exactly what you may have hoped for, but the result goes on to show a fundamental truth. Let’s dig into why this is important.

这正是您可能希望的，但是结果继续显示出一个基本事实。让我们探究为什么这很重要。

Take a look at the result above. The h1 element is displayed larger than the h2 element, and the a tag is blue — by default.

看看上面的结果。该h1元素显示都比较大的h2元素，以及a标签为蓝色-默认。

Did you notice that we get these styles without writing any CSS?

您是否注意到我们无需编写任何CSS就能获得这些样式？

Why?

为什么？

This is a result of the Browser’s default styles.

这是浏览器默认样式的结果。

The takeaway is, browsers have default stylesheets that affect the appearance of webpages.

值得一提的是，浏览器的默认样式表会影响网页的外观。

How can we prevent this default behavior?

我们如何防止这种默认行为？

The solution is pretty simple. You can override the default browser styles with your own styles through CSS.

解决方案非常简单。您可以通过CSS用自己的样式覆盖默认浏览器样式。

For example:

例如：

h1 {  color: blue}

a {  color: black}

This time, I have swapped the colors. The link, black and the h1 blue.

这次，我换了颜色。链接， black和h1蓝色。

That was easy.

那很简单。

Bootstrap在哪里适合所有这些？ (Where does Bootstrap fit into all of this?)

The browser affected the display of the page without your intervention. Using frameworks like Bootstrap can significantly alter the display of your webpages — with little or no intervention from you.

浏览器在没有您干预的情况下影响了页面的显示。使用Bootstrap之类的框架可以极大地改变网页的显示-几乎不需要您干预。

So, it works like this:

因此，它的工作方式如下：

Every webpage’s overall style is influenced by the browser’s default styles, styles from frameworks such as Bootstrap and your own written CSS.

每个网页的整体样式都会受到浏览器默认样式的影响，这些样式来自诸如Bootstrap之类的框架的样式以及您自己编写CSS。

Don’t worry if you don’t get it now, I will explain with an example.

如果您现在不了解它，请不要担心，我将举一个例子进行说明。

Assume I wrote a CSS library called, cowbell. Cowbell does only one thing. I included the library, perhaps through a cdn link. It gave my page a background color that looks “cowbell” like.

假设我编写了一个名为cowbellCSS库。 Cowbell只做一件事。我可能通过cdn链接包含了该库。它为我的页面提供了看起来像“牛铃”的背景色。

Somewhere within the cowbell library, I would have gone ahead to write this:

在cowbell库中的某个地方，我会继续写这个：

.cowbell {   background-color: cowbell}

Note that all I have done is include a .cowbell class with an equivalent background-color.

请注意，我所做的只是包括一个.cowbell类，其background-color.

For the records, there’s no color like “cowbell”.

根据记录，没有像“牛铃”那样的颜色。

When you include the cowbell library in your page, how do use it?

当您在页面中包含Cowbell库时，如何使用它？

Simple.

简单。

You just add the class of .cowbell to any element you want to give a cowbell color.

您只需将.cowbell类别添加到您想要给cowbell颜色添加任何元素。

Something like this:

像这样：

<!--- this is my awesome HTML document --><body class="cowbell">  This is my awesome site</body>

Since I have already defined the cowbell class within the library, you don’t have to concern yourself with writing the functionality.

由于我已经在库中定义了cowbell类，因此您不必担心编写功能。

As in the example above, the addition of the cowbell class to body will give the entire document a cowbell color.

如以上示例所示，将cowbell类添加到body将使整个文档具有牛铃色。

Now you’ve used a CSS library!

现在，您已经使用了CSS库！

Under the hood, this is the same way Bootstrap works. In the same manner, there exists a set of Bootstrap CSS classes that have been styled within the library.

在后台，这与Bootstrap的工作方式相同。以相同的方式，库中存在一组样式已设置的Bootstrap CSS类。

All you need to do is learn the class names and apply them to your html markup. They’ll do what they are designed to do.

您需要做的就是学习类名称，并将其应用于html标记。他们将按照自己的设计去做。

In the case of the cowbell library, the class name required is .cowbell.

在的情况下， cowbell库，所需的类名是.cowbell.

What does it do? It gives the element a “cowbell” color.

它有什么作用？它使元素具有“ cowbell”颜色。

How does it work? You just go ahead and add the class name, .cowbell to any element.

它是如何工作的？您只需继续将类名.cowbell添加到任何元素。

Likewise, the Bootstrap library has a giant CSS file with lots of utility classes, responsive modules, and general CSS goodies.

同样，Bootstrap库包含一个巨大CSS文件，其中包含许多实用程序类，响应模块和常规CSS东西。

Let’s begin to peel the layers off Bootstrap in the next section.

在下一部分中，让我们开始从Bootstrap剥离图层。

安装引导程序 (Installing Bootstrap)

You can’t get Bootstrap to do anything if it is not installed or included within your webpage.

如果Bootstrap未安装或未包含在网页中，则您将无法执行任何操作。

There are a couple ways to do this and more advanced users can explore the available options.

有两种方法可以做到这一点，更高级的用户可以探索可用的选项。

For the sake of simplicity, I will be using a cdn.

为了简单起见，我将使用cdn.

Sorry about the jargon. A CDN is short for Content Delivery Network.

对不起行话。 CDN是Content Delivery Network的缩写。

A simple way to describe what is CDN is to imagine placing an order for a pair of shorts from a fictitious website called Anazon. Your order was received and successfully processed by Anazon. Unfortunately, Anazon noticed you live in the Antartica — somewhere really far from their main warehouse.

描述CDN的一种简单方法是，想象从一个名为Anazon的虚拟网站订购一条短裤的订单。您的订单已由Anazon接收并成功处理。不幸的是，阿纳松(Anazon)注意到您住在南极洲(Antartica)，距离他们的主要仓库很远。

Bad news.

坏消息。

Fortunately, Anazon has a wide network of distributed warehouses all across the globe. Amazing.

幸运的是，Anazon在全球拥有广泛的分布式仓库网络。惊人。

Now, Anazon decides which warehouse is closest to your house in Antartica, and delivers your pair of shorts from that warehouse. Also, the next time you place an order, Anazon will check the same warehouse and deliver your goods in under 24hours.

现在，Anazon决定哪个仓库最靠近您在Antartica的房子，并从该仓库运送您的短裤。另外，下次您下订单时，Anazon会检查同一仓库并在24小时内交付您的货物。

How sweet.

有多甜。

This is kinda how a Content Delivery Network works. A CDN is like a warehouse that hosts common libraries like Bootstrap.

这有点类似于内容交付网络的工作方式。 CDN就像一个仓库，其中托管有Bootstrap之类的常见库。

If you visit a website that has a link to a CDN resource, the Browser will load a cached version of the library. This is a version ‘stored’ in your Browser’s memory. If it finds none, it will make a request to fetch the requested resource.

如果您访问的网站具有指向CDN资源的链接，则浏览器将加载该库的缓存版本。这是“存储”在浏览器内存中的版本。如果找不到任何内容，它将发出请求以获取所请求的资源。

Loading a resource from a CDN has the advantage of the resource being received faster. Like those pair of shorts!

从CDN加载资源的优点是可以更快地接收资源。就像那双短裤！

Below is the link to the Bootstrap CDN.

以下是Bootstrap CDN的链接。

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"

Include that in your page, and you are good to go.

将其包含在您的页面中，就可以了。

For example, add this to any HTML markup:

例如，将其添加到任何HTML标记中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

Bootstrap有什么不同？ (What Difference Does Bootstrap Make?)

In this section we will go on to set up a basic demo page with Bootstrap. For these demos, I will be using codepen.io.

在本节中，我们将继续使用Bootstrap设置基本的演示页面。对于这些演示，我将使用codepen.io 。

Adding Bootstrap v4 to a project is simple. Click the CSS pen setting, and include Bootstrap from the options.

将Bootstrap v4添加到项目很简单。单击CSS笔设置，然后从选项中包括Bootstrap。

Once that is done. we are all set up for the demos that come in the following sections.

一旦完成。我们都为以下各节中的演示做好了准备。

So, what difference does Bootstrap make?

那么，Bootstrap有什么不同？

I have continued with the “Hello World” example we discussed earlier. Take a look at the results above.

我继续我们前面讨论的“ Hello World”示例。看看上面的结果。

The difference is very subtle. From the images you can see that some of Bootstrap’s default page styles have overridden those of the browser.

区别非常细微。从图像中可以看到，Bootstrap的某些默认页面样式已覆盖了浏览器的那些样式。

The font is now different, the spacing between each text block is altered, and the link has a different style.

现在，字体有所不同，每个文本块之间的间距已更改，链接具有不同的样式。

Bootstrap at work!

引导工作！

Now that I’m sure you understand how CSS libraries work in general, let’s learn some of the basic Bootstrap Styles or class names that you should know.

现在，我确定您了解CSS库的一般工作原理，让我们学习一些您应该知道的基本Bootstrap样式或类名。

每个人都应该知道的基本引导样式 (The Basic Bootstrap Styles Everyone Should Know)

Some very smart guys have put in a lot of work into building the Bootstrap library. They have done a lot of the “dirty” work for you. All you have to do is plug into what they’ve done and reap the fruits!

一些非常聪明的人投入了大量工作来构建Bootstrap库。他们为您完成了许多“肮脏”的工作。您要做的就是插入他们所做的工作并收获成果！

I will be using a question and answer method to explain the use of these Bootstrap styles.

我将使用一种问答方法来解释这些Bootstrap样式的用法。

Let’s get started.

让我们开始吧。

To practice the concepts in this section, we will begin with the following markup. It’s an unintelligent poem about rabbits.

为了实践本节中的概念，我们将从以下标记开始。这是一首关于兔子的愚蠢诗。

<h1> Bunnie Poems </h1><p> The following is a mostly unintelligent poem about Bunnies. Don't think too hard about them. <br /> Enjoy!</p>

<h2> The Bunnie Who Had No Ears </h2>

<p> Mr Bunnie. How big the ears of your ancestors </p><p> How fluffy the pride of your family </p><p> But, wait... </p><p> How is it that you have no ears </p><p> With your eyes you hear, and your nose you see? </p><p> How sad, Mr Bunny </p><p> See him hop, hop, hop about on legs so very strong.</p><p> But ears, he has none <p><p> Live long, and make your ancestors proud </p>

The result of the markup is seen below:

标记的结果如下所示：

The result is largely influenced by the Browser’s style. This is called the user agent stylesheet.

结果很大程度上受浏览器样式的影响。这称为用户代理样式表。

The first step is to go ahead and include Bootstrap. Please include Bootstrap as discussed in an earlier section, and you should have this:

第一步是继续进行，包括Bootstrap。请包括前面部分中讨论的Bootstrap，并且您应该具有以下内容：

With no styles written yet, we have a decent looking page. It is well spaced, and the font family has changed. See the changes?

目前尚无样式，我们的页面看起来不错。它的间距很好，并且字体家族也发生了变化。看到变化了吗？

The Bootstrap default styles have overridden those of the Browser. Without any efforts, we have a decent looking page.

Bootstrap默认样式已覆盖浏览器的默认样式。没有任何努力，我们的页面看起来不错。

为什么添加Bootstrap时字体家族会发生变化？ (Why Did the Font Family Change when I added Bootstrap?)

You may have noticed that the text is now displayed in a completely different font.

您可能已经注意到，文本现在以完全不同的字体显示。

Bootstrap 4 embraces the idea of native font stacks. It’s pretty simple. Different Operating systems — including Android, MacOS, Windows and Linux — all have default fonts installed on them.

Bootstrap 4包含本机字体堆栈的想法。很简单不同的操作系统(包括Android，MacOS，Windows和Linux)都安装了默认字体。

This version of Bootstrap sets up a font stack that uses the default sans-serif font available on the current device.

此版本的Bootstrap设置了一个字体堆栈，该堆栈使用当前设备上可用的默认sans-serif字体。

This is a much smarter thing to do, and without taking away the flexibility of change. You can override this behavior and use your own fonts.

这是一件更聪明的事情，而且又不影响变更的灵活性。您可以覆盖此行为，并使用自己的字体。

I was planning to explain in great detail how setting native font stacks work in CSS, but Marcin Wichary beat me to it. In this article, he did a great job of explaining it better than I ever could.

我打算详细解释如何在CSS中设置本机字体堆栈，但是Marcin Wichary击败了我。在本文中，他在解释方面做得比以往更好。

So, by adding Bootstrap we have good looking fonts on all platforms — regardless of the device’s operating system.

因此，通过添加Bootstrap，我们在所有平台上都拥有漂亮的字体-无论设备的操作系统如何。

如何制作大于默认值的标题？ (How do I make headers that are bigger than the defaults?)

Sometimes you need headers that are really big. For instance, at the top of a website.

有时您需要很大的标题。例如，在网站顶部。

Take a look at the basic example we set up earlier. There exists an h1 and h2 in their default sizes. If for some reason you need these headers to be bigger, Bootstrap 4 has you covered.

看一下我们前面设置的基本示例。它们的默认大小为h1和h2 。如果由于某种原因需要这些标头更大，可以使用Bootstrap 4。

Add the any of the classes, display-1 display-2 display-3 or display-4.

添加任何类display-1 display-2 display-3或display-4.

For example:

例如：

<h2 class="display-4"> The Bunnie Who Had No Ears </h2>

I have added the class display-4 to the h2 element. As seen below, it looks a lot bigger now. Bigger than the h1 element!

我已经将类display-4添加到h2元素中。如下所示，现在看起来更大了。比h1元素更大！

文本显示尺寸类别是否仅限于标题元素？ (Are the text display size classes restricted to only header elements?)

The display classes are not restricted to just header elements, h1 to h6. In fact, they can be added to any element.

显示类不仅限于标题元素h1至h6. 实际上，可以将它们添加到任何元素。

In the example below, I have gone added to add display-3 to one of the paragraph elements.

在下面的示例中，我添加了将display-3添加到段落元素之一。

<p class="display-2"> But, wait... </p>

类名`display-1`和`display-4`什么区别？ (What is the difference between the class names, `display-1` and `display-4` ?)

The difference comes from the resulting size of the elements. display-1 will yield bigger sizes than display-4 . You may see the difference in the sizes in the image below:

差异来自元素的最终大小。 display-1将产生比display-4更大的尺寸。您可能会在下图中看到大小上的差异：

如何使用Bootstrap居中对齐文本？ (How do I center and justify text with Bootstrap?)

Pretty simple. Add the text-center class to the desired element to center the text block.

很简单将text-center类添加到所需元素以使文本块居中。

<p class="text-center">How is it that you have no ears </p>

To justify text, and style the text to fit along the left and right, use the text-justify class like so:

要使文本对齐并设置样式以使其适合左右，请使用text-justify类，如下所示：

<p class="text-justify">How is it that you have no ears </p>

如何在Bootstrap 4中大写文本？ (How do I capitalize texts in Bootstrap 4?)

There are three classes specifically tailored to this cause: .text-lowercase , .text-uppercase and .text-capitalize.

有三种专门针对此原因的类： .text-lowercase ， .text-uppercase和.text-capitalize.

If you apply the class text-lowercase on an already capitalized text, it will appear lower-cased.

如果将class text-lowercase应用于已经大写的文本，它将显示为小写。

<p class="text-lowercase">WE BELIEVE IN YOU BUNNY</p>

This will yield a lowercased text in spite of the text, “WE BELIEVE IN YOU BUNNY” written in caps.

尽管使用大写字母写着“我们相信您的兔子” ，但这仍将产生一个小写的文本。

text-capitalize will capitalize the first letter of every word, and text-uppercase will capitalize every letter in a word.

text-capitalize将大写每个单词的第一个字母， text-uppercase将大写一个单词的每个字母。

如何向左或向右移动文本？ (How do I move texts to left or right?)

As in the other text utility classes, add any of the classestext-left and text-right for the desired effect.

与其他文本实用程序类一样，添加任何类text-left和text-right以获得所需的效果。

如何使用Bootstrap 4制作粗体，普通或斜体文本？ (How do I make a bold, normal or italic text with Bootstrap 4?)

Adding the classes,.font-weight-bold,.font-weight-normal and.font-italic will make the text bold, normal or italic. If you’re coming from Bootstrap 3, you’ll notice that these class names are different.

添加.font-weight-bold ， .font-weight-normal和.font-italic这两个类将使文本.font-italic粗体，普通或斜体。如果您来自Bootstrap 3，您会注意到这些类名是不同的。

Here’s an example:

这是一个例子：

<p class="font-weight-bold"> How sad, Mr Bunny </p><p class="font-italic">See him hop, hop, hop about on legs so very strong.</p><strong class="font-weight-normal"> But ears, he has none </strong>

Note that the example uses font-weight-normal on a strong tag. By default, <strong><;/strong> should yield texts that are bold. This behaviour is “normalized” when you add the font-weight-normal class.

请注意，该示例在strong标签上使用font-weight-normal 。默认情况下， <strong>< ; / strong>应该产生粗体文本。当you add the font-w八正常类时，此行为是“规范化”的。

Note that the class name to make an italic text does NOT say font-weight-italic BUT font-italic

请注意，用于生成斜体文本的类名称不会说font-weight-italic但BUT font-italic

如何使用Bootstrap设置块引号的样式？ (How can I style block quotes with Bootstrap?)

Boostrap has the class name blockquote available for styling the block quote tag, <blockquote> or any other text block such as the paragraph element.

Boostrap具有类名称blockquote可用于设置块引号， <blockquo te>或任何其他文本块(如段落元素)的样式。

For example:

例如：

<blockquote class="blockquote">  Men have ears. Men have Noses. Men have Mouths.We do too. We are Bunnies</blockquote>

This will give the text, “Men have ears. Men have Noses. Men have Mouths.We do too. We are Bunnies”, a unique Bootstrap style for quotes.

这将给出文本“男人有耳朵。男人有鼻子。人有嘴，我们也有。我们是兔子”，独特的Bootstrap引号样式。

如何在Bootstrap中为报价的作者设置不同的样式？ (How can I style the author of a quote differently in Bootstrap?)

It is pretty common to include an author after a quote. The same goes for citing the source of any text block. To do this, use the blockquote-footer class like so:

在引号后包括作者是很常见的。引用任何文本块的源代码也是如此。为此，请使用blockquote-footer类，如下所示：

<blockquote class="blockquote">  Men have ears. Men have Noses. Men have Mouths.We do too. We are Bunnies  <div class="blockquote-footer">Ohans Bunny </div></blockquote>

For this example, I have used blockquote-footer within a blockquote tag. This is not compulsory. You can use the blockquote-footer class name on any text block such as the paragraph element, p.

对于此示例，我在blockquote标记中使用了blockquote-footer 。这不是强制性的。您可以在任何文本块(例如，段落元素p.上使用blockquote-footer类名p.

Below is the result of this:

结果如下：

如何删除无序列表上的默认填充，边距和样式？ (How do I remove the default padding, margin and style on an unordered list?)

It seems that I always need to do this when I create any sort of html list. Again, this is trivially simple with Bootstrap. Use the list-unstyled class name, like so:

在创建任何类型的html列表时，似乎总是需要这样做。同样，这对于Bootstrap来说非常简单。使用list-unstyled类名，如下所示：

<ul class="list-unstyled">  <li>Thank you</li>  <li>Muchas Gracias</li>  <li>Merci</li></ul>

如何创建并排排列的列表项？ (How do I create list items that are arranged side by side?)

Sometimes you may need your list items to be arranged horizontally,or side by side as opposed to the default vertical view. Use the class name list-inline on the unordered list, and list-inline-item on the list items.

有时，您可能需要将列表项水平排列，或者与默认垂直视图并排排列。在无序列表上使用类名list-inline ，在列表list-inline-item上使用list list-inline-item 。

For example:

例如：

<ul class="list-inline">  <li class="list-inline-item">Thank you</li>  <li class="list-inline-item">Muchas Gracias</li>  <li class="list-inline-item">Merci</li></ul>

This will created list items that are aligned side by side, horizontally.

这将创建水平并排排列的列表项。

Bootstrap提供哪些颜色选项？ (What color options are available in Bootstrap?)

Colors are the visual language most people process before they even become aware of it.

颜色是大多数人甚至还未意识到的视觉语言。

In design and Bootstrap generally, colors may be applied to a wide range of elements. Texts, backgrounds, borders, and more.

通常，在设计和Bootstrap中，颜色可以应用于多种元素。文字，背景，边框等。

Ask a 5 year old to name colors and they are off with, “red, blue, green…”

要求一个5岁的孩子命名颜色，然后用“红色，蓝色，绿色……”标记

There are well over 100 color names in CSS, which makes it difficult to represent all of these with class names. It’d be weird to have class names, color-blue color-red, on and on for over a 100 colors.

CSS中有100多种颜色名称，这使得很难用类名称来表示所有这些颜色名称。经常使用超过100种颜色的类名color-blue color-red太奇怪了。

Hence, colors are treated a little differently in Bootstrap. There are certain keywords or special color names that are mapped to certain colors.

因此，Bootstrap对颜色的处理略有不同。有某些关键字或特殊的颜色名称映射到某些颜色。

For example, the keyword primary is often associated with a blue color. success with a green color, and danger with a red color, and so on.

例如，关键字primary通常与蓝色关联。绿色success ，红色danger ，依此类推。

如何在Bootstrap中显示彩色文本？ (How do I display a colored text in Bootstrap?)

To display a text in a certain color, you should use the .text-* class names. where ‘*’ can be any of primary secondary success danger warning info light or dark.

要以某种颜色显示文本，应使用.text-*类名。 “ *”可以是primary secondary success danger warning info任何一个， light或dark.

For example:

例如：

<p class="text-primary">Hello World</p><p class="text-secondary">Hello World</p><p class="text-success">Hello World</p><p class="text-danger">Hello World</p><p class="text-warning">Hello World</p><p class="text-info">Hello World</p>&lt;p class="text-light">Hello World</p><p class="text-dark">Hello World</p>

The code block above will yield the result shown below:

上面的代码块将产生如下所示的结果：

It is important to note that the applying the text-light class results in a text with a light color. It is mostly appropriate that you apply this class to texts on a dark background.

重要的是要注意，应用text-light类会导致文本具有浅色。最适合将此类应用于深色背景的文本。

For example, I have gone ahead to use the text-light class on a text within a blue background. It displays nicely.

例如，我已经开始在蓝色背景内的文本上使用text-light类。它显示很好。

如何在Bootstrap中创建响应式图像？ (How do I create Responsive Images in Bootstrap?)

Everyone loves images. If you don’t, then you’re a part of the very few different ones. From experience, you must know that styling images can get out of hand very quickly.

每个人都喜欢图像。如果您不这样做，那么您就是少数几个不同的人的一部分。根据经验，您必须知道样式图像会很快失控。

To create images that are responsive regardless of the device being used, add the class .img-fluid to the image element.

要创建无论使用什么设备都可以响应的图像，请将class .img-fluid添加到image元素。

For example:

例如：

In the bunny poem example, I have added the image of a cute kitten:

在兔子诗歌示例中，我添加了一只可爱小猫的图像：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg"/>

By default, the image extents arent seen because of the size of the image. Add the .img-fluid class for a fully responsive image.

默认情况下，由于图像的大小，无法看到图像范围。添加.img-fluid类以获得完全响应的图像。

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="img-fluid"/>

如何在Bootstrap中创建微妙的圆形图像？ (How do I create subtle rounded images in Bootstrap?)

Sometimes you want something different. So, Bootstrap allows for having images with subtle rounded borders. Just add the class rounded like so:

有时您想要一些不同的东西。因此，Bootstrap允许图像带有微妙的圆形边界。只需添加如下所示的rounded类：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="img-fluid rounded"/>

Note that the markup above has more than one class name applied to it. This is a good example of how to use multiple class names on a single element.

请注意，上面的标记已应用了多个类名。这是一个很好的示例，说明了如何在单个元素上使用多个类名。

Look closely at the result below. You’ll find the image having slightly round borders. Many times I find this more aesthetically pleasing than having square edges.

仔细查看下面的结果。您会发现图像的边框略圆。很多时候，我发现这比方形边缘更具美感。

我可以创建仅带有圆形边框的一侧的图像吗？ (Can I create images with just one side having a round border?)

In the previous example, the rounded corners were applied to all sides of the image. It is also possible to have rounded borders on just one direction. For example, applying the class rounded-top will create an image with only the top corners being rounded. .rounded-bottom does the exact opposite.

在前面的示例中，圆角应用于图像的所有侧面。也可以仅在一个方向上具有圆形边界。例如，应用“ rounded-top ”类将创建仅对顶部角进行四舍五入的图像。 .rounded-bottom相反。

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="img-fluid rounded-top"/>

Incase you were wondering, you can also use the rounded-left and rounded-right classes for left and right borders respectively.

如果您想知道，还可以分别对left和right界使用rounded-left和rounded-right类。

有制作圆形背景图像的选项吗？ (Are there options for making images with a full circular background?)

Yeah. Bootstrap allows for making a circular image by using the class name, rounded-circle.

是的 Bootstrap允许使用类名rounded-circle制作圆形图像。

For example:

例如：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="img-fluid rounded-circle"/>

This will result in a cute rounded kitten.

这将导致一只可爱的圆形小猫。

我可以操纵引导程序给的圆边吗？ (Can I manipulate the rounded edges bootstrap gives?)

As much as possible, Bootstrap 4 tries not to take away your freedom. So yes, the rounded edges Bootstrap gives can be tweaked with your own styles. Let me show you an example.

Bootstrap 4尽可能不剥夺您的自由。是的，Bootstrap提供的圆角边缘可以用您自己的样式进行调整。让我给你看一个例子。

If for some reason you have styled an image to have rounded borders, you can remove the rounded borders with Bootstrap by adding the rounded-0 class.

如果由于某种原因将图像的样式设置为具有圆角边框，则可以通过添加rounded-0类来使用Bootstrap删除圆角边框。

For example:I have added a border radius of 50px to the cat image:

例如：我为猫图像添加了50px的边框半径：

img {  border-radius: 50px}

Here’s the result:

结果如下：

That’s a weird shaped cat image. Let’s see what is happening under the hood.

那是怪异的猫形象。让我们看看引擎盖下发生了什么。

In the html markup, we have this:

在html标记中，我们有：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="img-fluid rounded-bottom"/>

As you can see from the markup, there’s already a rounded-bottom class applied to the image. Thus, bootstrap will have full control over the bottom edges. The edges you add using the border-radius property will affect only the top borders, or the borders you haven’t styled using Bootstrap.

从标记中可以看到，已经在图像上应用了一个rounded-bottom类。因此，引导程序将完全控制底部边缘。使用border-radius属性添加的边缘将仅影响顶部边框，或未使用Bootstrap设置样式的边框。

Does that make sense? I guess it does.

那有意义吗？我想是的。

If you took away the rounded-bottom class or any other rounded class on the image, your style will now take effect accross all sides of the border. See the result below:

如果您删除了图像上的rounded-bottom类或任何其他rounded类，您的样式现在将在边框的所有侧面生效。请参阅以下结果：

In the example above, the rounded-bottom class has been removed from the markup, leaving the borders to do your bidding.

在上面的示例中， rounded-bottom类已从标记中删除，而边框则由您自己进行出价。

Depending on your specific needs, you may take out all .rounded classes provided by Bootstrap away from your markup and style the image yourself using the border-radius property.

根据您的特定需求，可以将Bootstrap提供的所有.rounded类从标记中移开，并使用border-radius属性自己设置图像的样式。

If you’d like some of the edges to retain the default Bootstrap behavior, you may leave the specific rounded side class within your markup, such as.rounded-top, while styling the images using border-radius too.

如果您希望某些边缘保留默认的Bootstrap行为，则可以在标记内保留特定的圆角类，例如.rounded-top,同时也可以使用border-radius设置图像的样式。

如何将图像左右对齐？ (How do I align images to the right or left?)

Alignment is a vital part of design. Most times you’ll keep moving stuff around until it feels right.

对齐是设计的重要组成部分。多数情况下，您会一直四处移动，直到感觉正常为止。

To align images to the left or right, use any of the classes, float-right or float-left.

要将图像向左或向右对齐，请使用任一类， float-right float-left.或float-left.

For example:

例如：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="rounded-circle float-left"/>

In order for the image to float to the desired direction, you need to remove the img-fluid class on the image, and give the image a fixed width like so:

为了使图像浮动到所需的方向，您需要删除图像上的img-fluid类，并为图像提供固定的宽度，如下所示：

img {  width: 150px}

The reason for that is img-fluid makes the image fill the available width of the device. It can’t move to the left or right of the screen as it already occupies all the space. You have to reduce the width of the image in your own CSS style sheet as I have done in the example above.

原因是img-fluid使图像填充了设备的可用宽度。它已经占据了所有空间，因此无法移至屏幕的左侧或右侧。正如我在上面的示例中所做的那样，您必须在自己CSS样式表中减少图像的宽度。

用文字描述为图像设置样式的最佳方法是什么？ (What’s the best way to style Images with text descriptions?)

It is not impossible to have images with text descriptions. This is useful in galleries and other instances where you’re trying to pass more information about the image by using a text block.

带有文字描述的图像并非不可能。这在画廊和其他尝试通过使用文本块传递有关图像的更多信息的实例中很有用。

The correct way to do this is to contain the images within a figure tag and have the text block within a figcaption block.

正确的方法是将图像包含在figure标记中，并将文本块包含在figcaption块中。

Below is an example:

下面是一个示例：

<figure>  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" class="img-fluid rounded"/>  <figurecaption>    My name is katey and I am only 2 and a half months old.  </figurecaption></figure>

<figure>  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" class="img-fluid rounded"/>  <figurecaption>    My name is jando and I am only 3 months old. Clearly, I love to have fun!  </figurecaption></figure>

And here’s the result of that:

结果如下：

Nothing magical yet. Now let’s style this.

还没有什么神奇的。现在让我们设置样式。

Bootstrap allows for the use of two class names, figure-img and figure-caption As you may guessed, they are both used on the image and text block respectively.

Bootstrap允许使用两个类名， figure-img和figure-caption如您所料，它们分别在图像和文本块上使用。

Let me show you an example.

让我给你看一个例子。

Go ahead and add the class names, figure-img and figure-captionlike so:

继续添加类名称，如figure-img和figure-caption如下figure-caption ：

<figure>  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" class="img-fluid figure-img"/>  <figurecaption class="figure-caption">    My name is katey and I am only 2 and a half months old.  </figurecaption></figure>

<figure>  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" class="img-fluid figure-img"/>  <figurecaption class="figure-caption">    My name is jando and I am only 3 months old. Clearly, I love to have fun!  </figurecaption></figure>

This will create some spacing between the image and the caption, and the text caption will be given a slightly calm color.

这将在图像和标题之间创建一些间距，并且文本标题将被赋予略微平静的颜色。

See the result below:

请参阅以下结果：

Note that to create the effect shown in the result above, I have added the class names img-fluid and rounded to the figure images. This will ensure that the images are responsive and have slightly rounded edges.

请注意，要创建上面结果中所示的效果，我添加了类名称img-fluid并rounded到图形图像。这样可以确保图像React灵敏，边缘略圆。

如何使用Bootstrap集中图像？ (How do I center Images with Bootstrap?)

Centering images can get a little tricky with Bootstrap. The first thing is to make sure that the image you’re trying to center hasn’t been styled to fit the available width or 100%. You should remove the img-fluid class on the image if it exists.

使用Bootstrap可以使居中图像有些棘手。首先是要确保未将要居中的图像设置为适合可用宽度或100%样式。您应该删除图像上的img-fluid类(如果存在)。

Let’s see an example.

让我们来看一个例子。

Below is a markup from an earlier example:

下面是来自先前示例的标记：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="rounded img-fluid"/>

I’ll take away the img-fluid class:

我将取消img-fluid类：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="rounded"/>

And go ahead to style the image with my own class which will restrict the width of the image to perhaps, 200px:

并继续使用我自己的类设置图片样式，这会将图片的宽度限制为200px ：

.img-restricted {  width: 200px}

This will yield the fixed width image you see below:

这将产生固定宽度的图像，如下所示：

Now, to center the image.

现在，将图像居中。

There are two different ways to center images in Bootstrap.

在Bootstrap中有两种使图像居中的方法。

use the text-center class name
使用text-center类名
use the mx-auto class name
使用mx-auto类名称

These options work a little differently.

这些选项的工作方式略有不同。

For the text-center class, the image to be centered must retain it’s default display value of inline-block or inline. Also, the class name must be added to the image parent block such as a div and NOT the image itself.

对于text-center类，要居中的图像必须保留其默认display值inline-block或inline 。同样，必须将类名添加到图像父块(例如div而不是图像本身。

Sorry if that feels confusing. Let’s see an example.

抱歉，这令人感到困惑。让我们来看一个例子。

<div class="text-center">  <img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="rounded img-restricted"/></div>

Note that the class name, text-center has been added to the parent div and NOT the img element.

请注意，类名text-center已添加到父div而不是img元素中。

And so, we have a centered image!

因此，我们有一个居中的图像！

Just so you see what a wrong markup would look like, this is wrong:

只是这样您就可以看到错误的标记，这是错误的：

<div>  <img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="text-center rounded img-restricted"/></div>

The markup is wrong because text-center has been applied to the img element. This will NOT center the image element.

标记是错误的，因为text-center已应用于img元素。这不会使图像元素居中。

Why does the text-center class work? Images are inline-block elements by default, so they will honor the text-center style applied on a parent element.

为什么以text-center类起作用？图像默认情况下是inline-block元素，因此它们将遵循应用于父元素的text-center样式。

Let’s see the second way to center images using the mx-auto class.

让我们看看使用mx-auto类将图像居中的第二种方法。

If for some reason you changed the default display property of the image and made it block , the text-center class will no longer work.

如果由于某种原因您更改了图像的默认display属性并将其设置为block ，则text-center类将不再起作用。

For example:

例如：

.img-restricted {   display: block}

Once you set the display property to block , the image no longer honors the text-center style — as it is no longer an inline element.

将display属性设置为block ，图像将不再采用text-center样式，因为它不再是inline元素。

In this case, you have to center the image like every other block element. Apply the mx-auto class name to the img element like so:

在这种情况下，您必须像其他所有块元素一样将图像居中。将mx-auto类名称应用于img元素，如下所示：

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="mx-auto rounded img-restricted"/>

And the image comes back to being centered

然后图像又回到了居中状态

Now you can go ahead and center whatever image you desire.

现在，您可以继续将所需的图像居中。

如何在元素的所有边上增加间距？ (How do I add spacing on all sides of an element?)

This is new in Bootstrap 4, and I have found it to be super helpful. Many times you need to add extra padding or margin to an element. In previous versions, you’d have to do this by writing your own styles. Sometimes it wouldn’t work owing to specificity issues. All that has been taken care of in the latest version of Bootstrap.

这是Bootstrap 4中的新功能，我发现它非常有用。很多时候，您需要为元素添加额外的padding或margin 。在以前的版本中，您必须通过编写自己的样式来实现。有时由于特定性问题而无法使用。最新版本的Bootstrap已解决了所有这些问题。

The spacing Bootstrap gives ranges from .25rem to 3rem. For most use cases, this should be enough.

Bootstrap的间距范围为.25rem至3rem 。对于大多数用例，这应该足够了。

Assume margins are represented by the letter m and padding by the letter p . Also, let the the different ranges be represented from 0 to 5.

假设边距由字母m表示，填充由字母p 。同样，让不同的范围代表从0 to 5.

With that out of the way, you can add spacing on all sides of an element by using any of the m-* classes for margins and p-* for padding.

这样一来，您就可以通过使用m-*类中的任何边距和p-*中的填充来在元素的所有边上增加间距。

For example m-0, m-1, m-2, m-3, m-4 and m-5 are all valid class names for adding margins. The same may be said for adding padding using any of the following class names p-0, p-1, p-2, p-3, p-4 and p-5.

例如， m-0 ， m-1 ， m-2 ， m-3 ， m-4和m-5都是用于添加边距的有效类名。对于使用以下类名称p-0 ， p-1 ， p-2 ， p-3 ， p-4和p-5.任何一个来添加填充，可以说是相同的p-5.

Let’s see a practical example using an earlier example. Let’s add some spacing to the figure images and text caption we created earlier.

让我们来看一个使用早期示例的实际示例。让我们为之前创建的图形图像和文本标题添加一些间距。

I will apply some padding to the figure element, like so:

我将对figure元素应用一些填充，如下figure ：

<figure class="p-5">  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is flerri and I am only 2 months old.  </figurecaption></figure>

What’s changed?

有什么变化？

I haved added the class p-5 that’s all that has changed. And the result?

我已经添加了所有已更改的p-5类。结果呢？

See below:

见下文：

As opposed to the other figures, you can see the first one has some padding as inner spacing added around all sides. Pretty cool!

与其他图相反，您可以看到第一个图有一些填充，这是因为四周增加了内部间距。太酷了！

Let’s go a step further and add the padding class p-5 to all the figures:

让我们更进一步，将填充类p-5到所有图中：

<figure class="p-5">  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is flerri and I am only 2 months old.  </figurecaption></figure>

<figure class="p-5">  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is katey and I am only 2 and a half months old.  </figurecaption></figure>

<figure class="p-5">  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is jando and I am only 3 months old. Clearly, I love to have fun!  </figurecaption></figure>

Now we have all the figures having some extra spacing.

现在，我们所有的图都有一些额外的间距。

Pretty impressive result for little extra code.

很少的额外代码，结果令人印象深刻。

如何减少或增加元素所有边上的间距？ (How do I reduce or increase the spacing added on all sides of an element?)

In the previous example, I discussed that the class ranges were represented from 0 to 5.

在前面的示例中，我讨论了类范围是从0 to 5.表示的0 to 5.

Zero, 0 will remove any spacing on an element, while the spacing increases as you go on from 1 to 5.

零， 0将删除元素上的任何间距，而间距随着从1到5.增加而增加5.

For example, the margin created by m-2 will be smaller than that created by m-5 Likewise, the padding created by p-1 will be smaller than that created by p-3.

例如， m-2创建的边距将小于m-5创建的边距。同样， p-1创建的边距将小于p-3.创建的边距p-3.

For the curious mind, 1 adds a spacing of 0.25rem , 2 adds a spacing of 0.5rem , 3 adds a spacing of 1rem , 4 adds a spacing of 1.5rem and 5 adds a spacing of 3rem .

对于好奇的心， 1增加的一个间距0.25rem ， 2增加的间隔0.5rem ， 3增加的间距1rem ， 4增加的间距1.5rem和5增加的间距3rem 。

To illustrate this , I’ll go ahead and add different spacing class names on the different figures like so:

为了说明这一点，我将继续在不同的图形上添加不同的间距类名称，如下所示：

<figure class="p-3">  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is flerri and I am only 2 months old.  </figurecaption></figure>

<figure class="p-4">  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is katey and I am only 2 and a half months old.  </figurecaption></figure>

<figure class="p-5">  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is jando and I am only 3 months old. Clearly, I love to have fun!  </figurecaption></figure>

Here’s the result of that.

这就是结果。

In the result above, you can see the padding increase from the first figure to the third.

在上面的结果中，您可以看到填充从第一个数字增加到第三个数字。

如何在元素的一侧添加间距？ (How do I add spacing to just ONE side of an element?)

There are times when you don’t want spacing on all sides of an element. You may only need some spacing at the top, bottom, left or right of the element.

有时候，您不希望元素的所有边都间隔。您可能只需要在元素的top ， bottom ， left或right left一些间距。

Bootstrap has all the options! That excites me. You’d be surprised how helpful this is when you begin to build stuff.

Bootstrap具有所有选择！那使我兴奋。当您开始构建东西时，您会感到惊讶。

Instead of using the m-* class names, add a t , b , l , or r for a top, bottom, left or right margin.

不要使用m-*类名，而是在top ， bottom ， left或right边距添加t ， b ， l或r 。

For example, mt-1 , mb-1 , ml-1 and mr-1 are all valid class names. The range 0 to 5 still remains the same as before.

例如， mt-1 ， mb-1 ， ml-1和mr-1都是有效的类名。 0到5的范围仍然与以前相同。

The t , b , r and l convention is also the same for padding.

对于填充， t ， b ， r和l约定也相同。

I’ll go ahead to change the spacing we have on all the figures to represent bottom padding only.

我将继续更改所有图中的间距，以仅表示bottom填充。

<figure class="pb-3">  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is flerri and I am only 2 months old.  </figurecaption></figure>

<figure class="pb-3">  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is katey and I am only 2 and a half months old.  </figurecaption></figure>

<figure class="pb-3">  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" class="img-fluid rounded figure-img"/>  <figurecaption class="figure-caption">    My name is jando and I am only 3 months old. Clearly, I love to have fun!  </figurecaption></figure>

As you can see, I have used the pb-3 class name. This will add bottom paddings of 1rem each.

如您所见，我使用了pb-3类名。这将添加每个1rem底部填充。

如何在元素的相对侧增加相同的间距？ (How do I add the same spacing to opposite sides of an element?)

So much for spacing. This is the last example —I promise.

间距是如此之大。这是最后一个例子，我保证。

It is also possible to add the spacing to say top and bottom sides of an element. In the same manner you may add the same spacing to the left and right of an element too.

也可以在元素的top和bottom增加间隔。同样，您也可以在元素的left和right添加相同的间距。

So, how is this done?

那么，这是怎么做的呢？

Let x represent left and right values, while y represents top and bottom values.

令x代表left和right值，而y代表top和bottom值。

To add the same spacing to both left and right sides of an element, use the mx-* class, and my-* class for both top and bottom values.

要向元素的left和right添加相同的间距，请对top和bottom值使用mx-*类和my-*类。

For example, mx-1 will add a margin of 0.25rem along the left and right sides of the element. my-1 will add 0.25rem along the top and bottom sides of the element.

例如， mx-1将沿元素的left和right添加0.25rem的边距。 my-1将沿着元素的top和bottom添加0.25rem 。

And that is all for spacing! Trust me, it is important stuff.

这就是间隔！相信我，这很重要。

如何设置主段落的样式？ (How do I Style a Lead Paragraph?)

The lead paragraph is usually the first paragraph in an essay or article. The aim is to hook the reader’s attention.

主要段落通常是文章或文章的第一段。目的是引起读者的注意。

To style a lead paragraph, add the class .lead to the paragraph. For example, I’ll go ahead to add the class .lead to the first paragraph of the Bunny Poem like so:

要设置主段落的样式，请在段落中添加.lead类。例如，我将继续将class .lead添加到Bunny Poem的第一段，如下所示：

<p class="lead"> The following is a mostly unintelligent poem about Bunnies. Don't think too hard about them. <br /> Enjoy!</p>

And the result is a slightly bigger paragraph as seen below:

结果是一个更大的段落，如下所示：

For the techies out there, the .lead class bumps up the size of the font by 25% and sets the font-weight to 300 , resulting in a bigger and much lighter text tone.

对于在那里的技术人员， .lead类将字体的大小增加了25% ，并将font-weight为300 ，从而产生了更大，更轻的文本色调。

Bootstrap的响应式设计基础 (The Foundations of Responsive Design with Bootstrap)

Have you used Flexbox before? If the answer to that is a yes, that’s great. With Flexbox, the flexbox formatting context is NOT initiated until a flex-container is created.

您以前使用过Flexbox吗？如果答案是肯定的，那就太好了。使用Flexbox，在创建flex-container之前，不会启动Flexbox格式化上下文。

Whether you have some experience with Flexbox or not, with Bootstrap a container element has to be defined to reap the benefits of responsive design offered by Bootstrap.

无论您是否有使用Flexbox的经验，都必须定义Bootstrap container元素才能从Bootstrap提供的响应式设计中受益。

那么，什么是Bootstrap容器？ (So, what is a Bootstrap container ?)

A container is simply an element with the .container class applied to it. For example:

容器只是应用了.container类的元素。例如：

<div class="container"></div>

Pretty simple, huh?

很简单吧？

For a simple markup, it is likely that you wrap every element in a bootstrap container.

对于简单的标记，可能会将每个元素都包装在引导容器中。

For example, I’ll refactor the Bunny Poem to use the Bootstrap container.

例如，我将重构“兔子诗”以使用Bootstrap容器。

<div class="container">    <h1> Bunnie Poems </h1>  <p class="lead"> The following is a mostly unintelligent poem about Bunnies. Don't think too hard about them. <br /> Enjoy!  </p>

<h2 class="display-5"> The Bunnie Who Had No Ears </h2>  <p> Mr Bunnie. How big the ears of your ancestors </p>  <p> How fluffy the pride of your family </p>  <p class="display-4"> But, wait... </p>  <p class="text-center">How is it that you have no ears </p>  <p> With your eyes you hear, and your nose you see? </p>  <p class="font-weight-bold"> How sad, Mr Bunny </p>  <p class="font-italic">See him hop, hop, hop about on legs so very strong.</p>  <strong class="font-weight-normal"> But ears, he has none </strong>  <p> Live long, and make your ancestors proud </p>  <p class="text-capitalize">We believe in you</p>  <blockquote class="blockquote">    Men have ears. Men have Noses. Men have Mouths.We do too. We are Bunnies    <div class="blockquote-footer">Ohans Bunny </div>  </blockquote>  ...</div>

As you can see from the code sample above, I have now wrapped EVERY element in a div with the class of container.

从上面的代码示例中可以看到，我现在将每个元素包装在带有容器类的div中。

<div class="container">    <!--every other element goes here --></div>

container和container-fluid有什么区别？ (What is the difference between container and container-fluid?)

In the example above, I did this:

在上面的示例中，我这样做：

<div class="container">    <!--every other element goes here --></div>

While that is correct, there’s one more container class that Bootstrap makes available, and that is, .container-fluid.

尽管这是正确的，但Bootstrap还提供了另外一个容器类，即.container-fluid.

The usage is the same, like this:

用法是一样的，像这样：

<div class="container-fluid">    <!--every other element goes here --></div>

So what’s the difference?

那有什么区别呢？

Let’s see visual examples.

让我们看一些直观的例子。

I always wondered why I didn't understand the difference between these when I started out learning the Bootstrap framework, years back. You’re in luck since I get it now. Let me explain it to you :)

I always wondered why I didn't understand the difference between these when I started out learning the Bootstrap framework, years back. You're in luck since I get it now. Let me explain it to you :)

For visual feedback, I will go ahead and give the body a red background color. I will also give container and container-fluid background colors of white. Just so they don’t inherit the red background color from body.

For visual feedback, I will go ahead and give the body a red background color. I will also give container and container-fluid background colors of white . Just so they don't inherit the red background color from body.

Here’s the code:

这是代码：

body {  background: red}.container,.container-fluid {  background: white}

Now, let’s see what difference it makes when you wrap all the content of the bunny poem in a .container div.

Now, let's see what difference it makes when you wrap all the content of the bunny poem in a .container div.

With all the content of bunny poem wrapped within a .container div, try to resize your browser.

What do you notice?

You will notice that the .container width changes at different viewports. It leaves some breathing space between the itself and the body element — this explains why you see see the red background in the gif above. Don’t forget the body element has a red background.

You will notice that the .container width changes at different viewports. It leaves some breathing space between the itself and the body element — this explains why you see see the red background in the gif above. Don't forget the body element has a red background.

Simple as it may seem, this is a very important behavior to note.

On the contrary, if you used .container-fluid , the div fills up the available viewport. You don’t see the red background as there is no breathing space between the container-fluid element and the body. All the available space has been occupied.

On the contrary, if you used .container-fluid , the div fills up the available viewport. You don't see the red background as there is no breathing space between the container-fluid element and the body . All the available space has been occupied.

As you can see, with the .container-fluid class you don’t have the luxury of space. The container takes up 100% of the available width. There’s still a small padding applied to the .container-fluid element, but the width doesn’t grow bigger or change with the user’s viewport. This is the difference between the .container and .container-fluid class names.

As you can see, with the .container-fluid class you don't have the luxury of space. The container takes up 100% of the available width. There's still a small padding applied to the .container-fluid element, but the width doesn't grow bigger or change with the user's viewport. This is the difference between the .container and .container-fluid class names.

What are Media Queries? (What are Media Queries?)

Since this section is focused on responsive design, I think it is important to have a refresher on what media queries are — especially for beginners. The section is also vital to understanding how the responsive modules in Bootstrap works.

Consider the code block below:

考虑下面的代码块：

@media screen and (min-width: 768px) {     .bg {         background-color: blue     }}

If you’re familiar with writing responsive modules by hand, then the code block above should be familiar.

If you're familiar with writing responsive modules by hand, then the code block above should be familiar.

The code block represents the use of CSS media queries. If you have no idea how that works, please read on.

Media queries are at the heart of responsive design. They let you target specific screen sizes and specify codes to be run on the specified devices alone.

The most popular form in which media queries are used is something called the @media rule.

It looks like this:

看起来像这样：

@media screen and (min-width: 300px) {  /*write your css in this code block*/}

Looking at it, you can almost guess what that does.“For a screen device with a minimum width of 300px … do this and that ”

Looking at it, you can almost guess what that does. “ For a screen device with a minimum width of 300px … do this and that ”

Any styles within the code block will only apply to devices that match the expression, “ screen and (min-width: 300px).” In the example above, the device width 300px is known as a breakpoint.

Any styles within the code block will only apply to devices that match the expression, “ screen and (min-width: 300px) .” In the example above, the device width 300px is known as a breakpoint.

I guess that helped clear up some confusion.

What is the Bootstrap Grid System? (What is the Bootstrap Grid System?)

With Bootstrap or any well-thought-out design, nothing just sits on the page. Every element sits on a well defined grid structure.

In this context, a grid is a series of intersecting vertical and horizontal guide lines used to structure content on a web page.

Nobody just slap content haphazardly on a page.

See the example above. Ever seen a content on a website arranged like that? I bet “no”.

请参阅上面的示例。 Ever seen a content on a website arranged like that? I bet “no”.

Most of the time, you will have a grid that contains well structured content. Something like this:

Most of the time, you will have a grid that contains well structured content. 像这样：

Bootstrap has a way to define grids and rightly place content on it too. This is what is called the Bootstrap grid system.

For more advanced users, It is important to note that you don’t need horizontal or vertical grid lines. With the CSS Grid sprinkled with some CSS magic, you can easily build a non-conventional layout.

For more advanced users, It is important to note that you don't need horizontal or vertical grid lines. With the CSS Grid sprinkled with some CSS magic, you can easily build a non-conventional layout.

How do I use the Bootstrap Grid? (How do I use the Bootstrap Grid?)

The Bootstrap 4 grid is built with Flexbox — which makes it even more powerful than ever before.

Fair warning: this part of Bootstrap tends to suck when you first learn it. But, if you take the time to master the Bootstrap grid system, you’ll find it to be one of the most important Bootstrap knowledge you have.

Fair warning: this part of Bootstrap tends to suck when you first learn it. But, if you take the time to master the Bootstrap grid system, you'll find it to be one of the most important Bootstrap knowledge you have.

Let me explain how it works.

So, your friend Chloe calls you at midnight and says, “I’m gonna get married!..haha”

So, your friend Chloe calls you at midnight and says, “ I'm gonna get married!..haha ”

You both get excited about the news and chat for longer than you expected. Just when you were going to end the call, you decide to act like a cool heaven-sent developer. “Hey, Chloe. I’m going to build your wedding website for you!” And you guys chatter for another 30 minutes…

You both get excited about the news and chat for longer than you expected. Just when you were going to end the call, you decide to act like a cool heaven-sent developer. “ Hey, Chloe. I'm going to build your wedding website for you! ” And you guys chatter for another 30 minutes…

Well, sweet story.

Good news is, you just made Chloe’s night. She’ll be super excited. Bad news, or (not so bad news) is you’re going to spend the time and energy, (and some coffee) to build the wedding site.

Good news is, you just made Chloe's night. She'll be super excited. Bad news, or (not so bad news) is you're going to spend the time and energy, (and some coffee) to build the wedding site.

So, you get a mockup like this one:

You don’t have a lot of time to build this site, so you resort to using Bootstrap. What’s the first thing to do? Set up the Bootstrap grid.

You don't have a lot of time to build this site, so you resort to using Bootstrap. What's the first thing to do? Set up the Bootstrap grid.

There are some pretty strict rules to follow while using the Bootstrap grid system.

First, in your mind’s eye scroll back up to the mockup above and try to break out each line of content into separate rows. This line of content should run from the horizontal to the vertical.

First, in your mind's eye scroll back up to the mockup above and try to break out each line of content into separate rows. This line of content should run from the horizontal to the vertical.

Can you do that?

你能做到吗？

I have gone ahead to do the same, and here’s the result:

I have gone ahead to do the same, and here's the result:

What I have done is to draw horizontal boxes extending from left to right around grouped content along a line. Even for more involved layouts, this sort of breakdown is very important.

These horizontal boxes are called rows. Denoted by the class .row

These horizontal boxes are called rows . Denoted by the class .row

It doesn't end here. Within each row there are individual boxes of content. See the previous image and try to identify these individual boxes of content.

Again, I have done the same. See the results below:

These individual boxes of content that live within rows are called columns.

These individual boxes of content that live within rows are called columns .

Makes sense?

说得通？

Columns are denoted by the class .col

Since rows and columns are great buddies, a column should not exist outside a row. That’s an important rule to remember.

Since rows and columns are great buddies, a column should not exist outside a row. That's an important rule to remember.

Also, every row must be placed within a container. Either .container or .container-fluid will do. A row cannot exist outside a container. It must live within a container.

In practice, you may have an overall container that houses the entire group of rows, like so:

Or you may have a container that wraps around each individual row, like this:

I seem to favor the latter. I find it more flexible — in certain use cases.

A quick summary: Every row must be placed within a container. Rows are specified with the class name .row , columns with .col and containers with either .container or .container-fluid.

A quick summary: Every row must be placed within a container. Rows are specified with the class name .row , columns with .col and containers with either .container or .container-fluid .

This is the foundation of how the Bootstap grid system works. I’ll be discussing some more practical use cases in the coming sections.

This is the foundation of how the Bootstap grid system works. I'll be discussing some more practical use cases in the coming sections.

What About Columns of Different Sizes? (What About Columns of Different Sizes?)

As you build web apps, it is very likely that you will need columns of different widths. Almost every time, there’ll be columns of varying widths within rows.

As you build web apps, it is very likely that you will need columns of different widths. Almost every time, there'll be columns of varying widths within rows.

Below is an example:

下面是一个示例：

A column may take up 60% width of the row, and the other 40%. How do you deal with this using the Bootstrap grid?

A column may take up 60% width of the row, and the other 40% . How do you deal with this using the Bootstrap grid?

The Bootstrap grid assumes a 12 column grid. It assumes that within every row, there exists 12 columns available. With these 12 columns, it becomes your duty to distribute the width of the columns whichever way you deem fit.

Let me explain.

让我解释。

As shown earlier, consider the row of content below:

The row contains two columns of different sizes.

Within this row, the bootstrap grid assumes 12 columns within this row, like so:

According to Bootstrap, there are 12 columns within every row. How you distribute the space is up to you.

Since you have only 2 user-defined columns (the bigger and smaller column) within the row, you’ve got to distribute the column space, like so:

Since you have only 2 user-defined columns (the bigger and smaller column) within the row, you've got to distribute the column space, like so:

It’s pretty simple, and in no time you’ll get used to this. You assign 8 of the columns to the bigger column, and the remaining 4 to the smaller column. Note that the sum of this equals 12.

It's pretty simple, and in no time you'll get used to this. You assign 8 of the columns to the bigger column, and the remaining 4 to the smaller column. Note that the sum of this equals 12.

The sum of the width of distributed columns within a row must not be greater than 12. In the example above, we used col-8 and col-4. The col-8 represents the bigger column that takes up 8 bootstrap grid columns, and col-4 represents the smaller column with 4 bootstrap grid columns.

The sum of the width of distributed columns within a row must not be greater than 12. In the example above, we used col-8 and col-4 . The col-8 represents the bigger column that takes up 8 bootstrap grid columns, and col-4 represents the smaller column with 4 bootstrap grid columns.

In this case, you will have two columns with one being 2x the width of the other. Remember, 8 / 4 = 2 .

If you wanted columns of equal width, you’d use col-6 and col-6 . This will create equal columns which take up half of the 12 Bootstrap grid columns.

If you wanted columns of equal width, you'd use col-6 and col-6 . This will create equal columns which take up half of the 12 Bootstrap grid columns.

If you wanted a bigger ratio between the two columns, you may use col-10 and col-2 .

I’m pretty sure you get it now.

I'm pretty sure you get it now.

What if I exceed 12 columns? (What if I exceed 12 columns?)

In the event that you have a total number of columns that exceed 12, they’ll wrap unto the next line. Just like using flex-wrap

In the event that you have a total number of columns that exceed 12, they'll wrap unto the next line. Just like using flex-wrap

For example:

例如：

<section>  <div class="container">    <div class="row">      <div class="col-3">      &lt;/div>      <div class="col-3">      </div>      <div class="col-3">      </div>      <div class="col-3">      </div>    </div>  </div></section>

With the markup above, the total number is 12. You get the expected result below:

If within the same row you add 2 more columns, what happens?

<section>  <div class="container">    <div class="row">      <div class="col-3">      </div>      <div class="col-3">      </div>      <div class="col-3">      </div>      <div class="col-3">      </div>      <div class="col-3">      </div>      <div class="col-3">      </div>    </div>  </div></section>

The next set of columns after 12 is wrapped unto the next line, like so:

This is good, but what about Responsive Grids? (This is good, but what about Responsive Grids?)

In the examples above, the column sizes defined will remain the same regardless of the user’s device.

In the examples above, the column sizes defined will remain the same regardless of the user's device.

For example, col-8 and col-4 will create 2 columns within the row. This will be the case on mobile devices, and larger devices.

For the sake of responsive design, this will rarely be the case. If you have a 2 column grid on tablet devices, you may want the columns to stack up on mobile.

You may also have a 3 column grid on desktop devices, but 2 on tablet devices or only 1 column on mobile devices. In this case, there’s got to be a way to hide the extra columns we do not want on smaller devices.

You may also have a 3 column grid on desktop devices, but 2 on tablet devices or only 1 column on mobile devices. In this case, there's got to be a way to hide the extra columns we do not want on smaller devices.

Luckily, bootstrap has these use cases covered!

The Bootstrap columns may be modified using certain modifiers. For instance:

The Bootstrap columns may be modified using certain modifiers. 例如：

col-sm refers to a column on small devices (phones) and above

col- sm refers to a column on small devices (phones) and above

col-md refers to a column on medium devices (tablets) and above

col- md refers to a column on medium devices (tablets) and above

col-lg refers to a column on large devices (desktops) and above

col- lg refers to a column on large devices (desktops) and above

col-xl refers to a column on extra large (wide screen) devices

col- xl refers to a column on extra large (wide screen) devices

Let’s go back to the example of a 2 column width. We need the columns to appear as 2 columns on medium devices (and larger), but stack horizontally on smaller devices (phones).

Let's go back to the example of a 2 column width. We need the columns to appear as 2 columns on medium devices (and larger), but stack horizontally on smaller devices (phones).

How do you do this?

你怎么做到这一点？

Begin with a markup like so:

<div class="row">    <div></div>    <div></div></div>

I have assumed that this row will be placed within a container. Remember, every row must be placed within a container.

I have assumed that this row will be placed within a container. Remember, every row must be placed within a container .

Bootstrap employs a mobile first philosophy. By default you should build the design for mobile devices, then move up to bigger devices from there.

In that case, we’ll deal with the display on mobile devices first.

In that case, we'll deal with the display on mobile devices first.

<div class="row">    <div class="col-12"></div>    <div class="col-12"></div></div>

The markup above will create columns that take up all the available width within the row. The columns will stack vertically with a 100% width.

This isn’t the behaviour we want for medium devices, so we add the modifier classes, like so:

This isn't the behaviour we want for medium devices, so we add the modifier classes, like so:

<div class="row">    <div class="col-12 col-md-6"></div>    <div class="col-12 col-md-6"></div></div>

You see that?

你看到了吗？

Note that for the smallet of devices, there’s no need for a modifier class.

Note that for the smallet of devices, there's no need for a modifier class.

Now, for medium devices and larger the row will assume a 2 column width. One taking up 6 columns and the other takes 6 columns, with the Bootstrap 12 column grid.

In the practical section, I’ll discuss how to hide columns on smaller devices.

In the practical section, I'll discuss how to hide columns on smaller devices.

How did that work? (How did that work?)

Bootstrap has implemented media queries with certain breakpoints to meet every responsive need. Ranging from extra small phones to small phones, tablets, laptops and even bigger desktops — Bootstrap has you covered.

Like the margin and padding classes we studied earlier, there is a specific naming convention to applying styles based on the specific screen size of the user.

As seen in the image above, xs refers to extra small phones, sm refers to small phones, md refers to medium devices such as tablets, lg refers to large devices such as laptops, and xl refers to extra large screens such as large desktop screens.

For the curious mind, here’s what the Bootstrap media queries look like:

For the curious mind, here's what the Bootstrap media queries look like:

// Extra small devices (portrait phones, less than 576px)// No media query since this is the default in Bootstrap// Small devices (landscape phones, 576px and up)@media (min-width: 576px) { ... }// Medium devices (tablets, 768px and up)@media (min-width: 768px) { ... }// Large devices (desktops, 992px and up)@media (min-width: 992px) { ... }// Extra large devices (large desktops, 1200px and up)@media (min-width: 1200px) { ... }

If you’re an advanced user, take a look at the docs for version4 and version3. Note the difference in the grid breakpoints. I spent some time figuring this out myself. So, go do the same.

If you're an advanced user, take a look at the docs for version4 and version3 . Note the difference in the grid breakpoints. I spent some time figuring this out myself. So, go do the same.

What's the deal with `min-width` ? (What’s the deal with `min-width`?)

You’ll notice that the Bootstrap media queries use min-width . You’d also notice that in previous examples I kept saying, “medium devices and larger”

You'll notice that the Bootstrap media queries use min-width . You'd also notice that in previous examples I kept saying, “medium devices and larger”

For example, col-md targets medium devices and larger. So, if you specify a column to take up 8 columns on medium devices, col-md-8 other devices larger than medium will also take up the same width definition. There’s no need to write col-lg-8 or col-xl-8

This behavior is owing to the use of min-width within the Bootstrap media queries.

// Medium devices (tablets, 768px and up)@media (min-width: 768px) { ... }

The code block above says, “for devices that have a minimum width of 768px …”. This embodies every device larger than 768px too.

Can I customize the Bootstrap classes based on specific screen sizes? (Can I customize the Bootstrap classes based on specific screen sizes?)

Yes, this can be done, but not for every Bootstrap class. Let’s take styling texts for example. If you wanted a bit of text to appear to the center only on mobile phones, how would you do that?

Yes, this can be done, but not for every Bootstrap class. Let's take styling texts for example. If you wanted a bit of text to appear to the center only on mobile phones, how would you do that?

Use the class, text-sm-center on the text block:

<p class="text-sm-center">How is it that you have no ears </p>

The text, “How is that you have no ears” will appear normal in the document flow, except when viewed by a small phone. At this point, it will be centered across the screen.

摘要 (Summary)

This has been a pretty enlightening section. If you’re new to Bootstrap, you should be a lot more comfortable with how the framework works now. If you’re an old hat, then you’ve probably seen new ways this version of Bootstrap differs from the former.

This has been a pretty enlightening section. If you're new to Bootstrap, you should be a lot more comfortable with how the framework works now. If you're an old hat, then you've probably seen new ways this version of Bootstrap differs from the former.

In the coming section, we will go practical. We will display every other technique, trick and new goodies in the framework with practical examples.

As discussed in the “What You’ll Learn” section, we will go ahead and start building the Startup Home Page.

As discussed in the “What You'll Learn” section, we will go ahead and start building the Startup Home Pag e .

Getting Practical with Bootstrap 4 (Getting Practical with Bootstrap 4)

Haha! This is the part of the article that gets me really excited. In the earlier sections, I tried to get you comfortable with the Bootstrap 4 framework, now let’s build some really cool projects.

哈哈！ This is the part of the article that gets me really excited. In the earlier sections, I tried to get you comfortable with the Bootstrap 4 framework, now let's build some really cool projects.

When we are finished with this project, you should have successfully built the a single page Startup Page.

When we are finished with this project , you should have successfully built the a single page Startup Page.

What you will learn (What you will learn)

As well as being the first real world application of the concepts taught in this article, building this project has some advantages.

If you’re new to Bootstrap, I made sure to touch up on the fundamental concepts you need. For more experienced developers, this example highlights some of the new features of Bootstrap 4.

If you're new to Bootstrap, I made sure to touch up on the fundamental concepts you need. For more experienced developers, this example highlights some of the new features of Bootstrap 4.

The example also shows how Flexbox is used in Bootstrap 4. Also, some seemingly simple things such as offsetting columns and aligning block elements to the center are handled differently in this version of the framework.

These are a few of the things we will be looking at in this example.

What you need to follow along (What you need to follow along)

For the sake of a rapid development set up, I’ll be using CodePen for this demo. That’s all you need to follow along.

For the sake of a rapid development set up, I'll be using CodePen for this demo. That's all you need to follow along.

To start we will focus on the initial viewport of the Startup Home Page. It fills up the screen with a decent background image, a text block and a CTA (Call To Action) button.

Also, since we will be focusing on a mobile first approach, it is important to see how the design views on mobile devices.

Below is the mobile mockup:

As seen in the image above, everything is pretty much the same.The CTA and opening paragraph stay horizontally aligned to the start of the page.

Now that we understand the design requirements, let’s get started with the initial markup required.

Now that we understand the design requirements, let's get started with the initial markup required.

初始标记 (The initial markup)

If working locally, the initial markup you need for a decent bootstrap project is this:

<!DOCTYPE html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">  </head>

<body>     <div class="container"></div>  </body></html>

Don’t let the seemingly complex code turn you off. The markup is quite basic.

Don't let the seemingly complex code turn you off. The markup is quite basic.

First, consider the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The meta tag exists to ensure that the pages developed are displayed correctly on mobile devices. If you define media queries without this meta tag, you may not get the look you were hoping for on mobile devices. It is important you have it included. The tag also ensures that touch zooming is accounted for on mobile devices.

Curous what the content and initial-scale attributes do? See this well explained stackoverflow answer.

Curous what the content and initial-scale attributes do? See this well explained stackoverflow answer .

Secondly, consider the link tag:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

The link tag above is the same as any other link tags you’ve used in the past. It includes the href attribute that points to the bootstrap cdn.

The link tag above is the same as any other link tags you've used in the past. It includes the href attribute that points to the bootstrap cdn .

Okay, I know what you’re thinking. What are theintegrity and crossorgin html attributes?

Okay, I know what you're thinking. What are the integrity and crossorgin html attributes?

The integrity attribute checks the source from which the cdn is loaded and ensures that the file hasn’t been manipulated. It is a security measure to ensure you’re getting what you “ordered”. This may seem trivial, but for a long time a prevalent disadvantage to using a CDN was that you had no direct control over what was in the content provided. This could lead to having unreliable or tampered imported code.

The integrity attribute checks the source from which the cdn is loaded and ensures that the file hasn't been manipulated. It is a security measure to ensure you're getting what you “ordered”. This may seem trivial, but for a long time a prevalent disadvantage to using a CDN was that you had no direct control over what was in the content provided. This could lead to having unreliable or tampered imported code.

The crossorigin attribute is present when a request is loaded using ‘CORS’.

The crossorigin attribute is present when a request is loaded using 'CORS'.

Do not think too hard about what these attributes are. Let’s keep going.

Do not think too hard about what these attributes are. 我们继续吧。

At this point it is safe to assume that you have the basic markup setup. Also, note that the markup above doesn’t contain any links to a JavaScript file. This is intentional. Further down this article, we may take a look at adding interactivity using JavaScript much later.

At this point it is safe to assume that you have the basic markup setup. Also, note that the markup above doesn't contain any links to a JavaScript file. 这是故意的。 Further down this article, we may take a look at adding interactivity using JavaScript much later.

Codepen Setup (Codepen Setup)

I’ll be using codepen for an easier setup. In the codepen,you can add the meta tags in the html settings pop up. Please refer to the screenshot below.

I'll be using codepen for an easier setup. In the codepen,you can add the meta tags in the html settings pop up. Please refer to the screenshot below.

In your html go ahead and kick things off with this:

<h1>Hello World</h1>

If you have “Hello World” displayed on the screen then you’re ready to follow along without any glitches.

If you have “ Hello World ” displayed on the screen then you're ready to follow along without any glitches.

Initial Document Structure (Initial Document Structure)

One of the perks of a new API is that there are really no best practices in its early stages of coverage. The same may be said for Bootstrap 4.

If you’ve worked with Bootstrap in the past then you know that your project markup can get difficult to manage in no time. For this reason, I have some patterns that work well for me. You do not need to adopt them, but they can certainly make your work easier. Try them.

If you've worked with Bootstrap in the past then you know that your project markup can get difficult to manage in no time. For this reason, I have some patterns that work well for me. You do not need to adopt them, but they can certainly make your work easier. Try them.

When you take a look at the final design, you will realize that there are categorized sections of content.

When you take a look at the final design , you will realize that there are categorized sections of content.

There’s an initial section with a call to action, a section with the app mockup, a section that highlights some of the features of the business, a testimonial section, and more. You get the gist. In all you should have 8 sections.

There's an initial section with a call to action, a section with the app mockup, a section that highlights some of the features of the business, a testimonial section, and more. You get the gist. In all you should have 8 sections.

The first rule of thumb is to have separate layers of content using a section tag or any other semantic html5 tag. Why? By design, using Bootstrap means you’ll have a lot of divs in your markup. Using the section tag makes the markup a little more manageable.

The first rule of thumb is to have separate layers of content using a section tag or any other semantic html5 tag. 为什么？ By design, using Bootstrap means you'll have a lot of div s in your markup. Using the section tag makes the markup a little more manageable.

<section></section><section></section><section></section><section></section><section></section><section></section><section></section><section></section>

You should start with 8 tags as shown above.

Now, give each tag a unique id .

The reason I choose id over classes has to do with specificity and having a unique identifier. You’ll come to see why this is important later.

The reason I choose id over classes has to do with specificity and having a unique identifier. You'll come to see why this is important later.

I’ll go ahead and name the section elements with relevant IDs

I'll go ahead and name the section elements with relevant IDs

<section id="introduction"></section&gt;<section id="info--1">&lt;/section&gt;<section id="info--2">&lt;/section><section id="info--3"></section>;<section id="featured-on"></section>&lt;section id="feature-rundown"&gt;</section><section id="pricing"></section><section id="footer"></section>

Now we have 8 section tags ready to be put to good use.

Building the Initial viewport (Building the Initial viewport)

Let’s analyze and build the initial section section#introduction

Let's analyze and build the initial section section#introduction

What we have is a section that fills the initial viewport of the user, with a message and call to action (CTA) vertically centered and horizontally aligned to the start of the section.

What we have is a section that fills the initial viewport of the user, with a message and call to action (CTA) vertically centered and horizontally aligned to the start of the section .

Now let’s apply the knowledge of grids to the project being built.

Now let's apply the knowledge of grids to the project being built.

The initial viewport will have its internal markup structured like this:

<section id="introduction">   <div class="container">    <;div class="row">       <div class="col-12"></div>    </div>   </div></section>

Now, we have a basic structure in place.

Note the use of the column class, .col-12 This ensures that the div fills the entire available 12 columns. Adding the class, .col-12 means that at every screen size, big or small, the div will always fill the entire 12 column grid. It will be full width across the grid.

The markup needed within the div.col-12 is this:

<h1>Coding on steroids</h1><p>Stop hiring engineers to write your code. Just use the 1kb script that magically solves all your problems and algorithms.</p><a href="#" role="button">Try it yesterday</a>

What you should have now is a bare page that doesn’t look any good.

What you should have now is a bare page that doesn't look any good.

Let's make this pretty (Let’s make this pretty)

There are a couple of things we need to make this UI great.

(i) Style the section#introductionsection#introduction needs a background image and is required to fill the user’s viewport

(i) Style the section#introduction section#introduction needs a background image and is required to fill the user's viewport

(ii) Rightly position the content blockThe content block, the text blocks, h1 and p containing “Coding on Steroids…” must be perfectly aligned vertically to the center

(ii) Rightly position the content blockThe content block, the text blocks, h1 and p containing “ Coding on Steroids…” must be perfectly aligned vertically to the center

(iii) Style the Header and Lead paragraphThe h1 and p elements need some styling — no matter how basic

(iv) Style the CTA Call to actions should be legible and distinct.The button element should also be styled too

(iv) Extend beyond mobile viewFinally, on bigger screens, the content block should NOT fill the available width but take up 50% of the available width

With these in mind, we will solve these problems with the least amount of custom styles, taking advantage of the default Bootstrap styles where possible.

Let’s get started.

让我们开始吧。

解决方案 (Solutions)

To style section#introduction with a background image, you need to write some custom style, like this:

#introduction {  background: linear-gradient(rgba(100,181,246 ,1), rgba(0,0,0,0.8)), url('http://bit.ly/2fBj6OJ') 0% 0%/cover }

This will give the section#introduction a subtle background image topped with a mild linear gradient.

If you’re not sure what the code above does, the following illustration may help:

If you're not sure what the code above does, the following illustration may help:

It is required that the section#introduction fills the user’s viewport. Bootstrap does not have a utility class for this purpose, so we need to write ours. Here it is:

It is required that the section#introduction fills the user's viewport. Bootstrap does not have a utility class for this purpose, so we need to write ours. 这里是：

.fill-viewport {  min-height: 100vh }

Now, add this class to section#introduction like so:

<section id="introduction"> <div class="container">   <div class="row fill-viewport">       ...   </div> </div></section>

What have I done here?

You’ll notice that I have added the .fill-viewport to the div.row NOT the overall container, div.container or the section#introduction.

You'll notice that I have added the .fill-viewport to the div.row NOT the overall container, div.container or the section#introduction.

This is very intentional. As a rule of thumb, every utility class you need on a containing content body should go in the .row except in certain special occasions. This is how I like to work. One other reason I follow this rule is that it makes the markup neat, without having class names jumping around everywhere. You need a bit of structure to write good code.

With that you should have a section that looks pretty good.

You must have noticed that the content block isn’t well positioned. Let’s have it in the vertical center of the page.

You must have noticed that the content block isn't well positioned. Let's have it in the vertical center of the page.

Here’s the perfect place to point this out. Every Bootstrap 4 .row is by default a flex-container.

Here's the perfect place to point this out. Every Bootstrap 4 .row is by default a flex-container.

I cannot overemphasise how important this is.

Every Bootstrap 4 .row is by default a flex-container.

This opens up opportunities that weren't available in previous versions of the framework.

Since.row is a flex-container we can go ahead to add the Bootstrap utility class align-items-center This will align the content of every flex-container to the center.

Since .row is a flex-container we can go ahead to add the Bootstrap utility class align-items-center This will align the content of every flex-container to the center.

Apply it like this:

<section id="introduction"> <div class="container">   <div class="row fill-viewport align-items-center">       ...   </div> </div></section>

Again, I have added this class to the .row .

Below is the result of that:

结果如下：

At this point, we are making decent progress.

Bootstrap 4 has many other Flexbox utility classes. They barely need a lot of explanations. The class names are very descriptive.

Let’s style the h1 and p elements.

Let's style the h1 and p elements.

I had taken the time the discuss text utility classes early in this article. To style these text elements, do this:

<h1 class="text-white">Coding on steroids<;/h1><;p class="lead">Stop hiring engineers to write your code. Just use the 1kb script that magically solves all your problems and algorithms.</p>

As you already know, text-white will give the h1 a white color, .lead will style the paragraph a little differently from other paragraphs.

This looks good, but I want the paragraph to have a slighly faintier color. For this purpose, we will write another utility class:

.text-white-70 {  color: rgba(255,255,255,0.7)}

This will give the text a slightly transparent white color.

Go ahead and use this class on the lead paragraph like this:

<p class="lead text-white-70">Stop hiring engineers to write your code. Just use the 1kb script that magically solves all your problems and algorithms.</p>

And now you should have this:

Note how we are abstracting tiny functionalities into reusable CSS classes. This is really important for reusability.

The button is still unstyled. We need to fix that.

Buttons in Bootstrap are styled using the .btn class. There are a few variations with respect to color. For example.btn-primary and .btn-secondary will give a blue and gray button respectively.

Buttons in Bootstrap are styled using the .btn class. There are a few variations with respect to color. For example .btn-primary and .btn-secondary will give a blue and gray button respectively.

To style the link , do this:

<a class="btn btn-primary" href="#" role="button">Try it yesterday</a>

At this point, we have a section that looks good on mobile, but not so great on larger devices. Let’s fix that.

At this point, we have a section that looks good on mobile, but not so great on larger devices. 让我们修复它。

Bootstrap follows the widely accepted mobile first approach to development. This means you build for mobile devices first, then you adapt the design to even larger screen sizes. This is what we will now do.

When defining the containing grid within the section#introduction we did just that.

<div class="col-12">   ....</div>

By writing this, we said “Oh Bootstrap, let this div fill up the entire 12 column width on all screen sizes.” This is good — in the spirit of designing from a mobile first perspective.

By writing this, we said “ Oh Bootstrap, let this div fill up the entire 12 column width on all screen sizes. ” This is good — in the spirit of designing from a mobile first perspective.

Now let’s have the column take up half of the width on larger devices. You do this like so:

Now let's have the column take up half of the width on larger devices. You do this like so:

<div class="col-12 col-md-6">     ...</div>

Now what we’ve said is this: “Oh Bootstrap, by default, let this div fill up the entire 12 column width, BUT let the div take up 6 columns on larger devices.”

Now what we've said is this: “ Oh Bootstrap, by default, let this div fill up the entire 12 column width, BUT let the div take up 6 columns on larger devices. ”

12 halved, equals 6. Hence, the column will take up half of the available space on larger devices.

That wraps up the development of the initial viewport.

Let’s move on to the next section.

Let's move on to the next section.

Building the startup details section (Building the startup details section)

The next section is quite interesting. Below is how it views on big, medium and small devices:

On mobile devices, the user is shown a full width column with important bit of texts. On tablet devices, more text is shown, and an app preview by the side. This makes for 2 equal width columns.

On larger devices, even more text is displayed, and the mobile app preview remains too.

Now, let’s build this.

Now, let's build this.

By convention, we will take a mobile first design. Design for mobile devices first.

Fill the section#info--1 with the following markup:

<section id="info--1">  <div class="container">    <;div class="row pt-5 align-items-center">      <div class="col-12">        <h6 class="text-uppercase text-black-40">          million dollar info        </h6>        <h2>We do what our competitors do, but with 500% more</h2>        <p>Sed ut perspiciatis unde omnis iste natus error        sit voluptatem accusantium doloremque laudantium,        totam rem aperiam..</p>     </div>    </div>  </div></section>

You’d notice that I snugged in a lot more here. Let me explain

You'd notice that I snugged in a lot more here. 让我解释

Consider the .row:

Consider the .row :

<div class="row pt-5 align-items-center"></div>

Within the row there is a column represented by:

<div class="col-12">...</div>

col-12 ensures that the div spans the full width, 12 columns by default.

There are two additional classes within the .row you should be familiar with. pt-5 adds a padding top to the div and align-items-center ensures that the flex-items are centered vertically.

Do not forget that in Bootstrap 4, every row is a flex-container.

The following code block represent the text blocks:

<h6 class="text-uppercase text-black-40">million dollar info</h6><h2>We do what our competitors do, but with 500% more</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem  accusantium doloremque laudantium,totam rem aperiam..</p>

text-uppercase is a bootstrap utility class for making the text appear capitalized.

text-black-40 is another tiny class that gives the text a color of black with a 40% opacity.

.text-black-40 {  color: rgba(0,0,0,0.4)}

And with that you should have this:

Looks good on mobile. Now let’s fix the display on bigger devices.

Looks good on mobile. Now let's fix the display on bigger devices.

For medium devices, we need two columns. One to house the app mockup, and the other the text block.

The code block below highlights the solution. Go ahead and add the image in a new column just within the .row but above the text block.

<section id="info--1">  <div class="container">    <div class="row pt-5 align-items-center">       <div class="col d-none d-md-block align-self-end">         <img src="http://bit.ly/2fyUtlS" class="img-fluid"/&gt;       </div>       <div class="col">        <h6 class="text-uppercase text-black-40">          million dollar info        </h6>        <h2>We do what our competitors do, but with 500% more</h2>        <p>Sed ut perspiciatis unde omnis iste natus error        sit voluptatem accusantium doloremque laudantium,        totam rem aperiam..</p>     </div>    </div>  </div></section>

The new code block that includes the image is this:

<div class="col d-none d-md-block align-self-end">    <img src="http://bit.ly/2fyUtlS" class="img-fluid"/></div>

There are a couple new Bootstrap utility classes in there. Let’s have a look.

There are a couple new Bootstrap utility classes in there. 我们来看一下。

Class names begining with a d- represent display classes.

d-none will hide any element to which it is applied, while d-block will show the element by giving it a display: block Thus, applying the classes d-none and d-md-block says, “Hey Bootstrap, hide this element by default, but display the element on medium md devices.”

d-none will hide any element to which it is applied, while d-block will show the element by giving it a display: block Thus, applying the classes d-none and d-md-block says, “ Hey Bootstrap, hide this element by default, but display the element on medium md devices .”

Also, align-self-end will make sure that the element is aligned to the bottom of the flex container vertically. Some Flexbox goodies there!

There’s one more change you may not have noticed.

There's one more change you may not have noticed.

We now have 2 columns each with the class name .col Instead of having the two columns have the class name, col-12 change this to just .col

<section id="info--1">  <div class="container">    <div class="row pt-5 align-items-center">       <div class="col d-none d-md-block align-self-end">         <img src="http://bit.ly/2fyUtlS" class="img-fluid"/>       &lt;/div>       <div class="col">        <h6 class="text-uppercase text-black-40">          million dollar info        </h6>        <h2>We do what our competitors do, but with 500% more</h2>        <p>Sed ut perspiciatis unde omnis iste natus error        sit voluptatem accusantium doloremque laudantium,        totam rem aperiam..</p>     </div>    </div>  </div></section>

When you have any number of elements having the .col class, they will occupy the available width in equal dimensions.

In this case, the image block and the content area will occupy 50% of the available width. If you had three elements within a .row with each having the class .col , they will each take up 30% of the available width. Pretty sure you understand it now.

Here’s the result you should have at this point:

Here's the result you should have at this point:

We’re almost done with this section apart from the additional text blocks on larger devices. Let’s fix that.

We're almost done with this section apart from the additional text blocks on larger devices. 让我们修复它。

Since columns can be nested, we can include another column to house the side by side text block on large devices.

This should go inside the second column, and beneath the last text block:

<!-- columns can be nested --> <div class="row">   <div class="d-none d-md-block col">      <h5>killer feature</h5>       <p>veritatis et quasi architecto beatae vitae       dicta sunt explicabo.&lt;/p>       <a href="#" class="d-block">learn more&lt;/a>    </div>    <div class="d-none d-lg-block col">       <h5>second killer feature</h5>        <p>veritatis et quasi architecto beatae vitae        dicta sunt explicabo.</p>        <a href="#" class="d-block">learn more</a>    </div> </div>

You’ll notice the use of the display utility classes again. By default, both div within the row are hidden with d-none Hence they wont display on mobile devices. The class name col ensures they both take equal spaces. However, the second text block will only be shown on larger devices with .d-lg-block.

You'll notice the use of the display utility classes again. By default, both div within the row are hidden with d-none Hence they wont display on mobile devices. The class name col ensures they both take equal spaces. However, the second text block will only be shown on larger devices with .d-lg-block .

Since Bootstrap employs a mobile first approach by design, the first text block with the class of d-md-block will also be visible on large devices.

“show on mobile” is synonymous to “show on all devices”.“show on medium devices” also means “show on medium devices and everything else larger”.

I really hope you understood this.

Here’s the result so far:

Here's the result so far:

Let’s move on to the next section!

Let's move on to the next section!

Building the about section (Building the about section)

The third section has pretty much the same vibe as the second section I discussed above. There are a few subtle differences:

The use of pre tags
The use of pre tags
A change in the order of the columns when displayed on mobile devices.
A change in the order of the columns when displayed on mobile devices.

Here is the entire code that makes up the section:

<section id="info-2" class="bg-dark"> <div class="container">   <div class="row align-items-center fill-80-viewport">     <div class="col-12 col-md-6 my-5 order-2 order-md-1">       <p class="text-uppercase text-white-40"><strong>faster development</strong></p>       <h2 class="text-white">Coding has never been this fast. It's almost magical</h2>       <p class="lead text-white-70">Stop hiring engineers to write your code. Just install one script that magically solves all your problems.</p>       <a class="btn btn-light d-block d-md-inline-block py-3" href="#" role="button">Read the docs</a>     </div>     <pre class="col-12 col-md-6 my-5 order-1 order-md-2 py-4 border border-info rounded text-info">      <span>1</span> <span> //codingSteroids.js</span>       <span>2</span>      <span>3</span>   const data = {      <span>4</span>        "purpose": {      <span>5</span>        "getId": "#element",      <span>6</span>        "companyName": "coolStartup",      <span>7</span>      }      <span>8</span>    }      <span>9</span>           <span>10</span>   function codingSteroids(        <span>11</span>       data,      <span>12</span>       getSteroidsType      <span>13</span>   )       <span>14</span>           <span>15</span>   function getSteroidsType() {      <span>16</span>     return "codeHellish!"      <span>17</span>   }      </pre>   </div> </div></section>

You may be tempted to think the code block represented above is complex stuff. Yet on close investigation, it really isn’t.

You may be tempted to think the code block represented above is complex stuff. Yet on close investigation, it really isn't.

As always, the section begins with a familiar markup:

<section id="info-2" class="bg-dark"> <div class="container">   <;div class="row align-items-center fill-80-viewport">     ...   </div> </div></section>

I always give the sections an Id Also, within the row exists two columns:

<section id="info-2" class="bg-dark"> <div class="container">   <div class="row align-items-center fill-80-viewport">     &lt;div class="col-12"     <;/div&gt;     <pre class="col-12"     </pre>   </div> </div></section>

By default, both columns have been set up to take up all 12 available columns. Hence, they will stack against each other vertically.

On medium devices and larger, the columns take up equal column width:

<section id="info-2" class="bg-dark"> <div class="container">   <div class="row align-items-center fill-80-viewport">     <div class="col-12 col-md-6"     <;/div&gt;     &lt;pre class="col-12 col-md-6"     </pre>   </div> </div></section>

You should be used to this by now :).bg-dark gives the section a dark background. Contained within the section is a container and a nested row.

You should be used to this by now :) .bg-dark gives the section a dark background. Contained within the section is a container and a nested row.

align-items-center is a Flexbox utility class that aligns the content of the row to the vertical center. Do not forget that every row is by default a flex-container.

fill-80-viewport is a tiny class I have written like so:

.fill-80-viewport {  min-height: 80vh}

The class .fill-80-viewport ensures that the section takes up 80% of the user’s viewport height.

The class .fill-80-viewport ensures that the section takes up 80% of the user's viewport height.

So, here’s the new stuff we haven’t discussed:

So, here's the new stuff we haven't discussed:

<section id="info-2" class="bg-dark"> <div class="container">   <div class="row align-items-center fill-80-viewport">     <div class="col-12 order-2 order-md-1"     </div&gt;     <pre class="col-12 order-1 order-md-2"     </pre>   </div> </div></section>

Assuming you’re familiar with how Flexbox works, the order property determines the visual order in which flex-items are displayed. The item with the lowest order value is displayed first and the highest last. Essentially, the items are displayed in terms of increasing order values — from lowest to highest.

Assuming you're familiar with how Flexbox works, the order property determines the visual order in which flex-items are displayed. The item with the lowest order value is displayed first and the highest last. Essentially, the items are displayed in terms of increasing order values — from lowest to highest.

The order- class names are an attempt to recreate this same behavior. They are Bootstrap Flexbox utility classes that allow for any integer values such as order-5 and order-10.

An element with the class order-2 has an higher order value than one with order-1 You guessed right. The higher the integer value, the higher the order value.

The order class names also have responsive variations. Thus order-md-1 will have an order value of 1 when viewed on medium sized device or larger. Consequently, order-md-2 will have an order value of 2 when viewed on a medium sized device or larger.

In the light of these, you should be able to make sense of this:

<div class="col-12 order-2 order-md-1"</div><pre class="col-12 order-1 order-md-2"</pre>

By default, the pre tag will be displayed first, then the div . This is because order-1 is displayed first, then order-2 in terms of increasing order values. When viewed on larger devices, the content within the div will be displayed first, followed by the content within the pre tags.

The rest of the markup that makes up the section isn’t much to figure out. It is largely based on text and spacing utility classes we’ve already spent so much time looking at.

The rest of the markup that makes up the section isn't much to figure out. It is largely based on text and spacing utility classes we've already spent so much time looking at.

Let’s move on the the next content section.

Let's move on the the next content section.

Building the testimonial section (Building the testimonial section)

If you’ve been following along, it should be obvious that this one is very similar to the first content section.

If you've been following along, it should be obvious that this one is very similar to the first content section.

It is made up of one column. The column seats on the right hand on larger devices, but stays aligned to the start on smaller devices. Here’s the markup that powers this section:

It is made up of one column. The column seats on the right hand on larger devices, but stays aligned to the start on smaller devices. Here's the markup that powers this section:

<section id="info-3">  <div class="container">    <div class="row fill-80-viewport align-items-center justify-content-end text-white">      &lt;div class="col-12 basis-md-50">        <h6 class="text-white-40">          what others think        </h6>        <h3>"Coding on Steroids is breath taking. I focus less on writing codes           while taking model shots around the world."</h3>        <p class="text-uppercase text-white-70">Founder, The Ocumpious Startup</p>      </div>  </div>  </div></section>

Pretty simple, huh?

很简单吧？

align-items-center and justify-content-end do exactly as they read. The single column which represents the flex-item will be aligned to the vertical center and horizontal end.

By default, this column fills up the available space with.col-12. However, on medium devices and larger, it takes up just 50% of the available width.

By default, this column fills up the available space with .col-12. However, on medium devices and larger, it takes up just 50% of the available width.

basis-md-50 is a tiny class I have written like so:

@media screen and (min-width: 768px ){  .basis-md-50 {    flex-basis: 50%  }  }

When the column takes up 100% of the available width, it really can’t be forced to the end. You don’t get to see any visual feedback with respect to this. However, when the width of the column is reduced to 50% it becomes evident.

When the column takes up 100% of the available width, it really can't be forced to the end. You don't get to see any visual feedback with respect to this. However, when the width of the column is reduced to 50% it becomes evident.

That’s the trick to move the column to the right — on larger devices.

That's the trick to move the column to the right — on larger devices.

Let’s move on to the next section.

Let's move on to the next section.

Building the featured section (Building the featured section)

This one feels like child’s play. It’s really simple.

This one feels like child's play. 真的很简单。

The markup consists of a list of font-awesome icons.

<section id="featured-on" class="bg-primary">  <div class="container">    <div class="row py-5 text-center text-white">      <div class="col-12">          <i class="fa fa-3x fa-free-code-camp my-3 mx-5"              aria-hidden="true"></i>          <i class="fa fa-3x fa-twitter my-3 mx-4"              aria-hidden="true"></i>          <i class="fa fa-3x fa-facebook my-3 mx-4"              aria-hidden="true"></i>          <i class="fa fa-3x fa-quora my-3 mx-4"              aria-hidden="true"></i>          <i class="fa fa-3x fa-reddit my-3 mx-4"              aria-hidden="true"></i>          <i class="fa fa-3x fa-pied-piper my-3 mx-4"              aria-hidden="true"&gt;&lt;/i>          <i class="fa fa-3x fa-paypal my-3 mx-4"              aria-hidden="true"></i>          <i class="fa fa-3x fa-product-hunt my-3 mx-4"              aria-hidden="true"></i>      </div>    </div>  </div></section>

The class .text-center ensures that these icons are always horizontally centered. This section utilizes a great deal of spacing classes. Do you seemy-3, mx-4 and py-5 in the markup above?

The class .text-center ensures that these icons are always horizontally centered. This section utilizes a great deal of spacing classes. Do you see my-3 , mx-4 and py-5 in the markup above?

Those are class names you’re already conversant with, right?

Those are class names you're already conversant with, right?

Yes!

是!

Let’s move on to the next content section.

Let's move on to the next content section.

Building the product features section (Building the product features section)

The complete markup for this section can be seen below:

<section id="feature-rundown">  <div class="container">    <div class="row mt-5">      <div class="col-12 col-md-6 mx-auto mt-5 text-center">        <h6 class="text-black-40 text-uppercase">          The bitter truth        </h6>        <h3 class="text-black-70">On a scale of 1 to 10, we make your life easier 10/10, period.</h3>      </div>    </div>    <div class="row mb-5">        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">24/7 support</strong>  For            your sake, we do not sleep.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">Fast</strong&gt;  Like flash.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">;Reliable</strong>  We never have a server downtime.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/&gt;          <p&gt;            <strong class="text-info">Computational Analysis</strong>  like no other.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">Analytics</strong>  like no other.          </p>        </div>        <div class="col-12 col-md-4 text-center mb-5">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">Affordable</strong> as coffee.          </p>        </div>    </div>  </div></section>

While it may look complex, it is really simple when you closely examine it.

Like other sections, this one begins with giving the section an id and nesting a container within it.

<section id="feature-rundown">  <div class="container">    ...  </div></section>

Unlike other sections, this one contains 2 nested rows.

<section id="feature-rundown">  <div class="container"&gt;    <div class="row">    </div&gt;    <div class="row">    </div>  </div></section>

The first row contains the section headline:

The second row contains the list of image icons:

Below is the content of the first row:

<div class="col-12 col-md-6 mx-auto mt-5 text-center">        <h6 class="text-black-40 text-uppercase">          The bitter truth        </h6>        <h3 class="text-black-70">On a scale of 1 to 10, we make your life easier 10/10, period.</h3></div>

By default it takes up the available width of the row col-12.On medium devices. It takes up half the width col-md-6 and it is horizontally centered mx-auto.

By default it takes up the available width of the row col-12. On medium devices. It takes up half the width col-md-6 and it is horizontally centered mx-auto.

The other class names are stuff you’re already familiar with.

The other class names are stuff you're already familiar with.

For clarity, text-black-40 and text-black-70 are tiny classes I have written like so:

.text-black-70 {   color: rgba(0,0,0,0.7) } .text-black-40 {   color: rgba(0,0,0,0.4) }

On the other hand, the second row contains a list of images and associated text:

<div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">24/7 support</strong>  For            your sake, we do not sleep.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">Fast</strong>  Like flash.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">Reliable</strong&gt;  We never have a server downtime.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          &lt;p>            <strong class="text-info"&gt;Computational Analysis</strong>  like no other.          </p>        </div>        <div class="col-12 col-md-4 text-center">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          &lt;p>            &lt;strong class="text-info">Analytics</strong>  like no other.          </p>        </div>        <div class="col-12 col-md-4 text-center mb-5">          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>          <p>            <strong class="text-info">Affordable</strong> as coffee.          </p>        </div>

By default, the columns fill the available space, take up a third of the available space in medium devices or larger, and the text and images are aligned to the center, col-12 col-md-4 text-center.

The text-info class on the <strong> tag gives the text a teal-like color.

The text-info class on the <stro ng> tag gives the text a teal-like color.

That’s pretty much all there is to this section.

That's pretty much all there is to this section.

Let’s move on to the next.

Let's move on to the next.

Building the pricing section (Building the pricing section)

Pricing tables are very important — if you want your business to make money. Let’s have a look at how to build one.

Pricing tables are very important — if you want your business to make money. Let's have a look at how to build one.

The complete markup for this section is below:

<section id="pricing" class="bg-light">    <div class="container fill-80-viewport">        <div class="row">          <div class="col-12 col-md-6 mx-auto text-center my-5">              <h6 class="text-black-40 text-uppercase">                pricing              </h6>              <h3 class="text-black-70">we are very affordable</h3>            </div>        </div>

<div class="row pb-5">        <div class="col-12 col-md-4 px-2 my-4 text-center">        <h6 class="text-black-40 text-uppercase">            Personal          </h6>        <img src="http://bit.ly/2y9EpP2" alt="$9 per month" class="my-4"/>        <p>Good enough power</p>        <ul class="list-unstyled list-border-black-20 list-border-y text-left text-black-70">               <li class="py-2"><strong>10k</strong> monthly requests</li>          <li class="py-2"><strong>9am-5pm</strong>             technical support</li>          <li class="py-2"><strong>Public</strong>             API access</li>        </ul>        <a class="btn btn-block btn-primary border-0 text-white py-3" href="#">Start</a>        </div>                   <div class="col-12 col-md-4 px-2 my-4 text-center">          <h6 class="text-black-40 text-uppercase">              Business            </h6>          <img src="http://bit.ly/2xKjVeS" alt="$49 per month" class="my-4">          <p>Perfect for small             businesses.</p>          <ul class="list-unstyled  list-border-black-20 list-border-y text-left text-black-70">                 <li class="py-2"><strong>100k</strong> monthly requests</li>            <li class="py-2"><strong>9am-5pm</strong>               technical support</li>            <li class="py-2"><strong>Public and Private</strong>               API access</li>          </ul>          <a class="btn btn-block btn-primary border-0 text-white py-3" href="#">Start</a>        </div>                  <div class="col-12 col-md-4 px-2 my-4 text-center">          <h6 class="text-black-40 text-uppercase">              Corporate            </h6>          <img src="http://bit.ly/2wjsVEl" alt="$119 per month" class="my-4"/>          <p>Unlimited super powers</p>          <ul class="list-unstyled list-border-black-20 list-border-y text-left text-black-70">                 <li class="py-2"><strong>10,000k</strong> monthly requests</li>            <li class="py-2"><strong>9am-5pm</strong>               technical support</li>            <li class="py-2"><strong>Public and Private</strong>               API access</li>          </ul>          <a class="btn btn-block btn-primary border-0 text-white py-3" href="#">Start</a>        </div>      </div>      </div>  </section>

Looks complex?

Don’t worry. Let me explain it.

不用担心 Let me explain it.

The section begins with a nested container and two rows:

<section id="pricing" class="bg-light">    <div class="container fill-80-viewport">        <div class="row">        &lt;/div>        <div class="row">        </div>    </div></section>

As always, the section has an id. The bg-light class gives the section a light background color.

As always, the section has an id . The bg-light class gives the section a light background color.

The container has been set up to fill at least 80% of the available viewport height. I have done this a couple times, it shouldn’t be strange:

The container has been set up to fill at least 80% of the available viewport height. I have done this a couple times, it shouldn't be strange:

.fill-80-viewport {  min-height: 80vh}

Within the first row lies the section’s headline:

Within the first row lies the section's headline:

<div class="col-12 col-md-6 mx-auto text-center my-5">     <h6 class="text-black-40 text-uppercase">         pricing     &lt;/h6>     <h3 class="text-black-70">we are very affordable</h3></div>

The headers are nested within a column that fills the available space on mobile devices while taking up half of the available width for medium devices or more col-12 col-md-6. The column is also styled to center its text content text-center and it sits in the center of the available width mx-auto.

The class names text-black-40 and text-black-70 are tiny classes I have written like so:

.text-white-40 {  color: rgba(255,255,255,0.4)}.text-white-70 {  color: rgba(255,255,255,0.7)}

Within the second row lies the pricing tables.

Each pricing table is made up of this:

<div class="col-12 col-md-4 px-2 my-4 text-center">        <h6 class="text-black-40 text-uppercase">            Personal          <;/h6>        <img src="http://bit.ly/2y9EpP2" class="my-4"/>        <p>Good enough power</p>        <ul class="list-unstyled list-border-black-20 list-border-y text-left text-black-70">               <li class="py-2"><strong>10k</strong> monthly requests</li>          <li class="py-2"><strong>9am-5pm</strong>             technical support</li>;          <li class="py-2"><strong>Public</strong>             API access</li>        </ul>        <a class="btn btn-block btn-primary border-0 text-white py-3" href="#">Start</a></div>

It’s basically an header, one image, an unordered list of features with a CTA button.

It's basically an header, one image, an unordered list of features with a CTA button.

Duplicate this in three places and you have the 3-column pricing grid. You see how manageable the markup has become?

Most of the class names should be familiar with you. But look at this:

...<;ul class="list-unstyled list-border-black-20 list-border-y text-left text-black-70">    ... </ul>

list-unstyled is a bootstrap class that removes the padding and list style that comes by default with unordered lists ul.

list-unstyled is a bootstrap class that removes the padding and list style that comes by default with unordered lists ul .

And these:

list-border-black-20,  list-border-y

list-border-y is a tiny class I have written to add borders only to the top and bottom of a list element.

.list-border-y li {  border-top: 1px solid}.list-border-y li:last-child {  border-bottom: 1px solid}

This is what gives the lists within the pricing table the 1px borders.

list-border-black-20 is another tiny class that gives the borders a black transparent color.

These classes dont come with bootstrap, so we have to write ours.

.list-border-black-20 li,.list-border-black-20 li:last-child{  border-color: rgba(0,0,0,0.2)}

Now, this makes the color of the borders appear as subtle transparent black.

That’s pretty much all there is to this content section. Let’s see the next.

That's pretty much all there is to this content section. Let's see the next.

This is the last content section for this page, and it represents the page’s footer.

This is the last content section for this page, and it represents the page's footer.

The complete code for this section is shown below:

<section id="footer" class="bg-dark">  <div class="container">    <div class="row fill-40-viewport py-5 text-white-70 align-items-center">        <div class="col-12 col-md-6">          <ul class="list-unstyled">            <li><h6 class="text-white">ABOUT</h6></li>            <li>We’ve been working on Coding on Steroids               for the all our lives.               A groundbreaking tech deserves such dedication, huh?                If you’d like to learn more, or are interested in a job,               contact us anytime at               &lt;a class="text-white" href="https://twitter.com/OhansEmmanuel" target="_blank">@ohansemmanuel</a></li>          </ul>        </div>        <div class="col-12 col-md-2">          <ul class="list-unstyled">            <li><h6 class="text-white">PRODUCT</h6></li>            <li>Features</li>            <li>Examples</li>            <li>Tour</li>            <li>Gallery</li>          </ul>        </div>        <div class="col-12 col-md-2">          <ul class="list-unstyled">            <li><h6 class="text-white">APIS</h6></li>            <li>Rich data</li>            <li>Simple</li>            <li>Real time</li>            <li>Social</li>          </ul>        </div>        <div class="col-12 col-md-2">        <ul class="list-unstyled">          <li><h6 class="text-white">LEGAL</h6></li>          <li>Terms</li>          <li>Legal</li>          <li>Privacy</li>          <li>License</li>        </ul>      </div>       </div>  </div> </section>

Now, let’s analyze it.

Now, let's analyze it.

Everything is simple when broken down into smaller bits.

The section begins with a nested container and row.

<section id="footer" class="bg-dark">  <div class="container">    <;div class="row">    </div>  </div></section>

As always, I gave the section an id . The bg-dark class will give the footer a dark background.

Within this column there are four columns.

<div class="col-12 col-md-6"></div><div class="col-12 col-md-2">&lt;/div><;div class="col-12 col-md-2"></div><div class="col-12 col-md-2"></div>

Each column will take up the available space when viewed on mobile devices col-12

The first column takes up half the available width on medium and larger devices col-md-6, while the other columns take up a third of the remaining halved space available col-md-2. The grid sums up to 12 eventually. 6 + 2 + 2 + 2 = 12

Within the first column is an unordered list and a bunch of list items. list-unstyled ensures the default spacing and list style is removed from the ul.

<ul class="list-unstyled">   <li>;<h6 class="text-white">ABOUT</h6></li>   <li>We’ve been working on Coding on Steroids        for the all our lives.        A groundbreaking tech deserves such dedication, huh?         If you’d like to learn more, or are interested in a job,        contact us anytime at        <a class="text-white"href="https://twitter.com/OhansEmmanuel" target="_blank">@ohansemmanuel</a></li></ul>

The other columns contain an unordered list with a bunch of list items too:

<ul class="list-unstyled">    <li>;<h6 class="text-white">PRODUCT</h6></li>    <li>Features</li>    <li>Examples</li>    <li>Tour</li>    <li>Gallery</li> </ul>

And that’s all of it!

And that's all of it!

Pretty cool, huh?

太酷了吧？

Thanks a lot for following along!

Conclusion and More Information (Conclusion and More Information)

A few months back when I started writing this article, I planned on writing everything I knew about Bootstrap. However, that turned out to be a lot ?.

The medium article would have been so long, I was worried no one would bother to read it ?.

The topics I have skipped include:

Introduction to Sass/SCSS
Introduction to Sass/SCSS
How to Customize Bootstrap using Sass
How to Customize Bootstrap using Sass
How to use the Bootstrap CLI tool for quicker set up
How to use the Bootstrap CLI tool for quicker set up
How to Create your own Build Process using Gulp and Webpack
How to Create your own Build Process using Gulp and Webpack
How to build Professional Bootstrap themes eg. Admin dashboard themes
How to build Professional Bootstrap themes eg. Admin dashboard themes
How to use Bootstrap 4 with ReactJS
How to use Bootstrap 4 with ReactJS
More Practical Examples, such as How to Build a Twitter and Medium clone with Bootstrap. These examples utilize JavaScript and more Bootstrap components
More Practical Examples, such as How to Build a Twitter and Medium clone with Bootstrap. These examples utilize JavaScript and more Bootstrap components

There’s good news!

There's good news!

I’m writing these, but I have distilled them into a comprehensive book. You may want to stay in touch, and get notified about the book release.

I'm writing these, but I have distilled them into a comprehensive book. You may want to stay in touch, and get notified about the book release.

If you look to become a senior developer, you shouldn’t shy away from having a wide range of experience with various technologies.

If you look to become a senior developer, you shouldn't shy away from having a wide range of experience with various technologies.

Cheers,

干杯，

Ohans Emmanuel

翻译自: https://www.freecodecamp.org/news/bootstrap-4-everything-you-need-to-know-c750991f6784/

cumichun6193

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 4：您需要知道的一切

深入解决常见的响应式Web设计问题 (A deep dive into solving common responsive web design problem)This article will cover the practical fundamentals you need to start building responsive websites with the latest ver...
复制链接

扫一扫