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 寬度時
此之爲響應式分佈
