移動(dòng)web開發(fā)基礎(chǔ)

時(shí)間：2023-06-26 22:57:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-06-26 22:57:01 來源：網(wǎng)站運(yùn)營

移動(dòng)web開發(fā)基礎(chǔ)：

移動(dòng)端常見的瀏覽器

UC、QQ、歐鵬、百度、360、谷歌、搜狗、獵豹、其他雜牌瀏覽器

國內(nèi)的UC、QQ、百度等手機(jī)瀏覽器都是根據(jù)Webkit修改過來的內(nèi)核，國內(nèi)每月自主研發(fā)的內(nèi)核。

總結(jié)：兼容移動(dòng)端主流瀏覽器，處理webkit內(nèi)核瀏覽器即可

手機(jī)屏幕現(xiàn)狀

移動(dòng)端設(shè)備尺寸非常多，碎片化嚴(yán)重。

安卓設(shè)備有多種分辨率。

開發(fā)者無需關(guān)注分辨率，常使用的尺寸單位是px。

移動(dòng)端調(diào)試方法

谷歌瀏覽器的模擬手機(jī)調(diào)試

搭建本地web服務(wù)器，手機(jī)和服務(wù)器一個(gè)局域網(wǎng)內(nèi)，通過手機(jī)訪問服務(wù)器

使用外網(wǎng)服務(wù)器，直接IP或者域名訪問

視口viewport

視口是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。視口可以分為布局視口、視覺視口、理想視口。

布局視口layout viewport

一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個(gè)布局視口，用于解決早期的PC端頁面在手機(jī)上顯示的問題。

IOS,Android都會(huì)將視口分辨率設(shè)置為980px，所有PC上的網(wǎng)頁大多都能在手機(jī)上呈現(xiàn)。

但是元素看上去很小，一般默認(rèn)可以通過手動(dòng)縮放網(wǎng)頁。

視覺視口visual viewport

用戶正在看到的網(wǎng)站的區(qū)域。

可以通過縮放去操作視覺視口，但不會(huì)影響布局視口，布局視口仍保持原來的寬度。

理想視口ideal viewport

為了使網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定 理想視口，對設(shè)備來講，是最理想的視口尺寸

需要手動(dòng)添寫meta視口標(biāo)簽通知瀏覽器操作

meta視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，設(shè)備有多寬，我們布局視口就有多寬

meta視口標(biāo)簽

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0">

屬性	解釋說明
width	寬度設(shè)置的是viewport寬度，可以設(shè)置device-width特殊值
initial-scale	初始縮放比，大于0的數(shù)字
maximum-scale	最大縮放比，大于0的數(shù)字
minimum-scale	最小縮放比，大于0的數(shù)字
user-scalable	用戶是否可以縮放，yes/no（1/0）

標(biāo)準(zhǔn)的視口參數(shù)設(shè)置

1.視口寬度和設(shè)備保持一致

2.視口的默認(rèn)縮放比1.0

3.不允許用戶進(jìn)行縮放

4.最大允許縮放比例1.0

5.最小允許縮放比例1.0

二倍圖

物理像素/物理像素比

物理像素點(diǎn)指的是屏幕顯示的最小顆粒，是物理真實(shí)存在的。是廠商在出場時(shí)就設(shè)置好了。

PC端頁面，1px等于1個(gè)物理像素的，但是移動(dòng)端不一定。

物理像素比：一個(gè)px的能顯示的物理像素點(diǎn)的個(gè)數(shù)

PC端和早期的手機(jī)屏幕：1px=1物理像素

Retina（視網(wǎng)膜屏幕）一種顯示技術(shù)，可以將更多的物理像素點(diǎn)壓縮至一塊屏幕里，從而

達(dá)到更高的分辨率，并提高屏幕顯示的細(xì)膩程度。

多倍圖

一張圖片在手機(jī)屏幕中打開，物理像素比會(huì)放大倍數(shù)，會(huì)造成圖片模糊

