*** この記事は、以下のバックグラウンドを持つ方に適しています。
- HTMLとCSSの知識
- Bootstrap 4を正しく使う方法
- Bootstrap 4の一般的なパターンを知りたい方
** 始める前に、Bootstrap 4を使うことと使わないことの違いを説明しましょう。
简单来说，若是我们不使用 Bootstrap 4，而是用手刻的方式来撰写网页，HTML 的内容我们得要自己写(废话)，CSS 我们也得要一个一个自己设定(又一个废话)，可是若是使用 Bootstrap 4 的话，很多常用的 CSS 他已经预先帮我们写好了，我们只要熟悉 Bootstrap 4 的文件，知道他预写的 CSS 是用哪一个 class 名，届时只要直接套用到标签上就可以了，我们先用一个非常简单的案例来说明，请看下面的 codepen。
もちろん、Bootstrap 4を有効にするには、HTML環境に必要なリンクと3つの必要なスクリプトが含まれている必要があります。これはBootstrap 4ファイルに直接コードをコピーできます。ここでは繰り返さないが、重要なコードだけを説明します。
最初のdivタグです
<div class="box"></div>
CSSはこんな感じでした。
.box {
width: 100px;
height: 100px;
background: blue;
margin: 48px;
}
この.boxのdivは，widthとheightを100pxずつし，さらにbackground blueおよびinを48pxとしていますが，HTMLおよびCSSのベースがあれば容易に判断できるはずですが，これは縦横100pxの青い型であり，そして4辺に48pxのがあります.
2番目のdivはBootstrap 4のクラスを適用します。
<div class="box2 bg-danger m-5"></div>
CSSはこれだけです。
.box2 {
width: 100px;
height: 100px;
}
この. box 2< div>では、独自に作成したCSSは幅と高さのそれぞれ100pxしかなく、bq-dangerとm-5はBootstrap 4のクラスであり、bq-dangerは背景にdangerテーマ色を使用して表し、Bootstrap 4のdangerテーマ色のプリセットカラーコードは#dc 3545です。また、m-5英語のmはマージンを表し、数字 5は間隔サイズを表し、1はremの0.25 倍です。2は0.5 倍のrem、3は1 倍のrem、4は1.5 倍のrem、5は3 倍のremを表しますが、Bootstrap 4は1remが16pxであるため、m-5はmargin 48pxを意味します。これは、幅100pxの#dc 3545カラー正方形で、4つの側面に48pxのマージンがあります。
だから、Bootstrap 4を使用すると、ウェブページをより速く開発することができます。多くの一般的なクラスが書かれているので、熟練している限り、対応するクラス名に直接必要なタグを追加することができます。ここは単純な例ですが、基本的にBootstrap 4はそのような概念です。
Spacing
簡単に言えば、私たちがよく使うmarginとpaddingです。まずはこれらのコードに慣れましょう。
m：margin
p：padding
t：top
r：right
b：bottom
l：left
x：-right和-left
y：-top 和 -bottom
上を並べて組み合わせると次の意味になる
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
Bootstrap 4の基本単位は1remです。1rem = 16pxです。前のコードの後に数字が続き、内側と外側の距離がどれだけあるかを示します。
1：0.25 * 1rem = 0.25px
2：0.5 * 1rem = 8px
3：1 * 1rem = 16px
4：1.5 * 1rem = 24px
5：3 * 1rem = 48px
ですから、マージンやパディングを使う必要があれば、次のように書くことができます。
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>
どちらのdivでも、CSSはwidthとheightのみを書き、すべてのスタイルはBootstrap 4の事前に書かれたクラス名を使ってタグ内に書いているので、画面は以下のようになります。テキストの色、背景の色、マージンとパディングは、あらかじめ書かれたクラスで設定されています。2番目のdivをスワイプすると、aタグがあるので、hover効果が発生します。
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>
ここに2つのdivと2つのspanタグがあることを見てみましょう。divはブロック要素ですが、クラスに直接d-inlineを追加してインライン要素に変更しました。spanはインライン要素で、クラスに直接d-blockを追加してブロック要素に変更しました。
Border
相信 border 也是我们很常用的功能，先来看 codepen 吧。
Bootstrap 4の世界では、クラス内に直接書くことができ、このようにボーダー方向を使って境界線を付けることができます。
<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>
レンダリングする3つのエッジがあり、キャンセルする1つのエッジしかない場合は、次のように書き、ボーダー方向-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>
または、4つのコーナーにborder-radius円弧rounded-directionを追加します。
<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>
丸い円やカプセルのような丸いピルに変えることもできます
<div class="box border rounded-circle">呈現圓形形狀</div>
<div class="box box1 border rounded-pill">呈現膠囊形狀</div>
または線にテーマ色を追加。
<div class="box border border-primary">呈現主題顏色</div>
<div class="box border border-danger">呈現主題顏色</div>
以下のように表示されます。
上記のSpacing、Colors、Display、BorderはBootstrap 4の基本的な一般的なモードのいくつかだと思います。多くの詳細は_variable.scss内でカスタマイズすることができます。
Referenceより：