趙建保

摘要：適應(yīng)移動(dòng)互聯(lián)網(wǎng)Web設(shè)計(jì)需求，從Web設(shè)計(jì)實(shí)踐出發(fā)，解析了響應(yīng)式Web設(shè)計(jì)的媒體查詢(xún)、流動(dòng)布局和彈性視覺(jué)媒體三大關(guān)鍵技術(shù)，提出了響應(yīng)式Web設(shè)計(jì)流程，為實(shí)現(xiàn)“一源多屏”Web設(shè)計(jì)提供了解決方案，為移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)和重構(gòu)提供了技術(shù)框架和路徑。

關(guān)鍵詞：響應(yīng)式；CSS3；Web設(shè)計(jì)

中圖分類(lèi)號(hào)：TP3 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）05-1066-03

Responsive Web Design Key Technology and Design Process

ZHAO Jian-bao

（Department of Computer Science，Guangdong AIB Polytechnic College，Guangzhou 510507，China）

Abstract： Web design needs to adapt to the mobile Internet， from Web design practice， parsing the responsive Web design media queries， fluid layouts and visual media elasticity three key technologies ，proposed responsive web design process to achieve "a source multi-screen" web design solutions ， provided the technical framework and path for the mobile Internet design and Reconstruction.

Key words： Responsive web design； CSS3； Web design

根據(jù)CNNIC第32次互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r調(diào)查結(jié)果，截至2013年6月，中國(guó)手機(jī)網(wǎng)民的總規(guī)模達(dá)4.64億。其中，手機(jī)瀏覽器用戶(hù)規(guī)模為3. 69億，同比增長(zhǎng)21. 0%，在手機(jī)網(wǎng)民中的滲透率為79. 5%[1]，手機(jī)網(wǎng)民正在以前所未有的速度增長(zhǎng)。與此同時(shí)，上網(wǎng)設(shè)備已經(jīng)不僅僅是手機(jī)、平板電腦、PC，小到眼鏡、手表，大到電視、冰箱都可以上網(wǎng)，上網(wǎng)設(shè)備顯示屏物理尺寸不同，輸入模式不同，操作系統(tǒng)不同，瀏覽器內(nèi)核及版本不同，導(dǎo)致不一致的窗口寬度、屏幕分辨率、用戶(hù)參數(shù)和用戶(hù)字體，上網(wǎng)設(shè)備碎片化趨勢(shì)明顯[2][3]。目前，Web設(shè)計(jì)中普遍使用固定寬度（如960像素）為所有終端用戶(hù)提供一致的用戶(hù)界面，在顯示屏分辨率趨于一致時(shí)顯示很好，但在大尺寸高分辨率顯示器上會(huì)顯示高達(dá)50%空白區(qū)域，而在移動(dòng)終端上頁(yè)面大小不能匹配終端屏幕大小，頁(yè)面布局不能自適應(yīng)調(diào)整，無(wú)法按100%比例顯示頁(yè)面寬度，出現(xiàn)水平滾動(dòng)條，尋求標(biāo)準(zhǔn)分辨率越來(lái)越困難[4][5]。理想情況下，Web設(shè)計(jì)應(yīng)該根據(jù)用戶(hù)顯示屏分辨率定制多個(gè)版本，以提供最佳用戶(hù)瀏覽體驗(yàn)，但會(huì)導(dǎo)致網(wǎng)站建設(shè)與維護(hù)工作量成倍增長(zhǎng)，建設(shè)周期明顯延長(zhǎng)，建設(shè)費(fèi)用成倍增加[6]。在此背景下，Web設(shè)計(jì)師應(yīng)順勢(shì)而為，勇于面對(duì)上網(wǎng)設(shè)備的多樣性，放棄在不同平臺(tái)的不同瀏覽器上網(wǎng)頁(yè)效果完全一致性的追求，設(shè)計(jì)能自適應(yīng)用戶(hù)終端設(shè)備的網(wǎng)站。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Response Web Design），整合媒體查詢(xún)、彈性視覺(jué)媒體和流動(dòng)布局，有助于解決不同上網(wǎng)設(shè)備的適配性問(wèn)題，使網(wǎng)站兼容多種設(shè)備和屏幕，實(shí)現(xiàn)“一源多屏”。