在標(biāo)準(zhǔn)的視口設(shè)置中，使用多倍圖來提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問題

通常使用二倍圖，還存在3、4倍圖的情況?？磳?shí)際開發(fā)公司需求。

背景圖片注意縮放問題。背景圖更改background-size屬性來調(diào)整縮放

移動(dòng)端開發(fā)選擇

移動(dòng)端主流開發(fā)方案

1.單獨(dú)制作移動(dòng)端頁面（主流）

2.響應(yīng)式頁面兼容移動(dòng)端（其次）

1.單獨(dú)制作移動(dòng)端頁面

通常情況下，網(wǎng)址域名前面加m（mobile）可以打開移動(dòng)端。通過判斷設(shè)備，如果是移動(dòng)設(shè)備打開，則跳轉(zhuǎn)到移動(dòng)端頁面。

2.響應(yīng)式頁面兼容PC移動(dòng)端

響應(yīng)式網(wǎng)站：PC和移動(dòng)端共用一套網(wǎng)站，只不過在不同寬度的屏幕下，樣式會(huì)自動(dòng)適配。

缺點(diǎn)：制作麻煩，需要花很大精力去調(diào)兼容性問題

移動(dòng)端常見問題解決方案

瀏覽器

移動(dòng)端瀏覽器基本以webkit內(nèi)核為主，因此就考慮webkit的兼容問題。

可以放心使用H5和css3樣式。

css初始化normalize.css

移動(dòng)端css初始化使用normalize.css。一種可以定制的css文件，讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一，

一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。

優(yōu)點(diǎn)：

1.保護(hù)了有價(jià)值的默認(rèn)值

2.修復(fù)了瀏覽器的bug，解決了瀏覽器不一致的默認(rèn)樣式

3.是模塊化的，提高了易用性

4.擁有詳細(xì)的文檔。

css3盒子模型box-sizing

傳統(tǒng)模式寬度計(jì)算：盒子的寬度=css中設(shè)置的width+border+padding

css3盒子模型：盒子的寬度=css中設(shè)置的width（width里包含了border和padding）

css3盒子模型，padding和border不會(huì)撐大盒子。

1.移動(dòng)端全部使用css3盒模型

2.PC端如果完全需要兼容，用傳統(tǒng)模式

不考慮兼容性，就選擇css3盒子模型

特殊樣式

1.css3盒子模型

box-sizing:border-box;-webkit-box-sizing:border-box;2.點(diǎn)擊高亮需要設(shè)置清除；設(shè)置為transparent完成透明

-webkit-tap-highlight-color:transparent;3.在移動(dòng)端瀏覽器的外觀在iOS上加上一個(gè)屬性才能給按鈕和輸入框自定義樣式

-webkit-appearance:none;4.禁用長按頁面時(shí)的彈出菜單

img,a{ -webkit-touch-callout:none;}

移動(dòng)端技術(shù)選型

1.單獨(dú)制作移動(dòng)頁面（主流）

1.流式布局（百分比布局）

2.flex彈性布局（推薦）

3.less+rem+媒體查詢布局

4.混合布局

2.響應(yīng)式頁面兼容移動(dòng)端

1.媒體查詢

2.bootstrap

1.流式布局

流式布局就是百分比布局，非固定像素布局

通過將盒子的寬度設(shè)置成百分比，從而根據(jù)屏幕的寬度來進(jìn)行伸縮，不受固定像素的限制，

內(nèi)容向兩側(cè)填充

流式布局方式是移動(dòng)web開發(fā)使用的比較常見的布局方式

注意：制作過程中需要定義頁面的最大和最小支持寬度

1.max-width最大寬度 ? 2.min-width最小寬度

二倍精靈圖做法

1.在firework里面把精靈圖等比例縮放為原來的一半

2.根據(jù)新的大小 測量坐標(biāo)

3.代碼中background-size也要書寫：精靈圖原來寬度的一半

圖片格式

DPG圖片壓縮技術(shù)

