1.颜色配置
知识点
Bootstrap4 内置颜色
前景色 text-*
背景色 bg-*
如以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
注释：引入jquery库源文件，因为bootstrap的依赖问题，必须引入
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
注释：引入jquery库源文件，因为bootstrap的依赖问题，必须引入
<div class=""> 欢迎收看 </div>
在未加修饰前，默认白底黑字
<div class="bg-primary text-white"> 欢迎光临 </div>
字体即前景色为白色，背景为蓝色
<div class="bg-secondary text-black-50"> 谢谢惠顾 </div>
前景色为黑色，背景为灰色
<div class="bg-success text-white-50"> hello 小胡 </div>
前景色为白色，背景为绿色
<div class="bg-danger text-dark"> Do not go </div>
前景色为黑色，背景为红色
<div class="bg-warning text-dark"> okey </div>
前景色为黑色，背景为黄色
</body>
</html>
效果如此
2.文本样式
知识点
text-center，right，left 居中，右左对齐
font-weight-normal, font-weight-bold 字体正常，加粗
修改 body的内容如下
<h2 class="font-weight-normal display-4"> Bootstrap教学</h2>
2号标题 ，4号字体
<div class="text-center bg-light font-weight-bold"> 欢迎收看 </div>
背景为亮色
<p class="text-lowercase"> LowerCase text.</p>
单词全部小写
<p class="text-capitalize"> CAPitalize text.</p>
每个单词首字母大写
效果图
3.元素大小的变更
现场使用类定义大小并调用
<style>
.my-container {
width: 200px;
height: 200px;
background: #b1dfbb;
}
</style>
定义样式类
<div class="my-container">
<div class="bg-primary w-50 h-100"> love you</div>
</div>
定义的类背景色为淡绿色，高宽都是200像素
调用部分背景色为蓝色，高宽各占原类的50%，100%
4.余白与边框
padding 边框
margin 余白
size：
1：0.25rem
2：0.5rem
3：1.0rem
4：1.5rem
5：3rem
<style>
.my-container {
width: 200px;
height: 200px;
background: #ddd;
}
</style>
<div class="my-container pt-3 pl-3">
主余白设置，高3左3
<div class="bg-primary w-50 h-50 pt-1 pl-2"> 现场直播 </div>
子余白设置，高1左2，各个余白相互独立
</div>
<div class="my-container px-3 py-3">
x代表左右，左右各3，y代表上下，上下各3
<div class="bg-success w-100 h-100"> 现场录播 </div>
</div>
margin 的使用方法：在定义的类里面加上
margin-bottom，top，left，right: 100px;
那么在被调用时就会留白100px
margin: 0 auto
设置盒子即类居中，在浏览器页面中间显示
底部留白
5.按钮的技巧
<button> Yes </button>
<button class="btn"> Yes </button>
<button class="btn btn-primary"> Yes </button> 以上三个都是普通
<button class="btn btn-danger btn-sm"> Yes </button> 小号
<button class="btn btn-success btn-lg"> Yes </button> 大号
6.独特的网格系统 grid
Bootstrap4 将网页分割成12列
<div class="container">
<div class="row mb-3">
mb为下行距
<div class="col-4 bg-danger"> COL1 </div>
<div class="col-4 bg-success"> COL2 </div>
<div class="col-4 bg-warning"> COL3 </div>
</div>
<div class="row">
<div class="col-2 bg-danger"> COL1 </div>
<div class="col-8 bg-success"> COL2 </div>
<div class="col-2 bg-warning"> COL3 </div>
</div>
<div class="row mt-3">
mt为上行距
<div class="col-6 bg-danger"> COL1 </div>
<div class="col-4 bg-success"> COL2 </div>
<div class="col-8 bg-warning"> COL3 </div>
</div>
</div>
其中 container 是内置类，超过12的整体会在下一行显示
7.响应式布局
Bootstrap4 根据客户端显示屏幕的大小，分为以下几类
超小
-<576px
-.col-*
小
->=576px
-.col-sm-*
中
->768px
-.col-md-*
大
->992px
-.col-lg-*
超大
->1200px
-.col-xl-*
class = row 定义1行
body 内加入
<div class="row mb-3">
<div class="col-6 bg-success"> Hello1 </div>
占一半
</div>
<div class="row mb-3">
<div class="col-xl-12 col-lg-10 col-md-8 col-sm-4 col-6 bg-warning"> Hello2 </div>
超大屏幕时占12，大屏幕占10，中等占8，小占4，特小/达不到其他标准时占6
</div>
<div class="row mb-3">
<div class="col-12 col-md-6 bg-danger"> Hello3 </div>
一般是12，到中等时占6
</div>
<div class="row">
<div class="col-12 col-md-6 bg-danger"> Hello4a </div>
<div class="d-none d-md-block col-md-6 bg-primary"> Hello4b </div>
一般不出现，到中等时占6，与上一行平分
</div>
随机截取2张效果图
8.特殊Section的使用
<main>
<section class="py-5">
<h2 class="text-center mb-5"> 有福利 </h2>
<div class="container">
<div class="text-center mb-5">
<h3> 柳岩 </h3>
<p> 柳岩（Ada），1980年11月8日出生于湖南衡阳，中国内地女演员、歌手、主持人。2000年，柳岩担任广东有线广播电视台信息频道《财经新闻》主持人，从而开始了她的主持生涯.</p>
<img src="img1/柳岩.jpg" class="w-25 h-10" >
</div>
<div class="text-center mb-5">
<h3> 古力娜扎 </h3>
<p> 古力娜扎（Gulnazar），1992年5月2日出生于新疆乌鲁木齐市，中国内地影视女演员、时尚模特。2011年，古力娜扎考入北京电影学院表演系本科班就读；同年，她签约上海唐人电影制作有限公司，并出演个人首部电视剧《轩辕剑之天之痕》，而她也因此被观众熟知.</p>
<img src="img1/古力娜扎.jpg" class="w-25 h-100" >
</div>
</div>
</section>
</main>
设置居中显示，效果如下
9.完成特殊Section
效果较好于上图
<main>
<section class="py-5">
<h2 class="text-center mb-5"> 有福利 </h2>
<div class="container">
<div class="text-center mb-5 row">
<div class="col-md-9">
<h3> 柳岩 </h3>
<p> 柳岩（Ada），1980年11月8日出生于湖南衡阳，中国内地女演员、歌手、主持人。2000年，柳岩担任广东有线广播电视台信息频道《财经新闻》主持人，从而开始了她的主持生涯.</p>
</div>
<div class="col-md-3">
<img src="img1/柳岩.jpg" class="w-50" >
</div>
</div>
<div class="text-center mb-5 row">
<div class="col-md-9 order-md-2">
<h3> 古力娜扎 </h3>
<p> 古力娜扎（Gulnazar），1992年5月2日出生于新疆乌鲁木齐市，中国内地影视女演员、时尚模特。2011年，古力娜扎考入北京电影学院表演系本科班就读；同年，她签约上海唐人电影制作有限公司，并出演个人首部电视剧《轩辕剑之天之痕》，而她也因此被观众熟知.</p>
</div>
<div class="col-md-3 order-md-1">
<img src="img1/古力娜扎.jpg" class="w-50">
</div>
</div>
</div>
</section>
</main>
文字图片左右式分布
注意:order-md-1 设置显示顺序优先级为1，
order-md-2 设置显示顺序优先级为2；
如果没有达到 md水准，那么就会默认文字图片竖着排列
效果图
屏幕未达到 md 宽度时
此之为响应式分布
