基于Bootstrap框架響應式網頁設計與實現

2.6 柵格系統

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

表2 Bootstrap 柵格參數

當窗口寬度＞1 200 px 時，col-lg-會被自動調用，如果是3 列，則代碼如下。

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

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

3 實現響應式網頁設計

3.1 響應式導航條

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

圖2 某管理系統主頁

3.2 網頁實現

3.2.1 HTML5 結構的搭建

Bootstrap 框架是基于HTML5 完成的，因此網站架構應該與HTML5 的架構相一致，HTML5 架構如下。

html lang—" ">

3.2.2 Bootstrap 引入

網站以Bootstrap 架構為基礎，為了支持Bootstrap相關內容，需要在網頁中導入相應文檔，導入Bootstrap相關文件遵循以下操作。

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

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

3.3 媒體查詢功能

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

3.5 流式布局設計

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

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

4 結語

Bootstrap 是一組前端開發架構，它的靈活性、可擴充性促進了響應式網頁開發，并加速了響應式相關技術的發展。基于BootStrap 的響應式網頁設計，可以實現不同手機設備的兼容性。它可以自動判斷不同設備在不同環境下的用戶行為，從而自動地調整頁面，無論用戶使用何種設備，屏幕的位置是水平的還是垂直的，頁面均能自動地切換分辨率、圖片大小和相應的文字功能，從而滿足不同設備的正常顯示和瀏覽。既節約了大量的人力和資源，又確保了PC 端和手機頁面的連貫性。