京東自主研發(fā)推出DPG圖片壓縮技術(shù)，可直接節(jié)省用戶50%的瀏覽流量，極大的提升了用戶的網(wǎng)頁打開速度。

能夠兼容jpeg，實(shí)現(xiàn)全平臺(tái)、全部瀏覽器的兼容支持，壓縮后的圖片和webp的清晰度對比沒有差距。

webp圖片格式

谷歌開發(fā)的一種加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，能節(jié)省大量的服務(wù)器寬帶

資源和數(shù)據(jù)空間。

flex布局

傳統(tǒng)布局

1.兼容性好

2.布局繁瑣

3.局限性，不能在移動(dòng)端很好的布局

flex布局

1.操作方便，布局簡單，移動(dòng)端應(yīng)用廣泛

2.PC端瀏覽器支持情況較差

3.IE11不支持

注意：

1.PC端頁面布局，用傳統(tǒng)布局

2.移動(dòng)端或者不考慮兼容性問題的PC端頁面布局，用flex彈性布局

flex布局原理

flex彈性布局，用來為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為flex布局

為父盒子設(shè)置flex布局以后，子元素float、clear、vertical-align屬性將失效

伸縮布局=彈性布局=伸縮盒布局=彈性布局=flex布局

采用flex布局的元素，為flex容器。它的所有子元素自動(dòng)成為容器成員，稱為flex項(xiàng)目

總結(jié)：flex布局就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式

flex布局常見屬性

父項(xiàng)常見屬性

flex-direction:設(shè)置主軸的方向

justify-content:設(shè)置主軸上的子元素排列方式

flex-wrap：設(shè)置子元素是否換行

align-content:設(shè)置側(cè)軸上的子元素的排列方式（多行）

align-items:設(shè)置側(cè)軸上的子元素的排列方式（單行）

flex-flow:復(fù)合屬性，等于同時(shí)設(shè)置了flex-direction、flex-wrap

flex-direction:設(shè)置主軸的方向

主軸側(cè)軸

在flex布局中，是分為主軸和側(cè)軸兩個(gè)方向。主軸（x軸、行） 側(cè)軸（y軸、列）

默認(rèn)主軸方向x軸方向，水平向右

默認(rèn)側(cè)軸方向y軸方向，垂直向下

flex-direction屬性決定主軸的方向（項(xiàng)目的排列方向）

注意：主軸側(cè)軸是會(huì)發(fā)生變化的，看flex-direction設(shè)置誰為主軸，剩下的就是側(cè)軸。

子元素是跟著主軸來排列的。

屬性值	說明
row	默認(rèn)值，從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

justify-content:主軸上的子元素排列方式

定義了項(xiàng)目在主軸上的對齊方式

注意:使用屬性之前要確定好主軸是哪個(gè)

屬性值	說明
flex-start	默認(rèn)值，從頭開始 （如果主軸是x軸，從左到右）
flex-end	從尾部開始排列
center	在主軸居中對齊（如果主軸是x軸側(cè) 水平居中）
space-around	平分剩余的空間
space-between	在兩邊貼邊 再平分剩余空間（重要）

flex-wrap：設(shè)置子元素是否換行

默認(rèn)情況下，項(xiàng)目都排著一條線（軸線）上

flex-wrap屬性定義，flex布局中默認(rèn)是不換行的

屬性值	說明
nowrap	默認(rèn)值，不換行
wrap	換行

align-items:設(shè)置側(cè)軸上的子元素的排列方式（單行）

屬性控制子項(xiàng)在側(cè)軸（默認(rèn)是y軸）上排列方式

在子項(xiàng)為單項(xiàng)（單行）的時(shí)候使用

屬性值	說明
flex-start	默認(rèn)值，從上到下
flex-end	從下到上
center	擠在一起居中（垂直居中）
stretch	拉伸

align-content:側(cè)軸上的子元素的排列方式（多行）