1 關(guān)鍵技術(shù)

響應(yīng)式設(shè)計(jì)整合了媒體查詢(xún)、彈性視覺(jué)媒體和流動(dòng)布局[7]，媒體查詢(xún)實(shí)現(xiàn)按設(shè)備特性來(lái)分級(jí)控制頁(yè)面布局，彈性視覺(jué)媒體實(shí)現(xiàn)視覺(jué)媒體按照特定布局的動(dòng)態(tài)調(diào)整，使用流動(dòng)布局能創(chuàng)建可縮放、可流動(dòng)的彈性版式，三者構(gòu)成了響應(yīng)式設(shè)計(jì)的核心技術(shù)。

1.1 媒體查詢(xún)

在CSS2.1媒體類(lèi)型允許為顯示器（screen）、打印機(jī)（print）、電視機(jī)（tv）等媒體定義樣式，W3C在CSS3中加入了媒體查詢(xún)（Media Queries）模塊，不但支持定義媒體類(lèi)型，而且支持上網(wǎng)設(shè)備的物理特性的檢測(cè)。沒(méi)有CSS3的媒體查詢(xún)模塊，就不能針對(duì)設(shè)備特性匹配特定的CSS樣式。媒體查詢(xún)根據(jù)媒體類(lèi)型、屏幕寬度、屏幕比例、設(shè)備方向（橫向或縱向）等各種功能特性來(lái)改變頁(yè)面布局，而不僅僅像CSS2.1的只是媒體類(lèi)型。Web設(shè)計(jì)者只需要針對(duì)不同的屏幕分辨率等級(jí)來(lái)編寫(xiě)不同的頁(yè)面布局樣式，然后上網(wǎng)設(shè)備會(huì)根據(jù)自身的屏幕分辨率來(lái)選擇一種適合頁(yè)面的布局，從而改善用戶(hù)瀏覽體驗(yàn)。媒體查詢(xún)表達(dá)式由設(shè)備類(lèi)型和一個(gè)或多個(gè)檢測(cè)媒體特性的聲明構(gòu)成，聲明由媒體特性名稱(chēng)和值構(gòu)成，中間用冒號(hào)“：”分隔[8]。媒體查詢(xún)的語(yǔ)法為：“@media 媒體類(lèi)型 and （媒體特性） {樣式代碼}”，其中媒體類(lèi)型常用的有all（所有設(shè)備）、screen（電腦顯示器）、print（打印機(jī)或者打印預(yù)覽）和tv（電視機(jī)）。CSS3中定義的媒體特性共有13種，分別是視口寬度width、視口高度height、設(shè)備屏幕分辨率寬度device-width、設(shè)備屏幕分辨率高度device-height、設(shè)備方向orientation[portrait | landscape]、視口寬高比aspect-ration、設(shè)備屏幕分辨率寬高比device-aspect-ratio、設(shè)備支持的每像素色彩位數(shù)color、設(shè)備的顏色索引表中的顏色數(shù)color-index、黑白屏幕設(shè)備每個(gè)像素的所使用的位數(shù)monochrome 、屏幕或打印機(jī)分辨率的resolution、電視機(jī)掃描方式scan[progressive | interlace]、輸出設(shè)備是柵格還是位圖grid[0|1]?？墒褂胊nd關(guān)鍵詞組合媒體類(lèi)型和媒體特性值條件，在媒體類(lèi)型前面或媒體特性前面加not對(duì)后面的表達(dá)式取反，加逗號(hào)“，”在一系列表達(dá)式其中一個(gè)真時(shí)則為真，加only使不支持媒體查詢(xún)的瀏覽器忽略本條查詢(xún)，“{ }”中書(shū)寫(xiě)CSS規(guī)則。例如 “@media screen and （min-width： 480px） {}”表示視口寬度小于480px適用，“@media screen and （min -width： 480px） and （max -width： 768px） {}”表示視口寬度大于480px但小于768px適用，“@media screen and （max-width： 960px） {}”表示視口寬度小于960px適用，“@media screen and （min-width： 1420px） {}”表示視口寬度大于1420px適用，這時(shí)可能要考慮設(shè)置max-width屬性限制內(nèi)容區(qū)的最大寬度，或者增加列數(shù)來(lái)填補(bǔ)大量的空白區(qū)域[9][10]。響應(yīng)式Web設(shè)計(jì)最為常見(jiàn)的是檢測(cè)上網(wǎng)設(shè)備的width特性值，設(shè)定視口寬度的級(jí)數(shù)取決于用戶(hù)群體終端設(shè)備碎片化程度和視覺(jué)設(shè)計(jì)需求，需為不同終端級(jí)別寬度定制相匹配的樣式，做到寬度連續(xù)覆蓋。另一種設(shè)計(jì)思路強(qiáng)調(diào)以界面為主導(dǎo)，解除斷點(diǎn)設(shè)置跟上網(wǎng)設(shè)備分辨率的直接關(guān)聯(lián)，斷點(diǎn)數(shù)量及參數(shù)完全根據(jù)內(nèi)容來(lái)決定，也就是根據(jù)網(wǎng)站的圖文版式的變動(dòng)臨界點(diǎn)來(lái)設(shè)置。

