BootStrap基礎

BootStrap概述

什麼是BootStrap

BootStrap，基於HTML、CSS、JavaScript的前端框架（半成品）。其預定義一套CSS樣式和與樣式對應的jQuery代碼，我們只需要提供固定HTML結構，添加固定的class樣式，就可以完成指定效果的實現。

BootStrap在jQuery的基礎工作，可以理解BootStrap就是jQuery的一個插件。

BootStrap使得web開發更加快捷，代碼優雅，美觀大方。

由Twitter公司的設計師Mark Otto和Jacob Thornton合作開發。

BootStrap基礎入門使用的都是自帶CSS樣式，高級開發中需要使用HTML5，CSS3，動態CSS語言Less進行自定義開發。

國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於BootStrap源碼進行性能優化而來。

中文官網：

http://www.bootcss.com/

什麼是響應式布局

響應式布局：一個網站能夠兼容多個終端（手機、iPad等），而不需要為每個終端做一個特定的版本。此概念是為解決移動互聯網瀏覽而誕生的。

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

BootStrap就是響應式布局最為成功的實現，為了兼容不同的瀏覽器採用jQuery，為了適配不同的終端採用CSS3 Media Query(媒體查詢)

環境搭建

下載

中文官網地址：

http://d.bootcss.com/bootstrap-3.3.5.zip

GIT地址：

https://github.com/twbs/bootstrap/archive/v3.3.6.zip

目錄結構

目錄結構.png

內容結構

發布版，及開始使用到的BootStrap內容結構。

內容結構.PNG

上面展示的就是Bootstrap的基本文件結構：預編譯文件可以直接使用到任何web項目中。

我們提供了編譯好的CSS和JS(bootstrap.) 文件，還有經過壓縮的CSS和JS(bootstrap.min.)文件。

同時還提供了CSS源碼映射表(bootstrap.*.map)，可以在某些瀏覽器的開發工具中使用。

同時還包含了來自Glyphicons的圖標字體，在附帶的Bootstrap主題中使用到了這些圖標。

模版代碼

基本模版

完整模版

viewport介紹

Viewport的概念

通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，再具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域。

但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。

在默認情況下，一般來講，移動設備上的viewport都是要大於瀏覽器可視區域的，這是因為考慮到移動設備的解析度相對於桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由 設備自己決定的）。

但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。

瀏覽器.png

css中的1px並不等於設備的1px

在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。

但實際情況卻並非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。

在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。

在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的解析度為320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。

後來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，解析度提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。

其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓設備上的一個css像素相當於多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。

還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。

利用meta標籤對viewport進行控制

我們在開發移動設備的網站時，最常見的一個動作就是把下面這個東西複製到我們的head標籤中：

該meta標籤的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。也不允許用戶縮放不同的網站有不同的要求，但讓viewport的寬度等於設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

meta viewport標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。

後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。

在蘋果的規範中，meta viewport有6個屬性(暫且把content中的那些東西稱為一個個屬性和值)，如下：

meta標籤.PNG

這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。

總結

第一，必須設置meta viewport標籤

如果不設置meta viewport標籤，那麼移動設備上瀏覽器默認的寬度值為800px，980px，1024px等這些，總之是大於屏幕寬度的。

這裡的寬度所用的單位px都是指css中的px，它跟代表實際屏幕物理像素的px不是一回事。

第二，設置瀏覽器視口寬度為設備理想寬度

瀏覽器的寬度設置為設備的理想寬度：

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！