一種基于復(fù)合型框架的響應(yīng)式布局技術(shù)研究

陳昕

摘要：文章針對(duì)響應(yīng)式布局技術(shù)瀏覽器兼容性較差的問題，研究了一種基于Bootstrap和Unsemantic的復(fù)合型框架響應(yīng)式布局技術(shù)，并給出了基本實(shí)現(xiàn)方案。首先分析了Bootstrap框架和Unsemantic框架的優(yōu)點(diǎn)與不足，再闡述了復(fù)合型框架的環(huán)境搭建和頁面版式布局的實(shí)現(xiàn)過程，最后以福建師范大學(xué)協(xié)和學(xué)院黨務(wù)工作部網(wǎng)站（ http：//cuc.fjnu.edu.cn/dwgz/ ）為案例驗(yàn)證了技術(shù)可行性和瀏覽顯示效果。

關(guān)鍵詞：Bootstrap；Unsemantic；HTML5；響應(yīng)式布局；應(yīng)用研究

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）25-0087-02

隨著移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展，響應(yīng)式布局技術(shù)逐漸成為Web前端開發(fā)的主流。高效解決解決多設(shè)備顯示適應(yīng)問題時(shí)響應(yīng)式布局的優(yōu)點(diǎn)。特別是針對(duì)不同平臺(tái)、不同尺寸的終端訪問，響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)。但是，對(duì)于不同內(nèi)核、不同版本的瀏覽器渲染顯示兼容性較差是目前響應(yīng)式布局技術(shù)存在的一個(gè)主要問題。

為了解決響應(yīng)式布局技術(shù)瀏覽器兼容性較差的問題，本文提出了一種Bootstrap和Unsemantic的復(fù)合型框架響應(yīng)式布局技術(shù)，并給出了基本實(shí)現(xiàn)方案。文章首先分析了Bootstrap框架和Unsemantic框架的優(yōu)點(diǎn)與不足，再闡述了復(fù)合型框架的環(huán)境搭建和頁面版式布局的實(shí)現(xiàn)過程，最后以福建師范大學(xué)協(xié)和學(xué)院黨務(wù)工作部網(wǎng)站（ http：//cuc.fjnu.edu.cn/dwgz/ ）為案例驗(yàn)證了技術(shù)可行性和瀏覽顯示效果。

1 Bootstrap框架

Bootstrap是由Twitter開發(fā)，基于HTML5，CSS3以及JavaScript的響應(yīng)式布局框架。Bootstrap一直秉承著一套代碼編寫一個(gè)框架即可適配多種設(shè)備的開發(fā)理念，并明確強(qiáng)調(diào)了移動(dòng)設(shè)備優(yōu)先的開發(fā)原則，是目前很受歡迎的前端框架。

Bootstrap為開發(fā)者提供了完整的全局CSS樣式，每個(gè)HTML元素都可以通過class設(shè)置樣式并獲得增強(qiáng)的瀏覽效果。Bootstrap擁有大量可復(fù)用的組件，還引入了jQuery插件，令這些組件的功能更強(qiáng)大、應(yīng)用更靈活、更富有生命力。

Bootstrap的目標(biāo)是在最新的桌面和移動(dòng)瀏覽器上有最佳的表現(xiàn)，這既是它的優(yōu)點(diǎn)，也是它的缺點(diǎn)。Bootstrap先進(jìn)的柵格系統(tǒng)雖然可以幫助開發(fā)者更快更好地完成Web開發(fā)，但是其對(duì)不同內(nèi)核的瀏覽器，尤其是早期的IE瀏覽器的兼容性卻差強(qiáng)人意。

2 Unsemantic框架

Unsemantic源自經(jīng)典的框架960 Grid System，是一款結(jié)構(gòu)清晰、代碼簡(jiǎn)潔的響應(yīng)式布局框架。Unsemantic可以高效地設(shè)計(jì)開發(fā)支持多終端、跨平臺(tái)的響應(yīng)式布局前端，并且對(duì)于IE內(nèi)核、Gecko內(nèi)核以及WebKit內(nèi)核等各種不同內(nèi)核的瀏覽器有著較強(qiáng)的兼容性，尤其對(duì)于早期版本的IE瀏覽器也具有良好的兼容性。

3 復(fù)合型框架響應(yīng)式布局

