1.媒體查詢
目的：能夠根據(jù)設(shè)備寬度的變化础浮，設(shè)置差異化樣式
開發(fā)常用寫法
@media (媒體特性) ｛
選擇器 ｛
樣式
｝
｝
完整寫法（幾乎不用）
@media 關(guān)鍵詞 媒體類型 and (媒體特性) ｛
選擇器 ｛
樣式
｝
｝
其中媒體特性最常用的是min-width（從小到大）和 max-width（從大到杏１ā）
關(guān)鍵詞有and、only和not
除了在css里寫媒體查詢焦影，還可通過外鏈?zhǔn)紺SS引入
<link rel="stylesheet" media="關(guān)鍵詞 媒體類型 and (媒體特性) " href="xx.css">
2.BootStrap
BootStrap是一套快速開發(fā)響應(yīng)式網(wǎng)頁的UI框架
中文官網(wǎng): https://www.bootcss.com/
- 下載： https://www.bootcss.com/
首頁 → BootStrap3中文文檔 → 下載BootStrap
image.png - 使用
2.1. 引入： BootStrap提供的CSS代碼
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
2.22. 調(diào)用類：使用BootStrap提供的樣式
container：響應(yīng)式布局版心類
BootStrap柵格系統(tǒng)
柵格化是指將整個(gè)網(wǎng)頁的寬度分成若干等份，BootStrap3默認(rèn)將網(wǎng)頁分成12等份
?.container是 Bootstrap 中專門提供的類名，所有應(yīng)用該類名的盒子氧急，默認(rèn)已被指定寬度且居中。
?.container-fluid也是 Bootstrap 中專門提供的類名毫深，所有應(yīng)用該類名的盒子吩坝，寬度均為 100%。
?分別使用.row類名和 .col類名定義柵格布局的行和列哑蔫。
注意:
- container類自帶間距15px;
- row類自帶間距-15px
row的使用場(chǎng)景：例如
父盒子有左右15的padding钉寝，在里面放子盒子的時(shí)候，在給子盒子設(shè)置class闸迷，用bootstrap的一些類比如col-md-6的時(shí)候嵌纲，子盒子也會(huì)有左右15的padding，此時(shí)可以在子盒子外在再加一個(gè)div腥沽，class使用row疹瘦，可抵消父盒子的左右15的padding。
<div class="container">
<div class="row">//通過row抵消父盒子的左右15的padding
<div class="col-md-4">1 </div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
其他（了解）
1.全局css樣式
掌握BootStrap手冊(cè)用法巡球，使用全局CSS樣式美化標(biāo)簽
網(wǎng)站首頁 → BootStrap3中文文檔 → 全局CSS樣式 → 按分類導(dǎo)航查找目標(biāo)類
布局類：表格
? table : 基本類名, 初始化表格默認(rèn)樣式
? table-bordered : 邊框線
? table-striped : 隔行變色
? table-hover : 鼠標(biāo)懸停效果
? table-responsive : 表格寬溢出滾動(dòng)
布局類：表單
? form-control : 設(shè)置表單元素input, select, textarea的樣式
? checkbox 和 radio : 設(shè)置復(fù)選框和單選框的樣式
? form-inline : 設(shè)置表單元素水平排列
? disabled : 設(shè)置表單禁用狀態(tài)樣式
? input-lg; input-sm, input-sm : 設(shè)置表單元素的大小
布局類：輔助類
? pull-right : 強(qiáng)制元素右浮動(dòng)
? pull-left : 強(qiáng)制元素左浮動(dòng)
? clearfix : 清除浮動(dòng)元素的影響
? text-left文 : 本左對(duì)齊
? text-right : 文本右對(duì)齊
? text-center : 文本居中對(duì)齊
? center-block : 塊元素居中
布局類：響應(yīng)式工具（不同屏幕尺寸隱藏或顯示頁面內(nèi)容）
美化內(nèi)容類：按鈕
? btn : 基準(zhǔn)樣式
? btn-info; btn-success : 設(shè)置按鈕背景色
? btn-block : 設(shè)置按鈕為塊元素
? btn-lg; btn-sm; btn-xs : 設(shè)置按鈕大小
美化內(nèi)容類：圖片
? img-responsive: 圖片自適應(yīng)
? img-rounded : 圖片設(shè)置圓角
? img-circle : 圖片設(shè)置正圓
? img-thumbnail : 圖片添加邊框線
2.插件言沐、組件、定制
可在官網(wǎng)查找使用酣栈，使用方式
其中插件使用需額外引入：jQuery.js + BootStrap.min.js
