Bootstrap-4.3.1版本的使用方法

1、Bootstrap有如下連網引用文件：

　　bootstrap.css （ 未經壓縮 ）

　　bootstrap.min.js（ 壓縮版，體積小，傳輸速度快 ）

　　bootstrap.js

　　bootstrap.min.js

以上引用文件均為4.3.1版，且bootstrap的使用依賴 jQuery ，故使用前需引入  jquery-3.4.1.js 文件，實例如下（引用的是本地下載文件）：

　　<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
　　<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
　　<script type="text/javascript" src="../js/bootstrap.js"></script>

2、Bootstrap ：用於開發響應式的移動優先網站，其提供了大量的組件，簡化開發。

以下是 bootstrap 提供的關於 布局、內容、工具、組件等用法的詳細說明：

　　注：以下均為bootstrap的類名，使用均是在<div class="container"></div>中的class內使用

1）布局（ Layout ）　

　　注意：
　　如果開發響應式網站，務必在head中添加如下代碼
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　目的，使用相對單位解釋px

　　網格系統，容器/行/列。一行分為12列，成為12柵格系統。

<!--
container   　　容器，容器中包含多行；

row            行;（ 由於container具有padding，所有row中定義margin取值為負數，用於抵消父元素padding ）

col         　　列;
    col     　　特小屏    screen < 576px
    col-sm     小屏      576px < screen
    col-md     中屏      768px < screen
    col-lg     大屏      992px < screen
    col-xl     特大屏     1200px < screen
    注：以上列取值從 col-1 ~ col-12,一行12列 col-2 表示占兩列；
    移動優先：
        默認體現移動端（極小屏）的樣式，如果想要覆蓋這些樣式，那需要添加對應大屏樣式

px             左右內邊距等於padding-left+padding-right;
py             上下內邊距等於padding-top+padding-bottom;
pl             左內邊距等於padding-left;
pr             右內邊距等於padding-right;
pt             上內邊距等於padding-top;
pb             下內邊距等於padding-bottom;
    注：以上內邊距取值從 px-1 ~ px-5,其中px-1=0.25rem;px-2=0.5rem;px-3=1rem;px-4=1.5rem;px-5=3rem;

align-items-start    　伸縮盒垂直（縱向）向上排列
align-items-center     伸縮盒垂直（縱向）居中排列
align-items-end        伸縮盒垂直（縱向）向下排列

justify-content-start     伸縮盒水平（橫向）向左排列
justify-content-center    伸縮盒水平（橫向）居中排列
justify-content-end       伸縮盒水平（橫向）向右排列

order-序號     排序，序號從1-12，表示當前塊的一個序號

offset-序號    偏移，序號從1-11，表示當前塊向左或右偏移距離，1為一列的距離（均分為12列）

ml-auto        自動左邊距等於margin-left:auto;
mr-auto        自動右邊距等於margin-right:auto;
-->

2）內容（ Content ）

<!--
reboot        重置樣式，即清除所有標簽的默認樣式（ 一般不使用 ）

h1~h6         h1~h6標簽（不直接使h1~h6標簽）

list-unstyled    清除列表樣式（ul>li 標簽前的小圓點等樣式）

img-fluid        圖片寬度沾滿父元素
img-thumbnail    

table                 表格樣式
table-dark            深色表格
table-light            淺色表格
thead-dark            深色表頭
thead-light            淺色表頭
table-striped        表格條紋線，分行底色陰影間隔
table-bordered        表格邊框線    
table-hover            選中行，鼠標懸停被選中
table-sm            表格整體變小
table-success         表格綠色（成功色）
table-danger         表格紅色（危險色）
table-info             表格淺藍色（副色）    
table-responsive     表格透明色
table-primary         表格藍色（主色）

visible                顯示
invisible            隱藏

text-left             文本居左
text-center         文本居中
text-right             文本居右
text-sm-left         小屏文本居左
text-md-left         中屏文本居左
text-lg-left         大屏文本居左
text-xl-left         特大屏文本居左
text-truncate         文本內容單行顯示且占滿父元素，多余部分用省略號表示
text-break            文本本內容自動換行顯示
text-lowercase         文本本內容不會自動換行顯示，超出部分向外顯示（略難看，一般不用）
-->

3）工具（ Utilities ）

4）組件（ Components ）