設(shè)置子項(xiàng)在側(cè)軸上的排列方式，并且只能用于子項(xiàng)出現(xiàn)換行的情況（多行），在單行下沒有效果。

屬性值	說明
flex-start	在側(cè)軸的頭部開始排列
flex-end	在側(cè)軸的尾部開始排列
center	在側(cè)軸中間顯示
space-around	子項(xiàng)在側(cè)軸平分剩余空間
space-between	子項(xiàng)在側(cè)軸先分布在兩頭，再平分剩余空間
stretch	設(shè)置子項(xiàng)元素高度平分父元素高度

align-content、align-items區(qū)別

align-items適用于單行情況下，只有上對齊、下對齊、居中和拉伸

align-content適用于換行（多行）的情況下（單行情況無效），可以設(shè)置上對齊、下對齊

居中、拉伸以及平均分配剩余空間等屬性值。

總結(jié)

1.單行用align-items

2.多行用align-content

flex-flow:復(fù)合屬性

flex-direction、flex-wrap屬性的復(fù)合屬性

子項(xiàng)常見屬性

flex子項(xiàng)目占的份數(shù)

align-self控制子項(xiàng)自己在側(cè)軸的排序方式

order屬性定義子項(xiàng)的排序方式（前后順序）

flex屬性

flex屬性定義子項(xiàng)目分配父盒子的剩余空間，用flex來表示占多少份數(shù)

屬性值為數(shù)字，數(shù)字為1，表示占總份數(shù)的1份。默認(rèn)值是0。

align-self控制子項(xiàng)自己在側(cè)軸的排序方式

允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。

默認(rèn)值auto，表示繼承父元素align-items屬性，如果沒有父元素，等同于stretch

order屬性定義子項(xiàng)的排序方式

數(shù)值越小，排列越靠前，默認(rèn)為0。調(diào)整子項(xiàng)的加載順序

注意：和z-index不一樣。

rem布局

rem單位

rem是一個(gè)相對單位。rem基準(zhǔn)是相對于html元素的字體大小。

列如：根元素（html）設(shè)置font-size=12px;非根元素設(shè)置width:2rem；轉(zhuǎn)換成px表示就是24px。

優(yōu)勢：

父元素文字大小可能不一致，但是整個(gè)頁面只有一個(gè)html，可以很好的來控制整個(gè)

頁面的元素大小比例

媒體查詢（Media Query）

css3新語法

1.適用@media查詢，可以針對不同的媒體類型定義不同的樣式

2.@media可以針對不同的屏幕尺寸設(shè)置不同的樣式

3.重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面

4.目前針對很多蘋果手機(jī)、Android手機(jī)，平板等設(shè)備都用到多媒體查詢

語法規(guī)范

1.@media開頭

2.mediatype 媒體類型

3.關(guān)鍵字 and not only

4.media feature 媒體特性 必須有小括號(hào)包含

@media mediatype and|not|only (media feature) { CSS-Code;}

mediatype 媒體類型

媒體類型：將不同的終端設(shè)備劃分成不同的類型

值	說明
all	用于所有設(shè)備
print	用于打印機(jī)和打印預(yù)覽
screen	用于電腦屏幕，平板電腦，智能手機(jī)等

關(guān)鍵字

關(guān)鍵字將媒體類型或多個(gè)媒體特性連接到一起做為媒體查詢的條件

1.and: 可以將多個(gè)媒體特性連接到一起。

2.not：排除某個(gè)媒體類型，可以省略

3.or：可以測試多個(gè)媒體擦好像的條件，只要有一個(gè)條件成立，就執(zhí)行

4.only：指定某個(gè)特定的媒體類型，可以省略

媒體特性

每種媒體特性都各自具有不同的特性，根據(jù)不同的媒體類型的媒體特性設(shè)置不同的展示風(fēng)格。

注意要加小括號(hào)進(jìn)行包含

值	說明
width	頁面可見區(qū)域的寬度
min-width	頁面最小可見區(qū)域?qū)挾?/td>
max-width	頁面最大可見區(qū)域?qū)挾?/td>