響應(yīng)式Web布局設(shè)計(jì)時(shí)，媒體查詢(xún)順序采用從移動(dòng)端向上設(shè)計(jì)，優(yōu)先建立移動(dòng)設(shè)備用戶(hù)體驗(yàn)，然后針對(duì)更大屏幕的顯示器進(jìn)行調(diào)整，以避免移動(dòng)終端對(duì)媒體查詢(xún)的支持不完善，也就是，在樣式表的開(kāi)頭定義基本樣式，然后使用媒體查詢(xún)從低分辨率到高分辨率來(lái)重寫(xiě)樣式以覆蓋前面定義的樣式[11]。

為減少HTTP請(qǐng)求數(shù)量，建議將媒體查詢(xún)樣式盡可能寫(xiě)在同一個(gè)文件中。對(duì)于較復(fù)雜的網(wǎng)站，可以采用外部樣式表，通過(guò)標(biāo)簽鏈接到網(wǎng)頁(yè)文件，如“”，實(shí)現(xiàn)當(dāng)視口寬度大于等于960px時(shí)載入外部樣式表gt-960px.css。

目前，移動(dòng)終端瀏覽器一般都能比較好支持CSS3，不需要考慮響應(yīng)式布局的媒體查詢(xún)兼容問(wèn)題，為實(shí)現(xiàn)IE9以下的瀏覽器媒體查詢(xún)兼容性，需在頁(yè)面中插入css3-mediaqueries.js文件調(diào)用，代碼如下：

<！—[if lt IE 9]>

<！[endif]—>

1.2 流動(dòng)布局

媒體查詢(xún)能適應(yīng)不同設(shè)備和視口寬度，可以從一組CSS樣式代碼切換到另一組，但切換期間沒(méi)有任何平滑過(guò)渡，會(huì)導(dǎo)致媒體內(nèi)容要么過(guò)寬出現(xiàn)水平滾動(dòng)條，要么過(guò)窄出現(xiàn)大量空白，尤其在切換臨界點(diǎn)時(shí)布局會(huì)嚴(yán)重惡化。通過(guò)將固定像素布局轉(zhuǎn)換成靈活的流動(dòng)布局，確保在媒體查詢(xún)未切換樣式期間布局能適應(yīng)視口改變。流動(dòng)布局依靠浮動(dòng)和百分比寬度來(lái)實(shí)現(xiàn)，浮動(dòng)實(shí)現(xiàn)布局區(qū)塊的動(dòng)態(tài)重組，百分比寬度實(shí)現(xiàn)未到達(dá)斷點(diǎn)時(shí)的區(qū)塊寬度調(diào)整，以減少創(chuàng)建的斷點(diǎn)數(shù)。浮動(dòng)布局在固定寬度的Web設(shè)計(jì)中已經(jīng)大量使用，在此不在贅述。將固定像素寬度轉(zhuǎn)換成百分比寬度可套用公式：百分比寬度=目標(biāo)元素寬度÷上下文元素寬度。例如，將原來(lái)#wrapper寬度為960px，#content寬度為940px，轉(zhuǎn)換為百分比布局#content寬度97.92%，即940÷960=0.9792。

