0. 前言
bootstrap 是一個開源的前端框架枝嘶，主要應(yīng)用于頁面的布局。
官網(wǎng)介紹：
the world’s most popular framework for building responsive, mobile-first sites
同時(shí)苗沧，它也是移動優(yōu)先的布局框架。
移動優(yōu)先篙梢，指使用bootstrap開發(fā)的頁面光羞，不僅能用于web顯示厉颤，還能用于移動端顯示穴豫。
1. CSS布局常用篇
1.1. 屏幕自適應(yīng)
使用bootstrap中規(guī)范好的CSS樣式，能使頁面根據(jù)屏幕大小自適應(yīng)逼友，但必須要在head部分加入：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1.2. 內(nèi)外邊距
可以設(shè)置的屬性：
m - 設(shè)置外邊距 margin
p - 設(shè)置內(nèi)邊距 padding
可以設(shè)置的方向：
t - 設(shè)置上距 *-top
b - 設(shè)置下距 *-bottom
l - 設(shè)置左距 *-left
r - 設(shè)置右距 *-right
x - 設(shè)置x方向的*距精肃，即左右邊距 both *-left and *-right
y - 設(shè)置y方向 both *-top and *-bottom
(none) - 空則表示設(shè)置四個方向
可以設(shè)置的大小：
0 - 設(shè)置邊距為0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 設(shè)置 the margin or padding to $spacer * .25
2 - (by default) 設(shè)置 the margin or padding to $spacer * .5
3 - (by default) 設(shè)置 the margin or padding to $spacer
4 - (by default) 設(shè)置 the margin or padding to $spacer * 1.5
5 - (by default) 設(shè)置 the margin or padding to $spacer * 3
auto - 設(shè)置自動的外邊距* the margin to auto
示例：
mr-3 對應(yīng) margin-right: 3 3為不定值帜乞，隨屏幕大小變化司抱。
py-2 對應(yīng) padding-top:2;padding-bottom:2;
......
1.3. 塊級元素與行內(nèi)元素的轉(zhuǎn)換
d-inline-block 將塊級元素轉(zhuǎn)換為行內(nèi)塊級元素
1.4. 柵欄布局
1.4.1. 基礎(chǔ)
見官網(wǎng)：柵欄布局
1.4.2. 配合外邊距
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
效果如下：
1.4.3. 偏移
offset-*
<div class="row">
<div class="col-4">.col-md-4</div>
<div class="col-4 offset-4">.col-md-4 .offset-md-4</div>
</div>
1.5. 規(guī)范子元素的flex
d-flex
1.5.1. 水平布局
justify-content-*
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
作用于div子元素。
效果依次為：
1.5.2.垂直布局
align-items-*
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
同樣作用于div子元素黎烈。
效果依次為：
1.5.3. 充滿
flex-fill
<div class="d-flex">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
</div>
作用于當(dāng)前元素习柠，效果是充滿父元素。
1.5.4. 增長
flex-grow-*
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.
將當(dāng)前元素盡可能地增長照棋，效果如下：
1.5.5. 縮短
flex-shrink-*
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary.
將當(dāng)前元素有必要地縮短资溃，效果如下：
1.6. 作用當(dāng)前元素
1.6.1. 當(dāng)前元素水平布局
利用外邊距可以實(shí)現(xiàn)：
<div class="ml-auto" style="width: 200px;">
Centered element
</div>
<div class="mr-auto" style="width: 200px;">
Centered element
</div>
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ml-auto 表示 margin-left:auto，效果使得當(dāng)前元素水平居右烈炭。
mx-auto 表示左右外邊距都為 auto溶锭，效果是水平居中。
1.6.2. 當(dāng)前元素垂直布局
align-*
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
作用于當(dāng)前元素符隙，效果如下：
2. CSS元素規(guī)范篇
2.1. 規(guī)范字體
2.1.1. 字體樣式
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
效果如下：
2.1.2. 包裹字體
text-wrap
<div class="text-wrap" style="width: 6rem;">
This text should wrap.
</div>
字體會自動換行趴捅，適用于規(guī)定寬度的div中的字體。
不包裹字體則是 text-nowarp霹疫。
2.1.3. 字體過長省略
text-truncate
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.
適用于塊級元素中的字體拱绑。
2.1.4. 字體水平位置
text-*
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
效果如下：
2.2. 規(guī)范列表
list-unstyled 列表無黑點(diǎn)
list-inline 行內(nèi)列表
list-inline-item 行內(nèi)列表中的一項(xiàng)
使用如下：
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
2.3. 規(guī)范表格
見官網(wǎng) 表格
3. CSS組件篇
3.1. 塊引用
blockquote 設(shè)置為塊引用
blockquote-footer 塊引用的引腳
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
效果如下：