媒體查詢代碼從小到大寫

媒體查詢+rem實(shí)現(xiàn)元素動(dòng)態(tài)大小變化

rem單位是跟著html來走的，有了rem頁面元素可以設(shè)置不同大小尺寸

媒體查詢可以根據(jù)不同設(shè)備寬度來修改樣式

媒體查詢+rem就可以實(shí)現(xiàn)不同設(shè)備寬度，實(shí)現(xiàn)頁面元素大小的動(dòng)態(tài)變化

引入資源方法

當(dāng)樣式比較繁多的時(shí)候，可以針對不同的媒體適用不同stylesheets(樣式表)

直接在link中判斷設(shè)備的尺寸，引入不同的css文件

<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">

css弊端

1.css是一種非程序式語言，沒有變量、函數(shù)、作用域等

2.css需要書寫大量看似沒有邏輯的代碼，css冗余度比較高

3.不方便維護(hù)及擴(kuò)展，不利于復(fù)用

4.css沒有很好的計(jì)算能力

5.非前端開發(fā)工程師，往往會(huì)因?yàn)槿鄙賑ss編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的css代碼項(xiàng)目

less

less是一門css擴(kuò)展語言，css預(yù)處理器

做為css的一種形式擴(kuò)展，并沒有減少css的功能，在現(xiàn)有的css語法上，為css加入程序式語言的特性

在css語法的基礎(chǔ)上，引入了變量、Mixin（混入），運(yùn)算以及函數(shù)等，大大簡化了css的編寫，并且

降低了css的維護(hù)成本，less可以用更少的代碼做更多的事情

less是一門css預(yù)處理語言，擴(kuò)展了css的動(dòng)態(tài)特性。

less使用

新建一個(gè)后綴名為.less文件，在這個(gè).less文件里書寫less語句

1.less變量

2.less編譯

3.less嵌套

4.less運(yùn)算

less變量

變量是指沒有固定的值，可以動(dòng)態(tài)改變的。因?yàn)閏ss中的一些顏色和數(shù)值等經(jīng)常使用

@變量名：值；

變量命名規(guī)范

1.必須有@為前綴

2.不能包含特殊字符

3.不能以數(shù)字開頭

4.區(qū)分大小寫

變量使用規(guī)范

直接使用

body { color:@color;}a:hover{ @color;}

less編譯

less包含一套自定義的語法和一個(gè)解釋器，根據(jù)這些語法定義自己的樣式規(guī)則，這些

規(guī)則最終會(huì)通過解析器，編譯生成對應(yīng)的css文件

把我們需要的.less文件，編譯生成為.css文件，然后html頁面才能使用。

推薦方法（node.js）：在當(dāng)前文件夾，使用cmd命令“l(fā)essc style.less>style.css”

less嵌套

內(nèi)部選擇器的前面沒有&符號(hào)，那們它被解析為父元素選擇器的后代

如果有&符號(hào)，就被解釋為父元素自身或父元素的偽類

less運(yùn)算

任何數(shù)字、顏色或者變量都可以參與運(yùn)算。less提供了+、-、*、/算術(shù)運(yùn)算。

注意：

1.參與運(yùn)算的兩個(gè)數(shù)字，可以一個(gè)有單位，一個(gè)沒有單位，最終單位就是唯一的那個(gè)單位

2.參與運(yùn)算的兩個(gè)數(shù)字，兩個(gè)都有單位，最終單位取第一個(gè)數(shù)字的單位

3.less運(yùn)算符左右必須加空格

less 語法更新，變量相除時(shí)，需添加小括號(hào)

width: (200rem / 50px);height: (300rem / 50px);

rem適配原理

讓一些不能等比自適應(yīng)的元素，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候，等比例適配當(dāng)前設(shè)備

使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小，任何頁面元素使用rem做尺寸單位，當(dāng)html字體大小變化元素尺寸也會(huì)

發(fā)生變化，然后達(dá)到等比例縮放的配置