在網(wǎng)頁(yè)文檔標(biāo)簽中插入一個(gè)HTM5標(biāo)簽，設(shè)置基于WebKit內(nèi)核的畫(huà)布縮放參數(shù)，如 ，可實(shí)現(xiàn)頁(yè)面在瀏覽器中以原始大小顯示，禁止用戶(hù)縮放。其中：width和height檢測(cè)設(shè)備屏幕分辨率寬度和高度，initial-scale 設(shè)定初始的縮放比例，值為1時(shí)將根據(jù)瀏覽器可視區(qū)域?qū)嶋H大小來(lái)渲染頁(yè)面。minimum-scale和maximum-scale指允許用戶(hù)縮放到的最小比例和最大比例，user-scalable設(shè)定用戶(hù)是否禁止縮放。

1.3 彈性視覺(jué)媒體

視覺(jué)媒體主要指文本、圖形、圖像、動(dòng)畫(huà)和視頻等可視媒體。彈性視覺(jué)媒體設(shè)計(jì)的本質(zhì)是確保視覺(jué)媒體適應(yīng)版式布局的變化，確保頁(yè)面上媒體的可讀性。響應(yīng)式Web設(shè)計(jì)時(shí)文本和其他視覺(jué)媒體實(shí)現(xiàn)方式不同。

彈性文本需將文本大小單位從px改為em， em的大小由上下文的定義的字體大小計(jì)算而來(lái)，是相對(duì)大小單位。使用em的好處在于：允許縮放文本和保持文本大小設(shè)計(jì)的靈活性。設(shè)計(jì)時(shí)通常給body標(biāo)簽設(shè)置font-size屬性值后，給其他文本都使用相對(duì)單位em，使用相對(duì)單位的文本就會(huì)基于body的大小來(lái)計(jì)算字體大小。字體百分比尺寸計(jì)算跟百分比布局盒子計(jì)算方法相同，如上下文字體大小為16像素，當(dāng)前文字大小為14像素，則字體大小0.875em，即14÷16=0.875。

圖形圖像、動(dòng)畫(huà)和視頻的彈性設(shè)置使用“img，object，video，embed {width：100%； max-width：100%；}”，max-width屬性用于設(shè)置媒體顯示閾值，確?？s放時(shí)不會(huì)超出圖片最大尺寸，同時(shí)應(yīng)刪除HTML插入媒體的標(biāo)記中的width和height屬性定義，如果要定義特定規(guī)格的媒體尺寸，可編寫(xiě)專(zhuān)用樣式單獨(dú)設(shè)置寬度，以覆蓋上下文定義，使其僅作用于該媒體即可。另外一種限制內(nèi)部媒體顯示縮放比例的方法是給外層盒子設(shè)置max-width屬性，通過(guò)限制外層盒子來(lái)間接控制內(nèi)部媒體縮放尺寸。

在設(shè)計(jì)制作彈性視覺(jué)媒體時(shí)，僅考慮媒體放大到的極限情況會(huì)因此帶來(lái)一個(gè)媒體文件整體偏大，使網(wǎng)站變得臃腫，需利用媒體壓縮和優(yōu)化技術(shù)來(lái)控制文件大小。另一種實(shí)現(xiàn)思路是通過(guò)JavaScript判斷當(dāng)前設(shè)備的分辨率，并根據(jù)預(yù)設(shè)的規(guī)則加載不同尺寸的圖片文件。

2 響應(yīng)式設(shè)計(jì)流程

2.1 確定需支持上網(wǎng)設(shè)備類(lèi)型

