1. Bootstrap

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目
1.使用 Bootstrap 4 CDN
1.1 移动设备优先设置–head标记中引入
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
1.2 引入Bootstrap依赖的css和js文件
1.3 设置容器元素【div/body…】
给指定的html元素设置 class=“container” / class=“container-fluid”
container—用于固定宽度并支持响应式布局的容器
container-fluid—用于 100% 宽度，占据全部视口（viewport）的容器
2.从官网 getbootstrap.com 下载 Bootstrap 4依赖文件
2.1 移动设备优先设置–head标记中引入
2.2 引入Bootstrap依赖的css和js文件【提前准备jquery文件】
2.3 设置容器元素【div/body…】

2.Bootstrap响应式

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列
Bootstrap 4 网格系统有以下 5 个类:
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
Bootstrap4 网格系统规则:
1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距
2、使用行来创建水平的列组
3、内容需要放置在列中，并且只有列可以是行的直接子节点
4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局
5、列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移
6、网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置
7、Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列

3.Bootstrap标题类

display–Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4

4.Bootstrap4 更多排版类

font-weight-normal:普通文本
font-weight-bold:加粗文本
font-weight-light 更细的文本
font-italic:斜体文本
lead:让段落更突出,字体放大
small:指定更小文本 (为父元素的 85% )
text-left 左对齐
text-center 居中
text-right 右对齐
text-nowrap:段落中超出屏幕部分不换行
.text-nowrap:段落中超出屏幕部分不换行
.text-nowrap:段落中超出屏幕部分不换行
text-lowercase:设定文本小写
text-uppercase:设定文本大写
text capitalize 设定单词首字母大写

5.Bootstrap颜色设置

文本颜色：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
背景颜色：.bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-white, .bg-dark and .bg-light

6.表格设置

属性名称	用法	含义
table	class="table"	默认的表格的宽高，和行分割线
table-striped	class="table-striped"	默认的tbody中的行条纹显示
table-bordered	class="table-bordered"	为表格添加边框
table-hover	class="table-hover"	为表格的每一行添加鼠标悬停效果（灰色背景）
.table-info, .table-primary, .table-success,......	class="table-info"	表格设置背景颜色

7.Bootstrap4 图像形状

rounded 类可以让图片显示圆角效果
rounded-circle 类可以设置椭圆形图片
img-thumbnail 类用于设置图片缩略图(图片有边框)
使用 .float-right 类来设置图片右对齐
使用 .float-left 类来设置图片左对齐
img-fluid:设置响应式图片,设置了 max-width: 100%; 、 height: auto;

8.Bootstrap4 信息提示框

提示框:.alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-white, .alert-dark and .text-light

<body class="container">
		<h4>提示框:.alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-white, .alert-dark and .text-light</h4>
		<div class="alert alert-primary">
		    <strong>primary!</strong> 指定操作primary提示信息。
		</div>
		<div class="alert alert-success">
		    <strong>success!</strong> 指定操作success提示信息。
		</div>
		<div class="alert alert-info">
		    <strong>info!</strong> 指定操作info提示信息。
		</div>
		<div class="alert alert-success">
		    信息提示框内容中可以设置<a href="#">超链接</a>。
		</div>
		<div class="alert alert-success alert-dismissible fade show">
			<p>关闭提示框。</p>
			<p>1.提示框元素设置alert-dismissible</p>
			<p>2.关闭按钮设置class="close"  data-dismiss="alert"</p>
		    <input type="button" class="close" data-dismiss="alert" value="x"/>
		</div>
</body>