1 響應式網頁

1.1 概述

響應式網頁定義
Responsive Web Design：響應式網頁設計，專爲改進移動互聯網瀏覽體驗提出的概念。
基本理念：集中創建頁面的圖片和排版大小，智能地根據用戶行爲和使用的設備環境進行相應佈局(自動更改佈局、圖片、文字效果)——一個頁面兼容各種終端
響應式網頁構成
1）不能固定寬度，必須是流式網格佈局(Fluid:流式、流動式、液態)；
2）可伸縮的圖片和文字，隨容器大小改變；
3）CSS3 Media Query能根據瀏覽設備的寬和高調用不同CSS

響應式佈局網頁問題：代碼複雜度極大增加，只適用於內容不太多的頁面(企業官網、門戶網站)

1.2 測試響應式網頁

瀏覽器設備模擬器
簡單方便；測試效果有限
第三方工具
無需添置太多真實設備，測試方便；但測試效果有限，需進一步驗證；(phonegap，Android ADT，IOS Xcode，www.browserstack.com)
真實設備.
測試效果真實可靠，但測試任務量較大

1.3 編寫響應式網頁

允許網頁寬度自動調整
在head標籤中聲明viewport元標籤
```
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no">
</head>
```
viewport：元標籤(視口)，IOS最先引入，手機中顯示網頁內容的虛擬窗口的大小一般遠大於手機屏幕，HTML可以指定視口大小
width：視口的寬度，取值爲數值或device-width；
initial-scale：初始縮放倍率
maximum-scale：允許縮放的最大倍率
minimum-scale：允許縮放的最小倍率
user-scalable：是否允許用戶手動縮放；1/0/yes/no
height：視口高度，一般不指定
IOS專用屬性：minimal-ui:ios ui設置在ios設備上隱藏導航欄和地址欄
一般設置視口寬度爲設備寬度，不允許縮放
不使用絕對寬度
所有元素的寬不能指定固定值，必須使用相對寬度：width:60%或auto;
相對大小的字體
使用font-size:rem/em
流式佈局
使用流式佈局+彈性佈局(float+flex)：佈局各個區塊位置都是浮動的;搭配媒體查詢技術(CSS Media Query)：響應式網頁必備條件，可以自動根據當前瀏覽器設備的不同選擇執行部分CSS樣式
圖片自適應
實現圖片的自動縮放：img{max-width:100%;}或者根據客戶端屏幕大小加載不同尺寸的圖片

選擇加載CSS
不推薦根據瀏覽器不同加載不同CSS文件：

<link rel="stylesheet" href="tinyScreen.css" media="screen and (max-device-width:400px)">
<link rel="stylesheet" href="smallScreen.css" media="screen and (min-width:400px) and (max-device-width:600px)">

CSS的@media規則
推薦根據媒體查詢不同屏幕寬度選擇執行CSS文件中部分CSS規則
```
   @media screen and (min-widht:768px) and (max-diwth:991px) {
   	選擇器樣式
   }
```

2 Bootstrap

2.1 Bootstrap

2.1.1 Bootstrap定義

簡潔、直觀、強悍的前端開發框架讓web開發變得迅速簡單
官網：htttp://getbootstrap.com
中文網站：http://www.bootcss.com
Bootstrap是最受歡迎的HTML、CSS和JS框架，用於開發響應式佈局、移動設備優先的WEB項目
Bootstrap提供Sass變量和大量mixin、響應式扎個系統、可擴展的預製組件、基於jQuery的強大插件系統

2.1.2 目錄說明

css目錄——用於存放Bootstrap框架使用的樣式文件
bootstrap.css：框架的樣式文件
bootstrap.min.css：框架的樣式壓縮文件
bootstrap-grid.css：框架的柵格文件
bootstrap-reboot.css：框架的引導文件
js目錄——用於存放Bootstrap框架使用的核心javascript文件
bootstrap.js：框架的核心javascript文件
bootstrap.min.js：框架的核心javascript壓縮文件

按順序導入4個文件：bootstrap.css、jquery.min.js、popper.min.js、bootstrap.min.js

2.1.2 模板

/*聲明*/
<!DOCTYPE html>
<html>
<head lang="en">
  /*元數據*/
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  /*樣式*/
  <link rel="stylesheet" href="../css/bootstrap.css"/>
  /*腳本*/
  <script src="../js/jquery.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <title></title>
</head>
<body>
//容器
<div class="container">

</div>
</body>
</html>

2.1.3 相關技術

Bootstrap許多組件需要依賴JavaScript運行，即依賴jQuery、Popper.js以及開發的JavaScript插件：jquery.min.js文件，popper.min.js文件

2.3 bootstrap.css

按順序導入4個文件：bootstrap.css-> jquery.min.js->popper.min.js->bootstrap.min.js

2.3.1 CSS Reset

有些HTML標籤在瀏覽器有默認的樣式
-html、body、h#、p、ul、li、a等；
需要使用css代碼改寫瀏覽器默認設置以保證兼容性；

2.3.2 box-sizing

box-sizing用於設置元素的框模型(盒模型)的方式，取值：
content-box：默認取值，寬度和高度指元素的內容框；
border-box：寬度高度設置元素的內邊距+左右邊框+內容寬高

3 全局CSS樣式

3.1 全局CSS樣式

Bootstrap需要使用HTML5的元素和屬性；

<!DOCTYPE html>
<html lang="zh-CN"></html>

爲了確保繪製和觸屏縮放，在<head>之中添加viewport元數據元素
<meta name=“viewport” content=“width=device-width, initial-scale=1”>

