移動web開發(fā)流式布局 ======================
1.0 移動端基礎(chǔ)
1.1瀏覽器現(xiàn)狀
PC端常見瀏覽器：360瀏覽器认然、谷歌瀏覽器锭环、火狐瀏覽器、QQ瀏覽器廊勃、百度瀏覽器耙蔑、搜狗瀏覽器、IE瀏覽器疟赊。
移動端常見瀏覽器：UC瀏覽器，QQ瀏覽器峡碉，歐朋瀏覽器近哟，百度手機瀏覽器，360安全瀏覽器鲫寄，谷歌瀏覽器吉执，搜狗手機瀏覽器，獵豹瀏覽器地来，以及其他雜牌瀏覽器戳玫。
國內(nèi)的UC和QQ，百度等手機瀏覽器都是根據(jù)Webkit修改過來的內(nèi)核未斑，國內(nèi)尚無自主研發(fā)的內(nèi)核咕宿，就像國內(nèi)的手機操作系統(tǒng)都是基于Android修改開發(fā)的一樣。
總結(jié)：兼容移動端主流瀏覽器蜡秽，處理Webkit內(nèi)核瀏覽器即可府阀。
1.2 手機屏幕的現(xiàn)狀
- 移動端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重芽突。
- Android設(shè)備有多種分辨率：480x800, 480x854, 540x960, 720x1280试浙，1080x1920等，還有傳說中的2K寞蚌，4k屏田巴。
- 近年來iPhone的碎片化也加劇了，其設(shè)備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等挟秤。
- 作為開發(fā)者無需關(guān)注這些分辨率壹哺，因為我們常用的尺寸單位是 px 。
1.3常見移動端屏幕尺寸
1.4移動端調(diào)試方法
- Chrome DevTools（谷歌瀏覽器）的模擬手機調(diào)試
- 搭建本地web服務(wù)器艘刚，手機和服務(wù)器一個局域網(wǎng)內(nèi)斗躏，通過手機訪問服務(wù)器
- 使用外網(wǎng)服務(wù)器，直接IP或域名訪問
2.0 視口
視口（viewport）就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。 視口可以分為布局視口啄糙、視覺視口和理想視口
2.1 布局視口 layout viewport
一般移動設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個布局視口笛臣，用于解決早期的PC端頁面在手機上顯示的問題。
iOS, Android基本都將這個視口分辨率設(shè)置為 980px隧饼，所以PC上的網(wǎng)頁大多都能在手機上呈現(xiàn)沈堡，只不過元素看上去很小，一般默認(rèn)可以通過手動縮放網(wǎng)頁燕雁。
2.2視覺視口 visual viewport
字面意思诞丽，它是用戶正在看到的網(wǎng)站的區(qū)域纲爸。注意：是網(wǎng)站的區(qū)域钞速。
我們可以通過縮放去操作視覺視口，但不會影響布局視口克伊，布局視口仍保持原來的寬度捏浊。
2.3理想視口 ideal viewport
為了使網(wǎng)站在移動端有最理想的瀏覽和閱讀寬度而設(shè)定
理想視口懂衩，對設(shè)備來講，是最理想的視口尺寸
需要手動添寫meta視口標(biāo)簽通知瀏覽器操作
meta視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致金踪，簡單理解就是設(shè)備有多寬浊洞，我們布局的視口就多寬
總結(jié)：我們開發(fā)最終會用理想視口，而理想視口就是將布局視口的寬度修改為視覺視口
2.4meta標(biāo)簽
最標(biāo)準(zhǔn)的viewport設(shè)置
- 視口寬度和設(shè)備保持一致
- 視口的默認(rèn)縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
3.0二倍圖
3.1物理像素&物理像素比
物理像素點指的是屏幕顯示的最小顆粒胡岔，是物理真實存在的法希。這是廠商在出廠時就設(shè)置好了,比如蘋果6 是 750* 1334
我們開發(fā)時候的1px 不是一定等于1個物理像素的
一個px的能顯示的物理像素點的個數(shù)，稱為物理像素比或屏幕像素比
如果把1張100*100的圖片放到手機里面會按照物理像素比給我們縮放
lRetina（視網(wǎng)膜屏幕）是一種顯示技術(shù)靶瘸，可以將把更多的物理像素點壓縮至一塊屏幕里苫亦，從而達(dá)到更高的分辨率，并提高屏幕顯示的細(xì)膩程度怨咪。
對于一張 50px * 50px 的圖片,在手機或 Retina 屏中打開著觉，按照剛才的物理像素比會放大倍數(shù)，這樣會造成圖片模糊
在標(biāo)準(zhǔn)的viewport設(shè)置中惊暴，使用倍圖來提高圖片質(zhì)量饼丘，解決在高清設(shè)備中的模糊問題
通常使用二倍圖， 因為iPhone 6 的影響背景圖片 注意縮放問題
3.2背景縮放background-size
background-size 屬性規(guī)定背景圖像的尺寸
background-size: 背景圖片寬度 背景圖片高度;
單位： 長度|百分比|cover|contain;
cover把背景圖像擴展至足夠大辽话，以使背景圖像完全覆蓋背景區(qū)域肄鸽。
contain把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
4.0 移動開發(fā)選擇和技術(shù)解決方案
4.1移動端主流方案
1.單獨制作移動端頁面（主流）
通常情況下油啤，網(wǎng)址域名前面加 m(mobile)
可以打開移動端典徘。通過判斷設(shè)備，如果是移動設(shè)備打開益咬，則跳到移動端頁面逮诲。
也就是說，PC端和移動端為兩套網(wǎng)站，pc端是pc斷的樣式梅鹦，移動端在寫一套裆甩，專門針對移動端適配的一套網(wǎng)站
2.響應(yīng)式頁面兼容移動端（其次）
響應(yīng)式網(wǎng)站：即pc和移動端共用一套網(wǎng)站，只不過在不同屏幕下齐唆，樣式會自動適配
4.2 移動端技術(shù)解決方案
1.移動端瀏覽器兼容問題
移動端瀏覽器基本以 webkit 內(nèi)核為主嗤栓，因此我們就考慮webkit兼容性問題。
我們可以放心使用 H5 標(biāo)簽和 CSS3 樣式箍邮。
同時我們?yōu)g覽器的私有前綴我們只需要考慮添加 webkit 即可
2.移動端公共樣式
移動端 CSS 初始化推薦使用 normalize.css/
Normalize.css：保護了有價值的默認(rèn)值
Normalize.css：修復(fù)了瀏覽器的bug
Normalize.css：是模塊化的
Normalize.css：擁有詳細(xì)的文檔
官網(wǎng)地址： http://necolas.github.io/normalize.css/
4.3 移動端大量使用 CSS3盒子模型box-sizin
傳統(tǒng)模式寬度計算：盒子的寬度 = CSS中設(shè)置的width + border + padding
CSS3盒子模型： 盒子的寬度= CSS中設(shè)置的寬度width 里面包含了 border 和 padding
也就是說茉帅，我們的CSS3中的盒子模型， padding 和 border 不會撐大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統(tǒng)盒子模型*/
box-sizing: content-box;
移動端可以全部CSS3 盒子模型
PC端如果完全需要兼容锭弊，我們就用傳統(tǒng)模式堪澎，如果不考慮兼容性，我們就選擇 CSS3 盒子模型
4.4移動端特殊樣式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*點擊高亮我們需要清除清除 設(shè)置為transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移動端瀏覽器默認(rèn)的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance: none;
/*禁用長按頁面時的彈出菜單*/
img,a { -webkit-touch-callout: none; }
5.0移動端常見布局
移動端單獨制作
- 流式布局（百分比布局）
- flex 彈性布局（強烈推薦）
- less+rem+媒體查詢布局
- 混合布局
響應(yīng)式
- 媒體查詢
- bootstarp
流式布局：
流式布局味滞，就是百分比布局樱蛤，也稱非固定像素布局。
通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進行伸縮桃犬，不受固定像素的限制，內(nèi)容向兩側(cè)填充行楞。
流式布局方式是移動web開發(fā)使用的比較常見的布局方式攒暇。
移動web開發(fā)——flex布局 ======================
1.0傳統(tǒng)布局和flex布局對比
1.1傳統(tǒng)布局
- 兼容性好
- 布局繁瑣
- 局限性，不能再移動端很好的布局
1.2 flex布局
- 操作方便子房，布局極其簡單形用，移動端使用比較廣泛
- pc端瀏覽器支持情況比較差
- IE11或更低版本不支持flex或僅支持部分
1.3 建議
- 如果是pc端頁面布局，還是采用傳統(tǒng)方式
- 如果是移動端或者是不考慮兼容的pc則采用flex
2.0 flex布局原理
- flex 是 flexible Box 的縮寫证杭，意為"彈性布局"田度，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局解愤。
- 當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后镇饺，子元素的 float、clear 和 vertical-align 屬性將失效送讲。
- flex布局又叫伸縮布局 奸笤、彈性布局 、伸縮盒布局 哼鬓、彈性盒布局
- 采用 Flex 布局的元素监右，稱為 Flex 容器（flex container），簡稱"容器"异希。它的所有子元素自動成為容器成員健盒，稱為 Flex 項目（flex item），簡稱"項目"。
總結(jié)：就是通過給父盒子添加flex屬性扣癣，來控制子盒子的位置和排列方式
3.0 父項常見屬性
- flex-direction：設(shè)置主軸的方向
- justify-content：設(shè)置主軸上的子元素排列方式
- flex-wrap：設(shè)置子元素是否換行
- align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
- align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
- flex-flow：復(fù)合屬性惰帽，相當(dāng)于同時設(shè)置了 flex-direction 和 flex-wrap
3.1 flex-direction設(shè)置主軸的方向
在 flex 布局中，是分為主軸和側(cè)軸兩個方向搏色，同樣的叫法有 ： 行和列善茎、x 軸和y 軸
默認(rèn)主軸方向就是 x 軸方向，水平向右
默認(rèn)側(cè)軸方向就是 y 軸方向频轿，水平向下
-
注意： 主軸和側(cè)軸是會變化的垂涯，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸航邢。而我們的子元素是跟著主軸來排列的
2-1.JPG
3.2 justify-content 設(shè)置主軸上的子元素排列方式
3.3 flex-wrap設(shè)置是否換行
- 默認(rèn)情況下耕赘，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義膳殷，flex布局中默認(rèn)是不換行的操骡。
- nowrap 不換行
- wrap 換行
3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）
- 該屬性是控制子項在側(cè)軸（默認(rèn)是y軸）上的排列方式 在子項為單項（單行）的時候使用
- flex-start 從頭部開始
- flex-end 從尾部開始
- center 居中顯示
- stretch 拉伸
3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）
設(shè)置子項在側(cè)軸上的排列方式 并且只能用于子項出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的赚窃。
3.6 align-content 和align-items區(qū)別
- align-items 適用于單行情況下册招， 只有上對齊、下對齊勒极、居中和 拉伸
- align-content適應(yīng)于換行（多行）的情況下（單行情況下無效）是掰， 可以設(shè)置 上對齊、下對齊辱匿、居中键痛、拉伸以及平均分配剩余空間等屬性值。
- 總結(jié)就是單行找align-items 多行找 align-content
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性
flex-flow:row wrap;
4.0 flex布局子項常見屬性
- flex子項目占的份數(shù)
- align-self控制子項自己在側(cè)軸的排列方式
- order屬性定義子項的排列順序（前后順序）
4.1 flex 屬性
flex 屬性定義子項目分配剩余空間匾七，用flex來表示占多少份數(shù)絮短。
.item {
flex: <number>; /* 默認(rèn)值 0 */
}
4.2 align-self控制子項自己在側(cè)軸上的排列方式
align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性昨忆。
默認(rèn)值為 auto丁频，表示繼承父元素的 align-items 屬性，如果沒有父元素邑贴，則等同于 stretch限府。
span:nth-child(2) {
/* 設(shè)置自己在側(cè)軸上的排列方式 */
align-self: flex-end;
}
4.3 order 屬性定義項目的排列順序
數(shù)值越小，排列越靠前痢缎，默認(rèn)為0胁勺。
注意：和 z-index 不一樣。
.item {
order: <number>;
}
移動web開發(fā)之rem布局 ===================
rem基礎(chǔ)
rem單位
rem (root em)是一個相對單位独旷，類似于em署穗，em是父元素字體大小寥裂。
不同的是rem的基準(zhǔn)是相對于html元素的字體大小。
比如案疲，根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem; 則換成px表示就是24px封恰。
/* 根html 為 12px */
html {
font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */
div {
font-size: 2rem;
}
rem的優(yōu)勢：父元素文字大小可能不一致， 但是整個頁面只有一個html褐啡，可以很好來控制整個頁面的元素大小诺舔。
媒體查詢
什么是媒體查詢
媒體查詢（Media Query）是CSS3新語法。
- 使用 @media查詢备畦，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的屏幕尺寸設(shè)置不同的樣式
- 當(dāng)你重置瀏覽器大小的過程中低飒，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機、Android手機懂盐，平板等設(shè)備都用得到多媒體查詢
媒體查詢語法規(guī)范
- 用 @media開頭 注意@符號
- mediatype 媒體類型
- 關(guān)鍵字 and not only
- media feature 媒體特性必須有小括號包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
-
mediatype 查詢類型
將不同的終端設(shè)備劃分成不同的類型褥赊，稱為媒體類型
1.jpg 關(guān)鍵字
關(guān)鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。
- and：可以將多個媒體特性連接到一起莉恼，相當(dāng)于“且”的意思拌喉。
- not：排除某個媒體類型，相當(dāng)于“非”的意思俐银，可以省略尿背。
- only：指定某個特定的媒體類型，可以省略捶惜。
-
媒體特性
每種媒體類型都具體各自不同的特性田藐，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格。我們暫且了解三個售躁。
注意他們要加小括號包含
2.jpg
<link rel="stylesheet" href="sod.css" media="screen and (max-width: 800px)">
-
媒體查詢書寫規(guī)則
注意： 為了防止混亂坞淮，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫茴晋，這樣代碼更簡潔
3 (1).png
less 基礎(chǔ)
維護css弊端
CSS 是一門非程序式語言陪捷，沒有變量、函數(shù)诺擅、SCOPE（作用域）等概念市袖。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的烁涌。
- 不方便維護及擴展苍碟，不利于復(fù)用。
- CSS 沒有很好的計算能力
- 非前端開發(fā)工程師來講撮执，往往會因為缺少 CSS 編寫經(jīng)驗而很難寫出組織良好且易于維護的 CSS 代碼項目微峰。
Less 介紹
Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成為CSS預(yù)處理器抒钱。
做為 CSS的一種形式的擴展蜓肆，它并沒有減少CSS的功能颜凯，而是在現(xiàn)有的CSS語法上，為CSS加入程序式語言的特性仗扬。
它在CSS 的語法基礎(chǔ)之上症概，引入了變量，Mixin（混入）早芭，運算以及函數(shù)等功能彼城，大大簡化了 CSS 的編寫，并且降低了 CSS的維護成本退个，就像它的名稱所說的那樣募壕，Less可以讓我們用更少的代碼做更多的事情。
Less中文網(wǎng)址：http://lesscss.cn/
常見的CSS預(yù)處理器：Sass帜乞、Less司抱、Stylus
一句話：Less是一門 CSS 預(yù)處理語言，它擴展了CSS的動態(tài)特性黎烈。
Less安裝
①安裝nodejs习柠，可選擇版本(8.0)，網(wǎng)址：http://nodejs.cn/download/
②檢查是否安裝成功照棋，使用cmd命令（win10是window+r 打開運行輸入cmd） ---輸入“node –v”查看版本即可
③基于nodejs在線安裝Less资溃，使用cmd命令“npm install -g less”即可
④檢查是否安裝成功，使用cmd命令“ lessc -v ”查看版本即可
Less 使用之變量
變量是指沒有固定的值烈炭，可以改變的溶锭。因為我們CSS中的一些顏色和數(shù)值等經(jīng)常使用。
@變量名:值;
- 必須有@為前綴
- 不能包含特殊字符
- 不能以數(shù)字開頭
- 大小寫敏感
@color: pink;
Less 編譯 vocode Less 插件
Easy LESS 插件用來把less文件編譯為css文件
安裝完畢插件符隙，重新加載下 vscode趴捅。
只要保存一下Less文件，會自動生成CSS文件霹疫。
Less 嵌套
// 將css改為less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
如果遇見 （交集|偽類|偽元素選擇器） 拱绑，利用&進行連接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
Less 運算
任何數(shù)字、顏色或者變量都可以參與運算丽蝎。就是Less提供了加（+）猎拨、減（-）、乘（*）屠阻、除（/）算術(shù)運算红省。
/*Less 里面寫*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至還可以這樣 */
width: (@width + 5) * 2;
- 乘號（*）和除號（/）的寫法
- 運算符中間左右有個空格隔開 1px + 5
- 對于兩個不同的單位的值之間的運算，運算結(jié)果的值取第一個值的單位
- 如果兩個值之間只有一個值有單位国觉，則運算結(jié)果就取該單位
rem適配方案
1.讓一些不能等比自適應(yīng)的元素吧恃，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時候，等比例適配當(dāng)前設(shè)備麻诀。
2.使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小痕寓，然后頁面元素使用rem做尺寸單位缸逃，當(dāng)html字體大小變化元素尺寸也會發(fā)生變化，從而達(dá)到等比縮放的適配厂抽。
技術(shù)方案：
1.less+rem+媒體查詢
2.lflexible.js+rem
總結(jié)：
兩種方案現(xiàn)在都存在需频。
方案2 更簡單，現(xiàn)階段大家無需了解里面的js代碼筷凤。
rem實際開發(fā)適配方案1
①假設(shè)設(shè)計稿是750px
②假設(shè)我們把整個屏幕劃分為15等份（劃分標(biāo)準(zhǔn)不一可以是20份也可以是10等份）
③每一份作為html字體大小昭殉，這里就是50px
④那么在320px設(shè)備的時候，字體大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字體大小會發(fā)現(xiàn)他們比例還是相同的
⑥比如我們以750為標(biāo)準(zhǔn)設(shè)計稿
⑦一個100100像素的頁面元素在 750屏幕下藐守， 就是 100/ 50 轉(zhuǎn)換為rem 是 2rem2rem 比例是1比1
⑧320屏幕下挪丢， html字體大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經(jīng)能實現(xiàn)不同屏幕下 頁面元素盒子等比例縮放的效果
總結(jié)：
①最后的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數(shù)）
②屏幕寬度/劃分的份數(shù)就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小
rem 適配方案2
手機淘寶團隊出的簡潔高效 移動端適配庫
我們再也不需要在寫不同屏幕的媒體查詢，因為里面js做了處理
它的原理是把當(dāng)前設(shè)備劃分為10等份卢厂，但是不同設(shè)備下乾蓬，比例還是一致的。
我們要做的慎恒，就是確定好我們當(dāng)前設(shè)備的html 文字大小就可以了
比如當(dāng)前設(shè)計稿是 750px任内， 那么我們只需要把 html 文字大小設(shè)置為 75px(750px / 10) 就可以
里面頁面元素rem值： 頁面元素的px 值 / 75
剩余的，讓flexible.js來去算
github地址：https://github.com/amfe/lib-flexible
總結(jié)：
因為flexible是默認(rèn)將屏幕分為10等分
但是當(dāng)屏幕大于750的時候希望不要再去重置html字體了
所以要自己通過媒體查詢設(shè)置一下
并且要把權(quán)重提到最高
VSCode px 轉(zhuǎn)換rem 插件 cssrem
因為cssrem中css自動轉(zhuǎn)化為rem是參照默認(rèn)插件的16轉(zhuǎn)換的所以需要自己配置
移動端WEB開發(fā)之響應(yīng)式布局 ===================
1.0 響應(yīng)式開發(fā)原理
1.1 響應(yīng)式開發(fā)原理
就是使用媒體查詢針對不同寬度的設(shè)備進行布局和樣式的設(shè)置融柬，從而適配不同設(shè)備的目的死嗦。
設(shè)備的劃分情況：
- 小于768的為超小屏幕（手機）
- 768~992之間的為小屏設(shè)備（平板）
- 992~1200的中等屏幕（桌面顯示器）
- 大于1200的寬屏設(shè)備（大桌面顯示器）
1.2 響應(yīng)式布局容器
響應(yīng)式需要一個父級做為布局容器，來配合子級元素來實現(xiàn)變化效果粒氧。
原理就是在不同屏幕下越除，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小外盯，從而實現(xiàn)不同屏幕下摘盆，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
- 超小屏幕（手機饱苟，小于 768px）：設(shè)置寬度為 100%
- 小屏幕（平板孩擂，大于等于 768px）：設(shè)置寬度為 750px
- 中等屏幕（桌面顯示器，大于等于 992px）：寬度設(shè)置為 970px
- 大屏幕（大桌面顯示器掷空，大于等于 1200px）：寬度設(shè)置為 1170px
但是我們也可以根據(jù)實際情況自己定義劃分
2.0 bootstrap的介紹
2.1Bootstrap簡介
Bootstrap 來自 Twitter（推特）肋殴，是目前最受歡迎的前端框架囤锉。Bootstrap 是基于HTML坦弟、CSS 和 JAVASCRIPT 的，它簡潔靈活官地，使得 Web 開發(fā)更加快捷酿傍。
框架：顧名思義就是一套架構(gòu)，它有一套比較完整的網(wǎng)頁功能解決方案驱入，而且控制權(quán)在框架本身赤炒，有預(yù)制樣式庫氯析、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進行開發(fā)莺褒。
2.2 bootstrap優(yōu)點
- 標(biāo)準(zhǔn)化的html+css編碼規(guī)范
- 提供了一套簡潔掩缓、直觀、強悍的組件
- 有自己的生態(tài)圈遵岩，不斷的更新迭代
- 讓開發(fā)更簡單你辣，提高了開發(fā)的效率
2.3 版本簡介
2.x.x：停止維護,兼容性好,代碼不夠簡潔，功能不夠完善尘执。
3.x.x：目前使用最多,穩(wěn)定,但是放棄了IE6-IE7舍哄。對 IE8 支持但是界面效果不好,偏向用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的WEB 項目誊锭。
4.x.x：最新版表悬，目前還不是很流行
2.4bootstrap基本使用
在現(xiàn)階段我們還沒有接觸JS相關(guān)課程，所以我們只考慮使用它的樣式庫丧靡。
Bootstrap 使用四步曲：
- 創(chuàng)建文件夾結(jié)構(gòu)
-
創(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個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">
-
書寫內(nèi)容
直接拿Bootstrap 預(yù)先定義好的樣式來使用
修改Bootstrap 原來的樣式，注意權(quán)重問題
學(xué)好Bootstrap 的關(guān)鍵在于知道它定義了哪些樣式罐盔，以及這些樣式能實現(xiàn)什么樣的效果
2.5 bootstrap布局容器
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .container 或者.container-fluid 容器但绕，它提供了兩個作此用處的類。
.container
- 響應(yīng)式布局的容器 固定寬度
- 大屏 ( >=1200px) 寬度定為 1170px
- 中屏 ( >=992px) 寬度定為 970px
- 小屏 ( >=768px) 寬度定為 750px
- 超小屏 (100%)
.container-fluid
- 流式布局容器 百分百寬度
- 占據(jù)全部視口（viewport）的容器惶看。
2.6 bootstrap柵格系統(tǒng)
Bootstrap提供了一套響應(yīng)式捏顺、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加纬黎，系統(tǒng)會自動分為最多12列幅骄。
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中本今。
- 按照不同屏幕劃分為1~12 等份
- 行（row） 可以去除父容器作用15px的邊距
- xs-extra small：超胁鹱； sm-small：泄谙ⅰ挪凑； md-medium：中等； lg-large：大逛艰；
- 列（column）大于 12躏碳，多余的“列（column）”所在的元素將被作為一個整體另起一行排列
- 每一列默認(rèn)有左右15像素的 padding
- 可以同時為一列指定多個設(shè)備的類名，以便劃分不同份數(shù) 例如 class="col-md-4 col-sm-6"
柵格嵌套
柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套散怖。簡單理解就是一個列內(nèi)再分成若干份小列菇绵。我們可以通過添加一個新的 .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-* 類可以將列向右側(cè)偏移。這些類實際是通過使用 * 選擇器為當(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>
列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（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)式工具
為了加快對移動設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能永乌，并使用這些工具類可以方便的針對不同設(shè)備展示或隱藏頁面內(nèi)容钝的。
.hidden- .visible-
