前端学习---Bootstrap4学习（1）

本次内容总结了Bootstrap4中的一些API归总，并不是关于Bootstrap4的一个系统性的教学：

这次总结是方便各位集中记忆，使之在实战中使用这些API更加得心应手：

目录：
1，网格布局
2，文字排版
3，Bootstrap4文字颜色
4，Bootstrap4背景颜色
5，Bootstrap4表格及样式
6，Bootstrap4表格背景颜色

想使用Bootstrap4除了引用4中给我们的CDN，别忘记引用viewport视口（显示网页的区域）

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

(假如你使用的是sublime等编译器，可以使用meta:vp快速扩展。)

viewport中还有一个视口规定:
1.布局视口=设备视觉视口
2.不可缩放

语句解读：
1.width=device-width:布局视口等于设备视觉视口。
2.initial-scale:初始缩放比例。
3.maximun-scale:最大缩放比例。
4.minimum-scale:最小缩放比例。
5.user-scalable:禁止用户缩放。

Bootstrap 4 网格系统有以下 5 个类:

类别	描述
.col-	针对所有设备
.col-sm-	平板 - 屏幕宽度等于或大于 576px
.col-md-	桌面显示器 - 屏幕宽度等于或大于 768px
.col-lg-	大桌面显示器 - 屏幕宽度等于或大于 992px
.col-xl-	超大桌面显示器 - 屏幕宽度等于或大于 1200px

Bootstrap4 网格系统规则:
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
12列格网布局:最多分为12列，随着屏幕设备或视口尺寸变化
格网布局由行（row）和列（column）构成。
用户将内容填充到格网布局的格子里面。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

注意： .container (固定宽度) 和 .container-fluid (全屏宽度) 在样式上是有差异的，大家可以自己动手尝试一下。

开始正题：

像.col-，它其实就是列column的缩写。
针对不同端的屏幕大小可区分为：

• sm(平板，width>=576px)
• md(桌面显示器，width>=768px)
• lg(大桌面显示器，width>=992px)
• xl(超大桌面显示器，width>=1200px)

所以根据你想要适配什么样的PC端，移动端。就分别设置在对应端屏幕宽度下你想要网页所呈现的形式。

现在，我希望网页的某块区域在大于等于sm下呈现2，8，2的区域划分，小于sm让它根据屏幕宽度三等分：

<div class="row">
<div class="col col-sm-2" style="background-color:blue">第一块</div>
<div class="col col-sm-8" style="background-color:orange">第二块</div>
<div class="col col-sm-2" style="background-color:red">第三块</div>
</div>

在device-width>=576px时效果如下：

在device-width<576px时效果如下：

假如你想兼容更多屏幕宽度的样式，自己根据需求在相应的区域添加对应的.col-*-*属性即可。

另外，我们还可以在col后面增加偏移列（offset-*-*），这里我就不仔细介绍了，附上一段代码，各位自己理解一下应该就懂得偏移列的含义了：

<div class="container-fluid" style="border:1px solid black">
	<div class="row">
		<div class="col-md-4 col-sm-3 offset-md-2 offset-sm-3 bg-success">col-md-4/col-sm-3</div>
		<div class="col-md-4 col-sm-3 offset-md-2 offset-sm-3 bg-warning">col-md-4/col-sm-3</div>
    	<div class="c