1.0 響應(yīng)式開(kāi)發(fā)原理
1.1 響應(yīng)式開(kāi)發(fā)原理
就是使用媒體查詢(xún)針對(duì)不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置，從而適配不同設(shè)備的目的义图。
設(shè)備的劃分情況：
- 小于768的為超小屏幕（手機(jī)）
- 768~992之間的為小屏設(shè)備（平板）
- 992~1200的中等屏幕（桌面顯示器）
- 大于1200的寬屏設(shè)備（大桌面顯示器）
1.2 響應(yīng)式布局容器
響應(yīng)式需要一個(gè)父級(jí)做為布局容器抡砂，來(lái)配合子級(jí)元素來(lái)實(shí)現(xiàn)變化效果挑围。
原理就是在不同屏幕下抱究，通過(guò)媒體查詢(xún)來(lái)改變這個(gè)布局容器的大小，再改變里面子元素的排列方式和大小涎嚼，從而實(shí)現(xiàn)不同屏幕下阱州，看到不同的頁(yè)面布局和樣式變化。
父容器版心的尺寸劃分
- 超小屏幕（手機(jī)法梯，小于 768px）：設(shè)置寬度為 100%
- 小屏幕（平板苔货，大于等于 768px）：設(shè)置寬度為 750px
- 中等屏幕（桌面顯示器，大于等于 992px）：寬度設(shè)置為 970px
- 大屏幕（大桌面顯示器立哑，大于等于 1200px）：寬度設(shè)置為 1170px
但是我們也可以根據(jù)實(shí)際情況自己定義劃分
2.0 bootstrap的介紹
2.1Bootstrap簡(jiǎn)介
Bootstrap 來(lái)自 Twitter（推特）夜惭，是目前最受歡迎的前端框架。Bootstrap 是基于HTML铛绰、CSS 和 JAVASCRIPT 的诈茧，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷捂掰。
框架：顧名思義就是一套架構(gòu)敢会，它有一套比較完整的網(wǎng)頁(yè)功能解決方案曾沈，而且控制權(quán)在框架本身，有預(yù)制樣式庫(kù)鸥昏、組件和插件塞俱。使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開(kāi)發(fā)。
2.2 bootstrap優(yōu)點(diǎn)
- 標(biāo)準(zhǔn)化的html+css編碼規(guī)范
- 提供了一套簡(jiǎn)潔互广、直觀(guān)敛腌、強(qiáng)悍的組件
- 有自己的生態(tài)圈卧土，不斷的更新迭代
- 讓開(kāi)發(fā)更簡(jiǎn)單惫皱，提高了開(kāi)發(fā)的效率
2.3 版本簡(jiǎn)介
2.x.x：停止維護(hù),兼容性好,代碼不夠簡(jiǎn)潔，功能不夠完善尤莺。
3.x.x：目前使用最多,穩(wěn)定,但是放棄了IE6-IE7旅敷。對(duì) IE8 支持但是界面效果不好,偏向用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB 項(xiàng)目颤霎。
4.x.x：最新版媳谁，目前還不是很流行
2.4bootstrap基本使用
在現(xiàn)階段我們還沒(méi)有接觸JS相關(guān)課程，所以我們只考慮使用它的樣式庫(kù)友酱。
Bootstrap 使用四步曲：
-
創(chuàng)建文件夾結(jié)構(gòu)
1.png
? -
創(chuàng)建 html 骨架結(jié)構(gòu)
<!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個(gè)meta標(biāo)簽*必須*放在最前面晴音，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好缔杉，世界锤躁！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> -
引入相關(guān)樣式文件
<!-- Bootstrap 核心樣式--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -
書(shū)寫(xiě)內(nèi)容
直接拿Bootstrap 預(yù)先定義好的樣式來(lái)使用
修改Bootstrap 原來(lái)的樣式，注意權(quán)重問(wèn)題
學(xué)好Bootstrap 的關(guān)鍵在于知道
2.5 bootstrap布局容器
Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container 或者.container-fluid 容器或详，它提供了兩個(gè)作此用處的類(lèi)系羞。
.container
- 響應(yīng)式布局的容器 固定寬度
- 大屏 ( >=1200px) 寬度定為 1170px
- 中屏 ( >=992px) 寬度定為 970px
- 小屏 ( >=768px) 寬度定為 750px
- 超小屏 (100%)
.container-fluid
- 流式布局容器 百分百寬度
- 占據(jù)全部視口（viewport）的容器。
2.6 bootstrap柵格系統(tǒng)
Bootstrap提供了一套響應(yīng)式霸琴、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)椒振，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列梧乘。
柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局澎迎，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。
- 按照不同屏幕劃分為1~12 等份
- 行（row） 可以去除父容器作用15px的邊距
- xs-extra small：超醒〉鳌夹供； sm-small：小学歧； md-medium：中等罩引； lg-large：大；
- 列（column）大于 12枝笨，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列
- 每一列默認(rèn)有左右15像素的 padding
- 可以同時(shí)為一列指定多個(gè)設(shè)備的類(lèi)名袁铐，以便劃分不同份數(shù) 例如 class="col-md-4 col-sm-6"
柵格嵌套
柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套揭蜒。簡(jiǎn)單理解就是一個(gè)列內(nèi)再分成若干份小列。我們可以通過(guò)添加一個(gè)新的 .row 元素和一系列 .col-sm-* 元素到已經(jīng)存在的 .col-sm-*
元素內(nèi)剔桨。
<!-- 列嵌套 -->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>
列偏移
使用 .col-md-offset-* 類(lèi)可以將列向右側(cè)偏移屉更。這些類(lèi)實(shí)際是通過(guò)使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。
<!-- 列偏移 -->
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
列排序
通過(guò)使用 .col-md-push-* 和 .col-md-pull-* 類(lèi)就可以很容易的改變列（column）的順序洒缀。
<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左側(cè)</div>
<div class="col-lg-8 col-lg-pull-4">右側(cè)</div>
</div>
響應(yīng)式工具
為了加快對(duì)移動(dòng)設(shè)備友好的頁(yè)面開(kāi)發(fā)工作瑰谜，利用媒體查詢(xún)功能，并使用這些工具類(lèi)可以方便的針對(duì)不同設(shè)備展示或隱藏頁(yè)面內(nèi)容