佈局容器
.container用來固定寬度並支持響應式佈局的容器；
.container-fluid類用於100%寬度，佔據全部視口(viewport)的容器
按鈕
按鈕顏色：
.btn-success；.btn-warning；.btn-danger；.btn-info；.btn-primary；.btn-secondary；.btn-dark；.btn-ligth；.btn-link
按鈕邊框顏色：
btn-outline-warning黃色邊框
btn-outline-danger紅色邊框
按鈕大小：
btn-lg
btn-sm
btn-block
圖片
rounded圓角圖片；
rounded-circle橢圓圖片；
img-thumbnail縮略圖；
img-fluid響應式圖片,最大不超過原圖
文本
字體大小：h#;
對齊：text-left、text-center、text-right、text-justify、text-nowrap；
斜體：font-italic
字體粗細：font-weight-bold
大小寫：text-lowercase、text-uppercase、text-capitalize(首字母大寫)
顏色：text-success、text-warning、text-error、text-info、text-primary
列表
無序列表ul和有序列表ol
.list-unstyled去除點點
.list-inline
.list-group定義列表組
.list-group-item定義列表項
.active激活狀態
.disabled禁用
list-group-item-danger列表項顏色(不列舉)
表格
基本表格.table
條紋狀表格.table-striped
帶邊框表格.table-bordered
鼠標懸停.table-hover
響應式表格(表格父級元素).table-responsive
背景色table-danger
輔助樣式
浮動float- * -left / float--right， 表示不同的屏幕lg/md/sm；使用.clearfix解決高度坍塌問題
顯示/隱藏.visible/.invisible
背景.bg-success/warning/info/dange/error/primary
邊框.border-0去除邊框；-top/right/bottom/left設置單邊；-success/warning…邊框顏色
圓角.rounded/.rounded-0圓角和去除圓角；.rounded-top/right/bottom/left
居中對齊.mx-auto
寬度.w- * ( * : 25/50/75/100 )
高度.h- * ( * : 25/50/75/100 )
外邊距m-0~5，分別表示0.25/0.5/1/1.5/3rem；m-auto；單邊設置mt/mr/mb/ml-1
內邊距同外邊距，使用p代替m；
內外邊距響應式：m-*-n，m取值爲m或者其單邊形式， *表示xl/lq/md/sm, n:0~5

3.2 柵格系統

3.2.1 概述

Bootstrap提供一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口(Viewport)的增加，系統自動分爲最多12列，通過一系列行與列的組合來創建頁面佈局

3.2.2 柵格系統工作原理

row必須包含在容器.container(固定寬度).container-fluid(100%寬度)內；row中包含一組column存內容，提供預定義的類，設置不同尺寸

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>
<h1>不同屏幕下不同的佔比</h1>
<div class="row">
  <div class="col-lg-4 col-md-2 col-sm-12">第一列</div>
  <div class="col-lg-4 col-md-8 col-sm-12">第二列</div>
  <div class="col-lg-4 col-md-2 col-sm-12">第三列</div>
</div>

3.2.3 柵格佈局

web頁面佈局的三種方法：

佈局方法	table佈局	div+css佈局	Bootstrap柵格佈局
優點	簡單易控制	語義正確，渲染效率高	簡單易控制，語義正確，渲染效率高，支持響應式
缺點	語義錯誤，渲染效率低	控制麻煩	頁面非常複雜就不適合使用柵格

柵格，每行12個單元格，元素在不同屏幕下佔的格子數
柵格佈局最外層使用容器.container定寬容器或.container-fluid變寬容器；容器中聲明.row每行平分12個單元格；行中聲明列.col(每列寬度佔比n/12)

總結：不同屏幕下列的適應性問題
col-xl-* 只能在xl屏幕下有效
col-lg-* 能在xl/lg屏幕下有效
col-md-* 能在xl/lg/md屏幕下有效
col-sm-* 能在xl/lg/md/sm屏幕下有效
小分辨率往大分辨率兼容
列偏移：使用列偏移指定列及其後的列向右偏移：offset-*-n，*表示屏幕像素類型，n表示1~11；底層原理是通過添加margin-left實現偏移

3.2.3 彈性佈局

使用d-*-flex、d- * -inline-flex類創建彈性容器； *代表xl/lg/md/sm

水平方向
.flex- * -row設置彈性子元素水平顯示，默認效果；
.flex- * -row-reverse設置右對齊顯示；
垂直方向
.felx- * -column設置彈性子元素垂直方向現實；
.flex- * -column-reverse翻轉子元素；
內容排列
.justify-content-* -value用於修改主軸對齊方式，value取值：
start默認
end
center
between
around
響應式flex類
根據不同設備設置flex類從而實現頁面響應式佈局：sm，md，lg或xl；
根據不同屏幕設備創建彈性盒子容器：.d-sm/md/lg/xl-flex；
根據不同屏幕設備在水平方向/垂直方向顯示彈性子元素：.flex-*-row/column

3.3 表單

form標籤中引用class="form-inline/form-group"來控制方向；
如果只引用form-group添加下外邊距(堆疊表單)；只引用form-inline變成彈性容器，默認內部項目主軸爲X軸；form中引用form-inline，內部項目引用form-group，form變成彈性容器，默認內部項目主軸X軸，所有項目變成彈性容器

//內聯表單
<form class="form-inline">
	<div class="form-group">
	</div>

樣式：
form-control/form-check
form-check-inline/form-check-input
form-check-label/form-text

Bootstrap_1.響應式網頁、Bootstrap、全局CSS樣式

響應式網頁、Bootstrap、全局CSS樣式