本文嘗試在Web開發(fā)中將Unsemantic和Bootstrap相結(jié)合，即將兩者同時(shí)運(yùn)用構(gòu)造一種復(fù)合型的框架。其中，Unsemantic主要實(shí)現(xiàn)頁面版式的柵格布局以發(fā)揮其兼容性強(qiáng)的優(yōu)勢(shì)，而Bootstrap則主要運(yùn)用其功能強(qiáng)大的組件及插件。

3.1 搭建環(huán)境

1）在站點(diǎn)根目錄中將Unsemantic和Bootstrap的CSS文件、JS文件以及字體文件構(gòu)建起基本的文件結(jié)構(gòu)。

2）在頁面中構(gòu)建HTML5環(huán)境，使頁面滿足移動(dòng)設(shè)備優(yōu)先的要求。

3）在頁面中插入U(xiǎn)nsemantic和Bootstrap框架的CSS文件及JS文件，并用條件注釋判斷瀏覽器版本。

其中，當(dāng)訪問瀏覽器的版本低于IE9.0時(shí)，頁面加載html5shiv_min.js及respond_min.js；當(dāng)訪問瀏覽器的版本高于IE8.0或是IEMobile版本時(shí)，頁面加載unsemantic-grid-responsive.css；當(dāng)訪問瀏覽器的版本低于IE9.0并且非IEMobile版本時(shí)，頁面加載ie.css。

4）為了增強(qiáng)頁面對(duì)于IE瀏覽器以及國(guó)產(chǎn)瀏覽器的兼容性，可在頁面中添加如圖5、如圖6所示標(biāo)簽。

如圖1所示標(biāo)簽被包含在了所有Bootstrap文檔和實(shí)例頁面中，為的就是在每個(gè)被支持的IE版本中擁有最好的繪制效果，有效提高了響應(yīng)式框架頁面對(duì)于IE瀏覽器的兼容性。

目前，大多數(shù)國(guó)產(chǎn)瀏覽器都支持兼容模式（即IE內(nèi)核）和高速模式（即webkit內(nèi)核），但是默認(rèn)都使用兼容模式，這就造成了低版本的IE內(nèi)核對(duì)于響應(yīng)式的框架渲染效果比較糟糕的現(xiàn)狀。所以，如圖2所示標(biāo)簽支持部分國(guó)產(chǎn)瀏覽器以默認(rèn)高速模式（即webkit內(nèi)核）渲染頁面，極大提高了響應(yīng)式框架頁面對(duì)于國(guó)產(chǎn)瀏覽器的兼容性。

3.2 布局實(shí)現(xiàn)

3.2.1 導(dǎo)航條

導(dǎo)航條是站點(diǎn)或應(yīng)用中必不可少的響應(yīng)式基礎(chǔ)組件。響應(yīng)式導(dǎo)航條在移動(dòng)設(shè)備上應(yīng)該可以折疊，且在窗口寬度增加時(shí)逐漸變?yōu)樗秸归_模式。

導(dǎo)航條可以使用Bootstrap中的導(dǎo)航條組件

欄目版塊采用.grid-100類容器嵌套在頁面版塊中。這種嵌套的方式可以繼承Unsemantic框架定義的CSS樣式，讓欄目版塊之間的間距（margin）和內(nèi)補(bǔ)（padding）以Unsemantic框架的默認(rèn)樣式顯示。在主體版塊和頁面版塊的容器添加.mobile-grid-100類，可以使頁面在移動(dòng)互聯(lián)網(wǎng)終端顯示時(shí)實(shí)現(xiàn)響應(yīng)式布局。

3.2.3 欄目版式布局

欄目版式布局以Bootstrap組件為主，包括巨幕、縮略圖、表單、列表組、面板等。Bootstrap組件可以直接嵌入在Unsemantic柵格中使用，而不需要再添加Bootstrap的柵格類。

如圖5所示代碼為例，定義了主體版塊中的50%寬度的欄目。其中，.panel類容器定義了一個(gè)基本的bootstrap面板，.panel-heading類容器定義面板的標(biāo)題，.panel-body類容器定義了面板的主體，.btn類標(biāo)簽定義了一個(gè)按鈕式的超鏈接。

3.3 案例調(diào)試

福建師范大學(xué)協(xié)和學(xué)院黨務(wù)工作部網(wǎng)站（ http：//cuc.fjnu.edu.cn/dwgz/ ）的前端采用基于Bootstrap和Unsemantic的復(fù)合型框架響應(yīng)式布局技術(shù)開發(fā)，前端調(diào)試結(jié)果如下：