rem實(shí)際開發(fā)適配方案

1.按照設(shè)計(jì)圖和設(shè)備寬度的比例，動(dòng)態(tài)計(jì)算并設(shè)置html跟標(biāo)簽的font-size大小(媒體查詢)；

2.CSS中，設(shè)計(jì)圖元素的寬、高、相對位置等取值，按照同等比例換算為rem為單位的值；

rem適配方案技術(shù)使用

1.less、媒體查詢、rem

2.flexible.js、rem（推薦）

適配方案1：rem+媒體查詢+less

1.設(shè)計(jì)稿常見尺寸寬度

一般情況下，以一兩套效果圖適應(yīng)大部分的屏幕，放棄極端屏/對其優(yōu)雅降級(jí)，犧牲一些效果。

蘋果目前基本以750px為準(zhǔn)

安卓目前以1080px設(shè)計(jì)

動(dòng)態(tài)設(shè)置html標(biāo)簽font-size大小

1.假設(shè)設(shè)計(jì)稿是750px

2.假設(shè)把屏幕分為15等份（可以是20/10）

3.每一份作為html字體大小，這里就是50px

4.那們在320px設(shè)備的時(shí)候，字體大小就是320/15=21.33px

5.用頁面元素的大小除以不同的html字體大小會(huì)發(fā)現(xiàn)它們的比例還是相同的

列如：以一個(gè)750為標(biāo)準(zhǔn)的設(shè)計(jì)稿

1.一個(gè)100*100像素的頁面元素在750屏幕下，就是100/50轉(zhuǎn)換為2rem?2rem比例是1：1

2.320屏幕下，html字體大小為21.33，2rem=42.66px，此時(shí)寬高都是42.66.寬高比例還是1：1

3.可以實(shí)現(xiàn)不同屏幕下頁面元素盒子等比例縮放的效果

元素大小取值方法

1.最后的公式：頁面元素的rem值=頁面元素值（px）/（屏幕寬度/劃分的份數(shù)）

2.屏幕寬度/劃分份數(shù)就是html font-size大小

3.頁面元素的rem值=頁面元素值（px）/html font-size字體大小

flexible.js簡潔高效的rem適配方案

手機(jī)淘寶團(tuán)隊(duì)出的簡潔高效移動(dòng)端適配庫

不需要在寫不同屏幕的媒體查詢，里面js做了處理

只需要確定好我們當(dāng)前設(shè)備的html文字大小即可

響應(yīng)式頁面兼容移動(dòng)端

原理：使用媒體查詢針對不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置，從而設(shè)備不同設(shè)備的目的。

設(shè)備劃分	尺寸區(qū)間
超小屏幕（手機(jī)）	<768px
小屏設(shè)備（平板）	>=768px~<992px
中等屏幕（桌面顯示器）	>=992px~<1200px
寬屏設(shè)備（大桌面顯示器）	>=1200px

響應(yīng)式布局容器

1.響應(yīng)式需要一個(gè)父級(jí)做為布局容器，來配合子級(jí)元素來實(shí)現(xiàn)變化效果

2.在不同屏幕下，通過媒體查詢來改變這個(gè)布局容器的大小，再改變里面子元素的排列方式和大小，從而

實(shí)現(xiàn)不同屏幕下，看到不同的頁面和樣式變化。

響應(yīng)式尺寸劃分

1.超小屏幕（手機(jī)，小于768px）：設(shè)置寬度為100%

2.小屏幕（平板，大于等于768px）：設(shè)置寬度為750px

3.中等屏幕（桌面顯示器，大于等于992px）：設(shè)置寬度為970px

4.大屏幕（大桌面顯示器，大于等于1200px）：設(shè)置寬度為1170px

也可以根據(jù)實(shí)際情況自己定義劃分

Bootstrap

目前受歡迎的前端框架。Bootstrap是基于HTML、CSS、JS的，簡潔靈活，方便web開發(fā)

優(yōu)點(diǎn)：

