bootstrap基础布局

1，下载bootstrap（官网https://www.bootcss.com/）
在项目中需要用到bootstrap功能，要先引入bootstrap的css与JS。下载bootstrap的css于JS可以在官网下载（现在使用的版本bootstrap-4.5.0-dist）。在下载完css和JS引入完项目（一般把bootstrap放在项目中的Content文件夹中）时候，引入项目后可以看到有多个bootstrap的css和JS选择。
2，引入css和JS
引入到项目中可以看到主要有两个目录有css于JS分开的文件夹。

（1）css直接选择功能最多的bootstrap.min.css引入项目，这个含有全部的功能，其他的css只有部分bootstrap的功能。
（2）JS有两种选择一个是bootstrap.bundle.js，一个是bootstrap.min.js。bundle相对于min差别是比min多了个插件。引入JS时候要注意bootstrap是依赖于jQuery。如果没有引入jQuery就直接引入了bootstrap的JS就会报错，而且引用JS前就要先引入jQuery。jQuery一定要在JS前引入。
3，使用bootstrap基本布局
（1）Container：bootstrap的布局就依赖一个样式（类）——Container布局容器
类定义container让内容居中，两边留空，container-fluid让内容占满整个页面（整行）
container的效果：

container-fluid的效果：

（2）bootstrap的标准布局container里面就是行列布局，一行一行的，行里面再去分列。布局都是靠class去布局。先row行布局在进行列布局
（3）col：有5个类
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
，bootstrap的行分成12个格子，每一行是有十二个单元格，超过12就会自动换行。在每一行都可以通过bootstrap的列布局分配占的位置。
列：紫色class=”col-10”,蓝色class=”col-2”。紫色占一行的10/12，蓝色占2/12。

（4）col与col-auto的区分
col：col默认占满全部，不论内容在少，也占完整行。下图类为col默认占了整行（蓝色为内容部分）

col-auto：单元格适应内容，内容有多少就占整行的多少。下图类为col-auto内容有多大，就分大的单元格（蓝色为内容部分）