上網(wǎng)設(shè)備調(diào)查可以幫助Web設(shè)計(jì)者了解用戶(hù)使用的設(shè)備類(lèi)型、屏幕尺寸、瀏覽器類(lèi)型及版本[12]。上網(wǎng)設(shè)備類(lèi)型主要調(diào)查移動(dòng)終端（手機(jī)、平板）和上網(wǎng)本、筆記本電腦和PC，甚至是信息家電。屏幕尺寸調(diào)查主要掌握屏幕的尺寸和長(zhǎng)寬比例。瀏覽器類(lèi)型調(diào)查主要掌握瀏覽器類(lèi)型、采用內(nèi)核引擎及版本。通過(guò)調(diào)查最終確定出一份上網(wǎng)設(shè)備支持列表。響應(yīng)式Web設(shè)計(jì)的目的在于針對(duì)不同設(shè)備的屏幕特性進(jìn)行功能及內(nèi)容的界面預(yù)設(shè)。對(duì)于用戶(hù)不太明確的項(xiàng)目，可選擇桌面顯示器、iPad和主流智能手機(jī)作為主要代表性的設(shè)備，而不必顧全所有已知的設(shè)備規(guī)格類(lèi)型。對(duì)于結(jié)構(gòu)復(fù)雜，內(nèi)容豐富的門(mén)戶(hù)類(lèi)網(wǎng)站，可以采用響應(yīng)式設(shè)計(jì)與手機(jī)版、iPad版混合設(shè)計(jì)模式，對(duì)內(nèi)容龐雜的頁(yè)面做成手機(jī)版和iPad版，一般頁(yè)面則統(tǒng)一采用響應(yīng)式設(shè)計(jì)。

2.2 制作線(xiàn)框原型

確定出設(shè)備支持列表后，需要依據(jù)這些需求由Web設(shè)計(jì)師去設(shè)計(jì)線(xiàn)框原型。制作線(xiàn)框原型的作用是組織并呈現(xiàn)信息，要避免在視覺(jué)上過(guò)度的保真，它并不是細(xì)致的視覺(jué)設(shè)計(jì)，不是Web設(shè)計(jì)稿，跟字體、字號(hào)、配色、圖片等無(wú)關(guān)。針對(duì)確定下來(lái)的分辨率級(jí)別分別制作不同的線(xiàn)框原型，需要考慮清楚不同尺寸下頁(yè)面的布局變化過(guò)程，內(nèi)容縮放過(guò)程，甚至針對(duì)特殊的環(huán)境作特殊化的設(shè)計(jì)等。線(xiàn)框原型完成后將圖片導(dǎo)入到相應(yīng)的設(shè)備進(jìn)行測(cè)試，可以幫助設(shè)計(jì)者盡早識(shí)別潛在問(wèn)題，測(cè)試內(nèi)容包括可訪(fǎng)問(wèn)性、導(dǎo)航與表單的可用性、可讀性等方面。對(duì)于較小屏幕設(shè)備，將全局導(dǎo)航與主要內(nèi)容之間的部分高度壓縮，或者采用可折疊設(shè)計(jì)，確保頁(yè)面跳轉(zhuǎn)后主要內(nèi)容可以呈現(xiàn)在首屏中，以防引起用戶(hù)誤認(rèn)為頁(yè)面沒(méi)有發(fā)成跳轉(zhuǎn)。

2.3前端實(shí)現(xiàn)

線(xiàn)框原型經(jīng)過(guò)測(cè)試后，交給視覺(jué)設(shè)計(jì)師和前端工程師具體實(shí)現(xiàn)，主要任務(wù)是頁(yè)面布局實(shí)現(xiàn)、編寫(xiě)Media Queries、自動(dòng)縮放圖像、字體大小采用相對(duì)單位、調(diào)整移動(dòng)互聯(lián)設(shè)備瀏覽縮放默認(rèn)規(guī)則和調(diào)試[13][14]，相比于傳統(tǒng)的Web視覺(jué)設(shè)計(jì)過(guò)程，Web設(shè)計(jì)師必須時(shí)刻保持警惕，關(guān)注功能性組件的可用性、保證圖文信息在所有設(shè)備中都容易辨讀。前端工程師可以使用響應(yīng)式前端開(kāi)發(fā)框架，簡(jiǎn)化開(kāi)發(fā)過(guò)程，確保開(kāi)發(fā)網(wǎng)站具有跨瀏覽器、一致性、響應(yīng)式等特點(diǎn)[15]。測(cè)試響應(yīng)式布局可以安裝iOS模擬器或者Android模擬器，也可以利用用戶(hù)拖動(dòng)瀏覽器時(shí)會(huì)觸發(fā)判斷條件的特性，把瀏覽器窗口縮小到一定尺寸就可以檢測(cè)響應(yīng)式布局是否生效。