1.標(biāo)準(zhǔn)化的HTML+CSS編碼規(guī)范

2.提供一套簡潔、直觀、強(qiáng)悍的組件

3.有自己的生態(tài)圈，不斷更新迭代

4.讓開發(fā)更簡單，提高了開發(fā)效率

Bootstrap版本

2.x.x:停止維護(hù)，兼容性好，代碼不簡潔，功能不夠完善

3.xx：目前使用最多，穩(wěn)定，但是放棄了IE6-IE7。對IE8支持但是界面效果不好，偏向用于開發(fā)響應(yīng)式布局

移動(dòng)設(shè)備優(yōu)先的web項(xiàng)目

4.xx：最新版，目前還沒有流行

Bootstrap使用

1.創(chuàng)建文件夾結(jié)構(gòu)

2.創(chuàng)建html骨架結(jié)構(gòu)

3.引入相關(guān)樣式文件

4.書寫內(nèi)容

直接拿Bootstrap預(yù)先定義好的樣式來使用

修改Bootstrap原來的樣式，注意權(quán)重問題

關(guān)鍵在于知道它定義了哪些樣式，以及這些樣式能實(shí)現(xiàn)什么效果

布局容器

Bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器，提供了兩個(gè)作此用處的類

1.container類

響應(yīng)式布局的容器固定寬度

大屏（>=1200px）寬度定為1170px

中屏（>=992px）寬度定為970px

小屏（>=768px）寬度定為750px

超小屏（100%）

2.container-fluid類

流式布局容器 100%寬度

占據(jù)全部視口的容器

適用于制作移動(dòng)端頁面開發(fā)

柵格系統(tǒng)（grid systems）

網(wǎng)格系統(tǒng)，將頁面布局劃分為等寬的列，然后通過列數(shù)的定義來模塊化頁面布局

Bootstrap提供了一套響應(yīng)測試、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕/視口尺寸的增加，

系統(tǒng)會(huì)自動(dòng)分為最多12列。

柵格選項(xiàng)參數(shù)

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，內(nèi)容就可以放入這些創(chuàng)建好的布局中。

	超小屏幕（手機(jī)）<768px	小屏設(shè)備（平板）>=768px	中等屏幕（桌面顯示器）>=992px	寬屏設(shè)備（大桌面顯示器）>=1200px
.container最大寬度	自動(dòng)（100%）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數(shù)	12	12	12	12

1.按照不同屏幕劃分為1-12等份

2.行（row）可以去除父容器作用15px的邊距

3.列（column）大于12，多余的列所在的元素將被作為一個(gè)整體另起一行排列

4.每一列默認(rèn)有左右15像素的padding

5.可以同時(shí)為一列指定多個(gè)設(shè)備的類名，以便劃分不同份數(shù)，

列如：class=“col-md-4 col-sm-6”

列嵌套

柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套。一個(gè)列內(nèi)再分成若干份小列。可以通過添加一個(gè)新的.row元素

和一系列.col-sm-*元素到已經(jīng)存在的.col-sm *元素內(nèi)。

列偏移

使用.col-md-offset-* 類可以將列向右側(cè)偏移。這些類實(shí)際是通過使用* 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）

列偏移

使用.col-md-push-* 往右推 .col-md-pull-* 往左拉兩個(gè)類就可以很容易的改變列的順序

響應(yīng)式工具

為了加快對移動(dòng)設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設(shè)備展示

或隱藏頁面內(nèi)容。

類名	超小屏	小屏	中屏	大屏
.hidden-xs	隱藏	可見	可見	可見
.hidden-sm	可見	隱藏	可見	可見
.hidden-md	可見	可見	隱藏	可見
.hidden-lg	可見	可見	可見	隱藏

與之相反的,visible-xs、visible-sm、visible-md、visible-lg是針對不同設(shè)備顯示某個(gè)內(nèi)容

下一章 JavaScript語法、操作符、數(shù)據(jù)類型、流程控制