2.6 柵格系統(tǒng)

實現(xiàn)響應(yīng)式的主要環(huán)節(jié)是柵格系統(tǒng)，它是用相對固定的格子來完成網(wǎng)頁布局，把網(wǎng)頁內(nèi)容和信息按一定順序排列在格子里，光柵是由行（row）和列（column）組成的頁面布局，該設(shè)計優(yōu)點是可以根據(jù)不同的終端設(shè)備來設(shè)計頁面。Bootstrap 柵格系統(tǒng)，是CSS 風(fēng)格的一個類。在Bootstrap 中container 被稱作是一個容器，它的寬度固定，支持響應(yīng)布局[7]。Bootstrap 柵格參數(shù)見表2，可見，在這個類別前、后面一個從1～12 的數(shù)字。它的設(shè)計原則是根據(jù)容器的百分?jǐn)?shù)來確定尺寸，采用柵格系統(tǒng)，每行最多12 個欄，行將平均分為12 部分，然后按照不同的位置排列，通過媒體查詢，可以對不同的終端設(shè)備做出反應(yīng)。

表2 Bootstrap 柵格參數(shù)

當(dāng)窗口寬度＞1 200 px 時，col-lg-會被自動調(diào)用，如果是3 列，則代碼如下。

當(dāng)窗口寬度為992 px～1 200 px 時，col-md-會被自動調(diào)用，如果比例為6 ∶4 ∶2，則代碼如下。

當(dāng)窗口寬度為768 px～992 px 時，如果是3 列，則代碼如下。

3 實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計

3.1 響應(yīng)式導(dǎo)航條

傳統(tǒng)導(dǎo)航條通常是在網(wǎng)頁頂端橫向顯示的，不能隨頁面的變化而更改。使用列表進行排版，利用左邊浮點特征來達(dá)到橫向顯示。但如果在低分辨率的終端設(shè)備下，網(wǎng)頁很可能會被遮擋或轉(zhuǎn)換，從而降低用戶的使用體驗。同時，Bootstrap 還提供了導(dǎo)航部件，它可以將內(nèi)容按照實際情況進行折疊，且可以隨著視野寬度增大而橫向擴展。實現(xiàn)導(dǎo)航條的關(guān)鍵在于要在導(dǎo)航中設(shè)置中斷點，在導(dǎo)航條中增加對應(yīng)部件，并根據(jù)媒體要求做出相應(yīng)修改。某信息管理系統(tǒng)網(wǎng)站的外觀設(shè)計要兼顧外部、內(nèi)部、前端和后臺三個方面。在本次網(wǎng)頁設(shè)計中，將網(wǎng)頁設(shè)計分為3 個區(qū)域：頂部區(qū)域、左側(cè)導(dǎo)航區(qū)和內(nèi)容區(qū)。某管理系統(tǒng)主頁，如圖2所示。

圖2 某管理系統(tǒng)主頁

3.2 網(wǎng)頁實現(xiàn)

3.2.1 HTML5 結(jié)構(gòu)的搭建

Bootstrap 框架是基于HTML5 完成的，因此網(wǎng)站架構(gòu)應(yīng)該與HTML5 的架構(gòu)相一致，HTML5 架構(gòu)如下。

html lang—" ">

3.2.2 Bootstrap 引入

網(wǎng)站以Bootstrap 架構(gòu)為基礎(chǔ)，為了支持Bootstrap相關(guān)內(nèi)容，需要在網(wǎng)頁中導(dǎo)入相應(yīng)文檔，導(dǎo)入Bootstrap相關(guān)文件遵循以下操作。

href="lib/bootstrap/css/bootstrap.min.css">

script src=" lib/bootstrap/js/bootstrap.min.js" >

3.3 媒體查詢功能

