Bootstrap-4.3.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>

二、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 ）