2.6 柵格系統(tǒng)

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

表2 Bootstrap 柵格參數(shù)

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

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

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

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

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

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

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

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

3.5 流式布局設(shè)計(jì)

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

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

4 結(jié)語

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