BootStrap基礎(chǔ)入門
一嘴纺、BootStrap概述
1.1什么是BootStrap
- BootStrap冗荸，基于HTML、CSS愈涩、JavaScript的前端框架（半成品）。其預(yù)定義一套CSS樣式和與樣式對應(yīng)的jQuery代碼加矛，我們只需要提供固定HTML結(jié)構(gòu)履婉，添加固定的class樣式，就可以完成指定效果的實現(xiàn)
- BootStrap在jQuery的基礎(chǔ)工作斟览，可以理解BootStrap就是jQuery的一個插件毁腿。
- BootStrap使得web開發(fā)更加快捷，代碼優(yōu)雅苛茂，美觀大方已烤。
- 由Twitter公司的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)。
- BootStrap基礎(chǔ)入門使用的都是自帶CSS樣式妓羊，高級開發(fā)中需要使用HTML5胯究，CSS3，動態(tài)CSS語言Less進(jìn)行自定義開發(fā)躁绸。
- 國內(nèi)一些移動開發(fā)者較為熟悉的框架裕循，如WeX5前端開源框架等，也是基于BootStrap源碼進(jìn)行性能優(yōu)化而來
- 中文官網(wǎng)：http://www.bootcss.com/
1.2什么是響應(yīng)式布局
- 響應(yīng)式布局：一個網(wǎng)站能夠兼容多個終端（手機(jī)净刮、iPad等）剥哑，而不需要為每個終端做一個特定的版本。此概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的淹父。
- 響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗株婴，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過暑认。隨著越來越多的設(shè)計師采用這個技術(shù)困介，我們不僅看到很多的創(chuàng)新揪垄，還看到了一些成形的模式。
- BootStrap就是響應(yīng)式布局最為成功的實現(xiàn)逻翁，為了兼容不同的瀏覽器采用jQuery，為了適配不同的終端采用CSS3 Media Query(媒體查詢)
二捡鱼、環(huán)境搭建
2.1下載
- 中文官網(wǎng)地址：http://d.bootcss.com/bootstrap-3.3.5.zip
- GIT地址：https://github.com/twbs/bootstrap/archive/v3.3.6.zip
2.2目錄結(jié)構(gòu)
2.3內(nèi)容結(jié)構(gòu)
發(fā)布版八回，及開始使用到的BootStrap內(nèi)容結(jié)構(gòu)
bootstrap/
├── css/
│ ├── bootstrap.css //預(yù)定義的CSS文件
│ ├── bootstrap.css.map //CSS與less源碼對應(yīng)文件
│ ├── bootstrap.min.css //壓縮
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map 主題文件
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js //js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot //字體（字體圖標(biāo)）
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
上面展示的就是 Bootstrap 的基本文件結(jié)構(gòu)：預(yù)編譯文件可以直接使用到任何 web 項目中。我們提供了編譯好的 CSS 和 JS (bootstrap.) 文件驾诈，還有經(jīng)過壓縮的 CSS 和 JS (bootstrap.min.) 文件缠诅。同時還提供了 CSS 源碼映射表 (bootstrap.*.map) ，可以在某些瀏覽器的開發(fā)工具中使用乍迄。同時還包含了來自 Glyphicons 的圖標(biāo)字體管引，在附帶的 Bootstrap 主題中使用到了這些圖標(biāo)。
三闯两、模版代碼
3.1基本模版
<!DOCTYPE html> <!--HTML5約束（固定值）-->
<html lang="zh-CN"> <!--建議編寫褥伴，聲明語言，暫沒有發(fā)現(xiàn)用途 -->
<head>
<!--響應(yīng)式開發(fā)必須使用漾狼，且必須在<head>前三行 -->
<meta charset="utf-8">
<!--聲明文檔兼容模式重慢，表示使用IE瀏覽器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--設(shè)置視口的寬度(值為設(shè)備的理想寬度)，頁面初始縮放值<理想寬度/可見寬度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標(biāo)簽*必須*放在最前面逊躁，任何其他內(nèi)容都*必須*跟隨其后似踱！ -->
<title>Bootstrap基本模板</title>
<!-- 引入Bootstrap核心樣式文件 -->
<!--預(yù)定義的CSS樣式-->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界稽煤！</h1>
<!-- 引入jQuery核心js文件 -->
<!--基于jQuery-->
<script src="../../js/jquery-1.11.0.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<!--BootStrap類庫-->
<script src="../../js/bootstrap.min.js"></script>
</body>
</html>
3.2完整模版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--聲明文檔兼容模式核芽，表示使用IE瀏覽器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--設(shè)置視口的寬度(值為設(shè)備的理想寬度)，頁面初始縮放值<理想寬度/可見寬度>-->
<!--視口的作用：在移動瀏覽器中酵熙，當(dāng)頁面寬度超出設(shè)備轧简，瀏覽器內(nèi)部虛擬的一個頁面容器，會將頁面縮放到設(shè)備這么大來展示-->
<!--width 設(shè)置layout viewport 的寬度绿店，為一個正整數(shù)吉懊，或字符串"width-device"(表示采用設(shè)備的寬度)
initial-scale 設(shè)置頁面的初始縮放值，為一個數(shù)字假勿，可以帶小數(shù)
minimum-scale 允許用戶的最小縮放值借嗽，為一個數(shù)字，可以帶小數(shù)
maximum-scale 允許用戶的最大縮放值转培，為一個數(shù)字恶导，可以帶小數(shù)
height 設(shè)置layout viewport 的高度，這個屬性對我們并不重要浸须，很少使用
user-scalable 是否允許用戶進(jìn)行縮放惨寿，值為"no"或"yes", no 代表不允許邦泄，yes代表允許
如果設(shè)置"user-scalable=no",那么"minimum-scale"和"maximum-scale"無效
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后裂垦！ -->
<title>Bootstrap完整模板</title>
<!-- 引入Bootstrap核心樣式文件 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于讓 IE8 支持 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 文件顺囊，則該文件無法起效果，必須放置到web服務(wù)器中蕉拢，暫時不必掌握 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--正文從此處開始-->
<h1>你好特碳，世界！</h1>
<!--前端開發(fā)建議：網(wǎng)站優(yōu)化時晕换，除了立即需要工作的js存放在head外午乓，將大部分JS文件放在頁面的末尾-->
<!-- 引入jQuery核心js文件，必須放置在bootStrap.js前面闸准！ -->
<script src="../../js/jquery-1.11.0.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="../../js/bootstrap.min.js"></script>
</body>
</html>
四益愈、viewport介紹
4.1Viewport的概念
通俗的講，移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域夷家，在具體一點蒸其，就是瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小库快，它可能比瀏覽器的可視區(qū)域要大枣接，也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下缺谴，一般 來講但惶，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設(shè)備的分辨率相對于桌面電腦來說都比較小湿蛔，所以為了能在移動設(shè)備上正 常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計的網(wǎng)站膀曾，移動設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個是由 設(shè)備自己決定的）阳啥，但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條添谊，因為瀏覽器可視區(qū)域的寬度是比這個默認(rèn)的viewport的寬度要小的。下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度察迟。
4.2css中的1px并不等于設(shè)備的1px
在css中我們一般使用px作為單位斩狱，在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺扎瓶，那就是css 中的像素就是設(shè)備的物理像素所踊。但實際情況卻并非如此，css中的像素只是一個抽象的單位概荷，在不同的設(shè)備或不同的環(huán)境中秕岛，css中的1px所代表的設(shè)備物理 像素是不同的。在為桌面瀏覽器設(shè)計的網(wǎng)頁中，我們無需對這個津津計較继薛，但在移動設(shè)備上修壕，必須弄明白這點。在早先的移動設(shè)備中遏考，屏幕像素密度都比較低慈鸠，如 iphone3，它的分辨率為320x480灌具，在iphone3上林束，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術(shù)的發(fā)展稽亏，移動設(shè)備的屏幕像 素密度越來越高，從iphone4開始缕题，蘋果公司便推出了所謂的Retina屏截歉，分辨率提高了一倍，變成640x960烟零，但屏幕尺寸卻沒變化瘪松，這就意味著 同樣大小的屏幕上，像素卻多了一倍锨阿，這時宵睦，一個css像素是等于兩個物理像素的。其他品牌的移動設(shè)備也是這個道理墅诡。例如安卓設(shè)備根據(jù)屏幕像素密度可分為 ldpi壳嚎、mdpi、hdpi末早、xhdpi等不同的等級烟馅，分辨率也是五花八門，安卓設(shè)備上的一個css像素相當(dāng)于多少個屏幕物理像素然磷，也因設(shè)備的不同而不 同郑趁，沒有一個定論。
還有一個因素也會引起css中px的變化姿搜，那就是用戶縮放寡润。例如，當(dāng)用戶把頁面放大一倍舅柜，那么css中1px所代表的物理像素也會增加一倍梭纹；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍致份。
4.3利用meta標(biāo)簽對viewport進(jìn)行控制
我們在開發(fā)移動設(shè)備的網(wǎng)站時栗柒，最常見的的一個動作就是把下面這個東西復(fù)制到我們的head標(biāo)簽中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時不允許用戶手動縮放。也不允許用戶縮放不同的網(wǎng)站有不同的要求瞬沦，但讓 viewport的寬度等于設(shè)備的寬度太伊，這個應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話逛钻，那就會使用那個比屏幕寬的默認(rèn)viewport僚焦，也就是說會出現(xiàn)橫向滾動條。
meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的曙痘，目的就是解決移動設(shè)備的viewport問題芳悲。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持边坤，事實也證明這個東西還是非常有用的名扛。
在蘋果的規(guī)范中，meta viewport 有6個屬性(暫且把content中的那些東西稱為一個個屬性和值)茧痒，如下：
這些屬性可以同時使用肮韧，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了旺订。
4.4總結(jié)
-
第一弄企，必須設(shè)置 meta viewport 標(biāo)簽
如果不設(shè)置meta viewport標(biāo)簽，那么移動設(shè)備上瀏覽器默認(rèn)的寬度值為800px区拳，980px拘领，1024px等這些，總之是大于屏幕寬度的樱调。這里的寬度所用的單位px都是指css中的px约素，它跟代表實際屏幕物理像素的px不是一回事。
第二笆凌、設(shè)置瀏覽器視口寬度為設(shè)備理想寬度
每個移動設(shè)備瀏覽器中都有一個理想的寬度业汰，這個理想的寬度是指css中的寬度，跟設(shè)備的物理寬度沒有關(guān)系菩颖，在css中样漆，這個寬度就相當(dāng)于100%的 所代表的那個寬度。我們可以用meta標(biāo)簽把viewport的寬度設(shè)為那個理想的寬度晦闰，如果不知道這個設(shè)備的理想寬度是多少放祟，那么用devicewidth這個特殊值就行了
瀏覽器的寬度設(shè)置為設(shè)備的理想寬度:
<meta name="viewport" content="width=device-width,initial-scale=1">