Before starting using Bootstrap 4, let's learn about a few common patterns

前情提要：让我们站在巨人的肩膀上，如何在专案中导入 Bootstrap 4 并客制它

• • ★ First of all, this article is suitable for people with the following backgrounds: **

1. Be familiar with HTML, CSS
2. Know how to correctly quote Bootstrap 4
3. People who want to learn about some general models of Bootstrap 4

• • Before we officially start, let's talk about the difference between using Bootstrap 4 and not using it? **

简单来说，若是我们不使用 Bootstrap 4，而是用手刻的方式来撰写网页，HTML 的内容我们得要自己写(废话)，CSS 我们也得要一个一个自己设定(又一个废话)，可是若是使用 Bootstrap 4 的话，很多常用的 CSS 他已经预先帮我们写好了，我们只要熟悉 Bootstrap 4 的文件，知道他预写的 CSS 是用哪一个 class 名，届时只要直接套用到标签上就可以了，我们先用一个非常简单的案例来说明，请看下面的 codepen。

Of course, to enable Bootstrap 4, our HTML environment must include a necessary link and three necessary scripts. The code can be found directly in the Bootstrap 4 file. I won't go into it again if I can copy it. I will just talk about the key code.<><>

The first is the first div tag<>

<div class="box"></div>

Then his CSS looked like this.

.box {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 48px;
}

For this. box's div, we set the width and height to 100px each, and set background: blue and margin: 48px. If there is HTML and CSS basics, it should be easy to determine that this is a blue square with a width of 100px each, and each of the four sides has an outer margin of 48px.<>

Here is the second div, and we apply the class of Bootstrap 4.<>

<div class="box2 bg-danger m-5"></div>

CSS is just like this

.box2 {
  width: 100px;
  height: 100px;
}

For this div of.box2, the CSS we wrote ourselves only has 100px width and height. Among them, bq-danger and m-5 are both classes of Bootstrap 4, and bq-danger represents the danger theme color used for the background, and the default color code for the danger theme color in Bootstrap 4 is #dc3545. In addition, the English m of m-5 represents margin and the number 5 represents the spacing size, and 1 represents 0.25 times rem.< 2 represents 0.5 times rem, 3 represents 1 times rem, 4 represents 1.5 times rem, and 5 represents 3 times rem. Bootstrap 4 defaults to 16px, so m-5 means margin: 48px.> This is a #dc3545 color square with a width of 100px, and each of the four sides has an outer distance of 48px.

So using Bootstrap 4 allows us to develop web pages faster, because many, many commonly used classes have been written. We only need to be proficient in it and directly add the corresponding class names to the tags we need. This is just a simple example. Basically, Bootstrap 4 has this concept.

Spacing

It's very simple. It's actually the margin and padding we use very often. Let's get familiar with these codes first.

m：margin
p：padding
t：top
r：right
b：bottom
l：left
x：-right和-left
y：-top 和 -bottom

If you arrange and combine the above, you can combine the following meaning

m：margin
mt：margin-top
mr：margin-right
mb：margin-bottom
ml：margin-left
mx：margin-right 和 margin-left
my：margin-top 和 margin-bottom

p：padding
pt：padding-top
pr：padding-right
pb：padding-bottom
pl：padding-left
px：padding-right 和 padding-left
py：padding-top 和 padding-bottom

Then there is numbers. Bootstrap 4 has a basic unit that is 1rem, 1rem = 16px. The previous code will be followed by numbers, which represent how much inner or outer distance there is.

1：0.25 * 1rem = 0.25px
2：0.5 * 1rem = 8px
3：1 * 1rem = 16px
4：1.5 * 1rem = 24px
5：3 * 1rem = 48px

So, in the future, as long as we need to use margin or padding, we can write something like this.

mt-3 → margin top：16px
pb-4 → padding bottom：24px
m-2 → margin：8px;

Colors

Bootstrap 4 在颜色的设定上除了使用主题色的方式外，在颜色前面接上对象，例如 text-primary 代表着文字使用 primary 主题色或是 bq-secondary 代表背景使用 secondary 主题色，来看一个简单的 codepen吧。

<div class="box bg-danger m-5 p-2 text-light">text-danger</div>
<div class="box1 bg-warning m-5 p-4 text-secondary">
  <a href="">text-secondary</a>
</div>

For these two divs, my CSS only has width and height. I write all styles in the tags using the pre-written class name of Bootstrap 4, so the screen appears like this.<> Whether it is the color of the text, the color of the background, and their margin and padding are all set using the pre-written class. When you slide over the second div, because there is also an a tag inside, a hover effect will also be generated.<><>

Display

我们都知道每一个 HTML 标签都有他预设的 display 属性，若要更改他的预设属性，就必须用 CSS 来去重新设定 display 的值，看是要用行内 inline 或是 block 都可以，但是现在也是一样都可以直接用预写 class 写在标签内就可以啰，像是 d-inline 或是 d-block，就可以直接改值啰，看一下 codepen 吧。

d-block → display: block
d-inline → display: inline

<div class="bg-danger m-5 p-2 text-light d-inline">d-inline</div>
<div class="bg-warning m-5 p-2 text-secondary d-inline">d-inline</div>
<span class="bg-danger m-5 p-2 text-light d-block">text-danger</span>
<span class="bg-warning m-5 p-2 text-secondary d-block">text-secondary</span>

Let's take a look at two divs and two span tags here. Originally, the div was a block element, but I directly added d-inline to the class and changed it to an inline element. Originally, the span was an inline element, and I directly added d-block to the class and changed it to a block element. Is this convenient?<><><><>

Border

相信 border 也是我们很常用的功能，先来看 codepen 吧。

In the world of Bootstrap 4, you can write directly in the class, such as using border-direction to border it like this.

<div class="box border">呈現四邊有線</div>
<div class="box border-top">呈現上邊有線</div>
<div class="box border-right">呈現右邊有線</div>
<div class="box border-bottom">呈現下邊有線</div>
<div class="box border-left">呈現左邊有線</div>

If there are three edges to be presented and only one edge to be cancelled, you can use the following writing method and cancel one edge with border-direction-0.

<div class="box border-0">取消四邊線條</div>
<div class="box border border border-top-0">取消上邊線條</div>
<div class="box border border-right-0">取消右邊線條</div>
<div class="box border border-bottom-0">取消下邊線條</div>
<div class="box border border-left-0">取消左邊線條</div>

Or add a border-radius arc rounded-direction to the four corners.

<div class="box border rounded">四腳呈現圓弧</div>
<div class="box border rounded-top">呈現上邊圓弧</div>
<div class="box border rounded-right">呈現右邊圓弧</div>
<div class="box border rounded-bottom">呈現下邊圓弧</div>
<div class="box border rounded-left">呈現左邊圓弧</div>

Or turn them into a round rounded-circle or a capsule-shaped rounded-pill.

<div class="box border rounded-circle">呈現圓形形狀</div>
<div class="box box1 border rounded-pill">呈現膠囊形狀</div>

Or add theme colors to the lines.

<div class="box border border-primary">呈現主題顏色</div>
<div class="box border border-danger">呈現主題顏色</div>

So it looks like the following.

Spacing, Colors, Display and Border above are a few basic Bootstrap 4 general models that I think are. Many details can be changed in_variable.scss in a customized way. I hope everyone likes the above introduction, thank you~~

References:

1. Bootstrap · The most popular HTML, CSS, and JS library in the world.
2. Bootstrap 4 繁体中文手册[六角学院译]