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 ）