媒體查詢功能是響應(yīng)式設(shè)計的關(guān)鍵，在本文應(yīng)用案例設(shè)計中，根據(jù)使用者的實際使用狀況及應(yīng)用終端進行調(diào)研，發(fā)現(xiàn)該網(wǎng)站所適應(yīng)的產(chǎn)品有3 種類型：電腦、平板、智能手機。因此在設(shè)計時采用了less 文檔，利用媒體查詢方法來建立臨界分界點。在Bootstrap 框架的支持下，按照小屏幕移動設(shè)備終端（＜768 px）、小屏幕平板智能終端（≥768 px）、中等屏幕智能終端（≥992 px）、大屏幕智能終端（≥1 200 px）進行劃分。由于Bootstrap框架默認(rèn)將手機作為優(yōu)先權(quán)，因此一般不會在超小屏幕上顯示與媒體查詢的有關(guān)代碼。盡管CSS 會影響到各種設(shè)備和頁面實際使用，但可以將CSS 影響控制在最小的屏幕尺寸。為了實現(xiàn)響應(yīng)式Web 設(shè)計，必須要有可靠的媒體查詢功能，Bootstrap 框架可以為用戶提供相應(yīng)的代碼，因為Bootstrap 框架包含了大量的代碼，所以在設(shè)計過程中，用戶不必花費太多的時間去修改和調(diào)整。

3.5 流式布局設(shè)計

手機應(yīng)用程序開發(fā)的特殊性，使得在設(shè)計過程中，會出現(xiàn)大量不同風(fēng)格的圖片，因頁面版面結(jié)構(gòu)會對特定位置造成較大影響。結(jié)合響應(yīng)式設(shè)計理念，網(wǎng)站會根據(jù)不同的設(shè)備（使用環(huán)境）來調(diào)整頁面大小和圖片尺寸，以及調(diào)整整個頁面的布局，以確保網(wǎng)站的靈活性，從而適應(yīng)不同設(shè)備的實際應(yīng)用。這里的流式布局，是為了讓網(wǎng)頁中各個要素均保持浮動特性。一般情況下，網(wǎng)頁元素均會在網(wǎng)頁左邊浮動，當(dāng)網(wǎng)頁寬度不足以容納1 個元素時，這個元素就會被移到下方，并隨著使用者的向上移動而逐漸顯現(xiàn)。采用流式布局，可以保證網(wǎng)站中每個要素均能得到合理的位置和布局。

在響應(yīng)式Web 設(shè)計時，若使用PC 終端設(shè)備（1 200 px以上）來瀏覽網(wǎng)頁，左邊導(dǎo)航條將會被中斷點類型colmd-2 所控制。因為PC 端頁面寬度比較大，所以在頁面右邊內(nèi)容將會出現(xiàn)2 列橫向的顯示方式。在少數(shù)情況下，如果PC 端的顯示寬度小于768 px，那么左邊的導(dǎo)航條將由col-md-2 所控制。在此情形下，頁面上方菜單將會由于頁面寬度不夠而被隱藏，或轉(zhuǎn)換成獨立按鍵，以持續(xù)提供對應(yīng)功能?；谥悄苁謾C設(shè)備，左邊導(dǎo)航條寬度會由斷點類型col-xs-4 決定，因為頁面寬度在較小的水平，所以頁面內(nèi)容會被調(diào)節(jié)成一條縱向單行。即當(dāng)多個不同斷點被綜合使用時，網(wǎng)頁效果不會因設(shè)備分辨率和尺寸而改變。而column 列會根據(jù)不同畫面分辨率和屏幕尺寸表現(xiàn)出相應(yīng)功能，從而為用戶提供全面的使用體驗，以實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計。

4 結(jié)語

Bootstrap 是一組前端開發(fā)架構(gòu)，它的靈活性、可擴充性促進了響應(yīng)式網(wǎng)頁開發(fā)，并加速了響應(yīng)式相關(guān)技術(shù)的發(fā)展?；贐ootStrap 的響應(yīng)式網(wǎng)頁設(shè)計，可以實現(xiàn)不同手機設(shè)備的兼容性。它可以自動判斷不同設(shè)備在不同環(huán)境下的用戶行為，從而自動地調(diào)整頁面，無論用戶使用何種設(shè)備，屏幕的位置是水平的還是垂直的，頁面均能自動地切換分辨率、圖片大小和相應(yīng)的文字功能，從而滿足不同設(shè)備的正常顯示和瀏覽。既節(jié)約了大量的人力和資源，又確保了PC 端和手機頁面的連貫性。