3 結(jié)論

響應(yīng)式Web設(shè)計(jì)為適應(yīng)多樣化的上網(wǎng)設(shè)備來(lái)設(shè)計(jì)，它通過(guò)整合媒體查詢(xún)、流動(dòng)布局和彈性視覺(jué)媒體技術(shù)，是一種采用靈活的、不針對(duì)特定上網(wǎng)設(shè)備的方法來(lái)進(jìn)行Web設(shè)計(jì)，有效地解決了移動(dòng)互聯(lián)網(wǎng)用戶(hù)終端設(shè)備碎片化問(wèn)題，實(shí)現(xiàn)了“一源多屏”的現(xiàn)實(shí)需求。在響應(yīng)式Web設(shè)計(jì)實(shí)踐中，先確定Web設(shè)計(jì)所支持上網(wǎng)設(shè)備列表，然后制作線(xiàn)框原型并測(cè)試，再由前端工程師使用響應(yīng)式布局開(kāi)發(fā)框架完成網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)。開(kāi)展響應(yīng)式Web設(shè)計(jì)關(guān)鍵技術(shù)及設(shè)計(jì)流程的探究，能為Web設(shè)計(jì)師和前端工程師開(kāi)展響應(yīng)式設(shè)計(jì)和網(wǎng)站重構(gòu)提供了技術(shù)框架和路徑。

參考文獻(xiàn)：

[1] 中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心.2013年手機(jī)瀏覽器用戶(hù)研究報(bào)告[R]. （2013-10-16）[2013-12-24].http：//www.cnnic.cn/hlwfzyj/hlwxzbg/ydhlwbg/201310/P020131016356661940876.pdf

[2] 百度.分辨率使用情況[EB/OL]. [2014-2-13]. http：//#baidu.com/data/screen.

[3] 楊玉梅.瀏覽器CSS兼容問(wèn)題探究[J].計(jì)算機(jī)與現(xiàn)代化.2013（7）：220-223.

[4] （英）弗雷恩.響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)[M].王永強(qiáng)譯.北京：人民郵電出版社，2013.

[5] 楊葉，陳琳，董啟標(biāo).響應(yīng)式Web移動(dòng)學(xué)習(xí)資源的技術(shù)實(shí)現(xiàn)與設(shè)計(jì)研究[J].現(xiàn)代教育技術(shù).2013，23（6）：107-111.

[6] 佟延秋，彭江.基于Media Queries的精品課程網(wǎng)站重構(gòu)研究[J].軟件導(dǎo)刊.2013，12（2）：111-114.

[7] 邢希，田興彥，王世運(yùn).響應(yīng)式Web設(shè)計(jì)方法的研究[J].瓊州學(xué)院學(xué)報(bào).2013，20（2）：36-38.

[8] Ethan Marcotte .Responsive Web Design[EB/OL].（2010-5-25）[2013-12-18]. http：//alistapart.com/article/responsive-web-design.

[9] （美）卡德萊茨.響應(yīng)式Web設(shè)計(jì)實(shí)踐[M].侯鴻儒譯.北京：人民郵電出版社，2013：67.

[10] 陸凌牛.HTML 5與CSS 3權(quán)威指南（第二版）[M].北京：機(jī)械工業(yè)出版社，2013：647.

[11] Rob Flaherty. Designing The Well-Tempered Web[EB/OL].（2012-1-17）[2013-12-24]. http：//uxdesign.smashingmagazine.com/2012/01/17/designing-well-tempered-web/.

[12] 馬璇.智能移動(dòng)終端自適應(yīng)界面的一致性研究[D].北京：北京郵電大學(xué)，2013.

[13] 張樹(shù)明.基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化.2013（6）：125-127.

[14] 劉歡，盧蓓蓉.使用響應(yīng)式設(shè)計(jì)構(gòu)建高校新型門(mén)戶(hù)網(wǎng)站[J].中國(guó)教育信息化.2013（9）：71-74.

[15] Bootstrp中文網(wǎng).CSS·Bootstrap[EB/OL].[2014-2-8]. http：//v3.bootcss.com/css/#grid.