Bootstrap開發漂亮的前端界面之實作原理

引：Bootstrap采用的是一個“響應式”設計。響應式Web 設計是一個讓使用者通過各種尺寸的裝置浏覽網站獲得良好的視覺效果的方法。例如，您先在計算機顯示器上浏覽一個網站，然後再智能手機上浏覽，智能手機的螢幕 尺寸遠小于計算機顯示器，但是你卻沒有感覺到任何差别，兩者的使用者體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好(響應式:簡單可以了解為不同的 裝置螢幕的大小是不同的，但是頁面中的内容是固定的，為了讓使用者在不同大小螢幕看到的内容更加友好，頁面的内容或排版需要更随螢幕的變化而變化)。

一個簡單的列子：問題分析，我們需要做一個網站，而且需要讓網頁中的内容居中顯示（90%的網站都是如此）。

1440*900分辨率效果如下：

通過firebug工具檢視到container的内容寬度為1150,内邊距為15（左邊、右邊）*2,所占總寬度為1150+15*2=1180px。

接下來，請嘗試拖動浏覽器讓浏覽器的寬度變小，注意當浏覽器的寬度小于1200px的時候你會發現container的寬度變為了970(内容寬度940+内邊距為15（左邊、右邊）*2)

通過浏覽器寬度修改而導緻container的寬度變化的這個細節，我們可以看出bootstrap内部感覺的了這個小細節，并且做出了一定的響應。那麼Bootstrap到底使用了什麼高端的技術來實作這個功能的。

CSS3 Media Queries（媒體（裝置）查詢）

Media Queries含義：為不同的媒體類型添加某些條件，檢測裝置并采用不同的樣式表。

簡單例子：

圖為普通螢幕和列印分别定義樣式

普通頁面顯示内容為：

列印預覽頁面顯示内容為 (firefox列印預覽顯示：檔案--->列印預覽)

通過以上的一個簡單的例子你已經知道Media Queries（媒體查詢）到底能幹什麼了，頁面内容在不同的媒體環境運作時，會自動查詢應用我們編寫的特定樣式。

Bootstrap中也是使用了Media Queries（媒體查詢）來實作了響應式布局 ，bootstrap.css中定義如下代碼:

以上代碼實作了随浏覽器寬度的變化container容器的寬度也進行變化。

@media部分代表任何媒體 

(min-width: 1200px)部分代表條件,min-width指媒體（浏覽器）寬度不小于（大于）1200條件成立。 比如：浏覽器的寬度為1250，條件成立使用該樣式。浏覽器的寬度為1119，條件不成立。

bootstrap.css中很多地方都使用了@media（media queries媒體查詢），比如工具條、栅格（網格）系統。建議各位讀者打開bootstrap.css檔案，搜尋“@media”，對這些樣式進行分 析，這對學習bootstrap非常有幫助。

關注作者：