Bootstrap
概念：一個前端開發的框架
好處：
1. 定義了很多CSS樣式和JS插件。開發人員可以直接使用這些樣式和插件得到豐富的頁面效果
2. 響應式佈局。同一套頁面可以兼容不同分辨率的設備
基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--上述三個meta標籤必須放在最前面，任何內容都必須在隨後 -->
<title>入門模板</title>
<!-- Bootstrap-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery(Bootstrap的所有JavaScript插件都依賴於jQuery.所以放在前面-->
<script src="jquery-3.2.1.min.js"></script>
<!-- 加載Bootstrap的所有JavaScript插件-->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
hello world.
</body>
</html>
響應式佈局：柵格系統
同一套頁面可以兼容不同分辨率的設備
實現：依賴於柵格系統：將一行平均分爲12個格子，可以指定元素佔幾個格子。
步驟：
1）定義容器。相當於之前的table
容器分類：
container：兩邊有留白
container-fluid：每一種設備100%寬度
<div class="container-fluid">
2)定義行。相當於之前的tr 樣式：row
<div class="row">
3)定義元素。指定該元素在不同設備所佔的格子數目。樣式：col-設備代號-格子數目
設備代號：
xs:超小屏幕 手機等（<768px）:col-xs-2代表在超小屏幕上一個元素佔2個格子
sm:小屏幕，pad等
md：中等屏幕，筆記本電腦
lg：大屏幕
注：
1. 一行中如果格子超過12個數目，則會自動換行
2. 柵格類屬性可以向上兼容
3. 如果設備寬度小於柵格類屬性的設備代碼的最小值，會一個元素佔滿整行。
<head>
<style>
.inner{
border: 1px solid rebeccapurple;
text-align: center;
}
</style>
</head>
<body>
<!--1.1定義容器-->
<div class="container-fluid">
<!-- 1.2定義行-->
<div class="row">
<!-- 定義元素
在大屏幕上顯示一行12個格子
在pad上一行6個格子
-->
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
<div class="col-lg-1 col-sm-3 inner">柵格</div>
</div>
</div>
</body>
</html>
CSS樣式和JS樣式
全局CSS樣式：
按鈕
圖片
表格
表單
組件：
導航條
分頁條
插件：
輪播圖
