bootstrap 是壹個開源的前端框架，主要應用於頁面的布局。
官網介紹：
同時，它也是移動優先的布局框架。
移動優先，指使用bootstrap開發的頁面，不僅能用於web顯示，還能用於移動端顯示。
使用bootstrap中規範好的CSS樣式，能使頁面根據屏幕大小自適應，但必須要在 head 部分加入：
可以設置的屬性：
m - 設置外邊距 margin
p - 設置內邊距 padding
可以設置的方向：
t - 設置上 距 *-top
b - 設置下 距 *-bottom
l - 設置左 距 *-left
r - 設置右 距 *-right
x - 設置x方向的*距，即左右邊距 both *-left and *-right
y - 設置y方向 both *-top and *-bottom
(none) - 空則表示設置四個方向
可以設置的大小：
0 - 設置 邊距為0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 設置 the margin or padding to $spacer * .25
2 - (by default) 設置 the margin or padding to $spacer * .5
3 - (by default) 設置 the margin or padding to $spacer
4 - (by default) 設置 the margin or padding to $spacer * 1.5
5 - (by default) 設置 the margin or padding to $spacer * 3
auto - 設置自動的 外邊距 * the margin to auto
示例：
mr-3 對應 margin-right: 3 3為不定值，隨屏幕大小變化。
py-2 對應 padding-top:2;padding-bottom:2;
......
d-inline-block 將塊級元素轉換為行內塊級元素
見官網： 柵欄布局
效果如下：
offset-*
d-flex
justify-content-*
作用於div子元素。
效果依次為：
align-items-*
同樣作用於div子元素。
效果依次為：
flex-fill
作用於當前元素，效果是充滿父元素。
flex-grow-*
將當前元素盡可能地增長，效果如下：
flex-shrink-*
將當前元素有必要地縮短，效果如下：
利用外邊距可以實現：
ml-auto 表示 margin-left:auto ，效果使得當前元素水平居右。
mx-auto 表示左右外邊距都為 auto ，效果是水平居中。
align-*
作用於當前元素 ，效果如下：
效果如下：
text-wrap
字體會自動換行，適用於 規定寬度 的div中的字體。
不包裹字體則是 text-nowarp 。
text-truncate
適用於塊級元素中的字體。
text-*
效果如下：
list-unstyled 列表無黑點
list-inline 行內列表
list-inline-item 行內列表中的壹項
使用如下：
見官網 表格
blockquote 設置為塊引用
blockquote-footer 塊引用的引腳
效果如下：