一、今日內(nèi)容
1. Bootstrap概述
2. 響應式布局（柵格系統(tǒng)）
3. Bootstrap的全局CSS樣式和JS插件
二、Bootstrap學習
1. Bootstrap概述
（1）概念：
概念：一個前端開發(fā)的框架。來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
* 框架：一個半成品軟件，開發(fā)人員可以在框架的基礎上，再進行開發(fā)，簡化編碼。
* 好處：
1. 定義了很多的css樣式和js插件，我們可以直接調(diào)用，這樣可以使我們開發(fā)出更好的界面
2. 響應式布局。（Bootstrap火起來的最主要的因素）
* 同一套頁面可以兼容不同分辨率的設備
（2）使用Bootstrap
- 到https://v3.bootcss.com/ 中下載Bootstrap資源文件：
在這里插入圖片描述 -
將文件解壓，會有如下三個文件，將這三個文件全部復制粘貼到項目中：
在這里插入圖片描述 - 再將
jquery-3.2.1.min.js文件復制粘貼到js目錄下，結(jié)果如下：
jquery-3.2.1.min.js下載：
鏈接：https://pan.baidu.com/s/1Aik7uTa8uXGPvyjpahkS7g
提取碼：51zx
在這里插入圖片描述
- 再以下面的html代碼為模板寫html文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
<div class="container">
<div class="row">
<div class="col-lg-6">格子</div>
<div class="col-lg-6">格子</div>
</div>
</div>
</body>
</html>
- 根據(jù)https://v3.bootcss.com/css/中去找自己想要的css樣式并引入。
在這里插入圖片描述
2. 響應式布局（柵格系統(tǒng)）
1.作用：使得同一套頁面可以兼容不同分辨率的設備。
2. 實現(xiàn)：依賴于柵格系統(tǒng)：將一行平均分成12個格子，可以指定元素占幾個格子
1. 步驟：
1. 定義容器。相當于之前的table
* 容器分類：
1. container：兩邊留白
2. container-fluid：兩邊沒有留白，每一種設備都是100%寬度
2. 定義行。相當于之前的tr 樣式：row
3. 定義元素。指定該元素在不同的設備上，所占的格子數(shù)目。樣式：col-設備代號-格子數(shù)目
* 設備代號：
1. xs：超小屏幕 手機 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面顯示器 (≥992px)
4. lg：大屏幕 大桌面顯示器 (≥1200px)
注意：一個元素可以設置多個class值：class="col-sm-2 col-lg-1"
* 注意：
1. 一行中如果格子數(shù)目超過12，則超出部分自動換行。
2. 柵格類屬性可以向上兼容。大設備可以兼容小設備的柵格設置。（柵格類適用于與屏幕寬度大于或等于分界點大小的設備）
3. 柵格類屬性向下不兼容。小設備設備不兼容大設備的柵格設置。（如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。）
2. 例子：
<div class="container">
<div class="row">
<div class="col-lg-6">格子</div>
<div class="col-lg-6">格子</div>
</div>
</div>
3. Bootstrap的全局CSS樣式和JS插件
1. 全局CSS樣式：
* 按鈕：class="btn btn-default"
* 圖片：
* class="img-responsive"：圖片在任意尺寸都占100%
* 圖片形狀
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圓形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
* 表格
* table
* table-bordered
* table-hover
* 表單
* 給表單項添加：class="form-control"
2. 組件：
* 導航條
* 分頁條
3. 插件：
* 輪播圖
核心：要什么就取bootstrap網(wǎng)找，復制下來，然后，哪里不會刪哪里，慢慢摸索代碼。