1）該站點(diǎn)在IE7.0中頁面整體版式還算工整，并沒有出現(xiàn)嚴(yán)重的錯(cuò)位現(xiàn)象。但是頁面中存在的問題也比較明顯，欄目的間距和邊距顯示效果不夠協(xié)調(diào)，友情鏈接欄目中將每張圖片設(shè)置為.grid-15類也是無效的。

2）該站點(diǎn)在IE8.0和IE9.0中頁面均可正確瀏覽顯示，并沒有發(fā)生IE7.0中出現(xiàn)的不兼容現(xiàn)象。但是，在IE8.0和IE9.0中的瀏覽顯示效果卻并不是完全一樣，在頁面版塊寬度以及欄目版塊寬度上存在著細(xì)小差異，對(duì)比而言IE9.0的瀏覽顯示效果會(huì)顯得更加協(xié)調(diào)。

3）該站點(diǎn)在360安全瀏覽器8.1中的高速模式（即webkit內(nèi)核）下頁面可以正確顯示。對(duì)比IE內(nèi)核和webkit內(nèi)核的顯示效果，在列表項(xiàng)換行縮進(jìn)樣式上存在差別。

4）該站點(diǎn)在移動(dòng)互聯(lián)網(wǎng)終端中頁面版塊和欄目版塊中的標(biāo)題、文字、列表、圖標(biāo)、圖片、超鏈接以及樣式都可以正確顯示，體現(xiàn)了較強(qiáng)的響應(yīng)式布局效果。

4 結(jié)論

本文提出了一種基于Bootstrap和Unsemantic的復(fù)合型框架響應(yīng)式布局技術(shù)，將Unsemantic穩(wěn)定的柵格系統(tǒng)和Bootstrap豐富的組件有效地結(jié)合運(yùn)用，極大提高了響應(yīng)式布局頁面對(duì)于 （下轉(zhuǎn)第99頁）

（上接第88頁）

多內(nèi)核、多版本瀏覽器渲染顯示的兼容性和穩(wěn)定性，并在多平臺(tái)、多尺寸終端訪問獲得了較好的響應(yīng)式顯示效果。

通過福建師范大學(xué)協(xié)和學(xué)院黨務(wù)工作部網(wǎng)站（ http：//cuc.fjnu.edu.cn/dwgz/ ）的前端開發(fā)，驗(yàn)證了技術(shù)的可行性及效果?；贐ootstrap和Unsemantic的復(fù)合型框架響應(yīng)式布局技術(shù)，不僅保證了響應(yīng)式布局的開發(fā)效率，還保留了Bootstrap的設(shè)計(jì)風(fēng)格，并且克服了Bootstrap在IE7.0、IE8.0等低版本IE瀏覽器中兼容性較差，無法正確顯示的問題。

參考文獻(xiàn)：

[1] 萬維網(wǎng)聯(lián)盟.Bootstrap3中文文檔[EB/OL]. http：//v3.bootcss.com/.

[2] 萬維網(wǎng)聯(lián)盟.Unsemantic[EB/OL].http：//unsemantic.com/.

[3] 崔松健.響應(yīng)式Web設(shè)計(jì)[J].信息與電腦，2013（10）：25-26.

[4] 周俊杰.網(wǎng)頁視覺設(shè)計(jì)規(guī)范[EB/OL].http：//www.zcool.com.cn/article/ZMzY1MjA=.html.

[5] 冉兆春.淺析對(duì)不同分辨率屏幕自動(dòng)調(diào)節(jié)的網(wǎng)頁設(shè)計(jì)方法[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2013（3）：212-214.

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

[7] 劉清堂，胡艦，翟利利，等.跨平臺(tái)的多終端設(shè)備網(wǎng)頁自適應(yīng)布局研究及應(yīng)用[J].現(xiàn)代教育技術(shù)，2015， 25（2）：107-113.

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

[9] 陳思濛，基于Bootstrap的響應(yīng)式拼車網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)[D]. 大連：大連理工大學(xué)，2015.

[10] 陳靜.基于響應(yīng)式Web設(shè)計(jì)手機(jī)圖書館服務(wù)應(yīng)用探討[J].圖書館工作與研究，2015（4）：33-36.

【通聯(lián)編輯：唐一東】