以Bootstrap為基礎(chǔ)建立響應(yīng)式安徽省地震局網(wǎng)站

孫 靜，萬 杰，李亞龍

(安徽省地震局，安徽 合肥 230031)

以Bootstrap為基礎(chǔ)建立響應(yīng)式安徽省地震局網(wǎng)站

孫 靜，萬 杰，李亞龍

(安徽省地震局，安徽 合肥 230031)

隨著安徽省地震事業(yè)的發(fā)展和人民群眾對防震減災(zāi)知識需求的日益增長，以及“十二五”項目建設(shè)工作的深入展開，迅速傳播安徽省地震局的工作成果和及時發(fā)布工作動態(tài)顯得尤為重要。目前安徽省地震局對外的宣傳窗口仍是傳統(tǒng)模式網(wǎng)站，即PC互聯(lián)網(wǎng)模式。而隨著手機(jī)、移動終端上網(wǎng)的大規(guī)模普及以及移動網(wǎng)速的提高，標(biāo)志著移動互聯(lián)網(wǎng)時代的來臨。到2015年，移動互聯(lián)網(wǎng)的用戶數(shù)量將會超過桌面用戶數(shù)量。對于接入移動互聯(lián)網(wǎng)的用戶來說，除了智能手機(jī)外，使用平板電腦甚至是電視機(jī)進(jìn)行上網(wǎng)的用戶也在不斷增加。在這種形勢下，怎樣讓設(shè)計的網(wǎng)站能夠盡量兼容更多的移動設(shè)備來確保用戶的良好體驗，將成為需要面對的一大挑戰(zhàn)。而基于BootStrap開發(fā)的門戶網(wǎng)站，正是對這一趨勢的良好回應(yīng)。以BootStrap為基礎(chǔ)開發(fā)的響應(yīng)式WEB網(wǎng)頁能彈性適應(yīng)屏幕尺寸，智能兼容多種終端，使網(wǎng)站不挑剔瀏覽終端，能很好為公眾提供方便。

BootStrap；智能兼容；響應(yīng)式設(shè)計

隨著通信技術(shù)3G、4G的發(fā)展和移動通信WEB2.0技術(shù)的提升，近年來各種移動智能設(shè)備的廣泛應(yīng)用，中國互聯(lián)網(wǎng)應(yīng)用正在往移動方向發(fā)展，呈現(xiàn)出多元化的趨勢。越來越多的用戶擁有多種移動設(shè)備，像智能手機(jī)、平板電腦、智能手表等在現(xiàn)今的大環(huán)境下正在普及并逐漸超過PC設(shè)備。面對市場上移動設(shè)備的不斷增多，伴隨著各種各樣的設(shè)備屏幕的分辨率、尺寸和型號越來越多，要能夠在不同屏幕、不同系統(tǒng)平臺等環(huán)境下保持網(wǎng)頁的一致性，為滿足用戶的一致體驗將成為了整個網(wǎng)頁設(shè)計行業(yè)的一個新挑戰(zhàn)。

1 基于BootStrap的響應(yīng)式Web設(shè)計概述

1.1 BootStrap簡介

Bootstrap是Twitter推出的CSS框架，它是由Twiter的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)的，推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC(微軟全國廣播公司)的BreakingNews都使用了該項目，基本上是目前歐美最流行的框架[1]。CSS Reset是指重設(shè)瀏覽器的樣式[2]。在各種瀏覽器中，都會對CSS的選擇器默認(rèn)一些數(shù)值。但并不是所有的瀏覽器都使用一樣的數(shù)值，所以有了CSS Reset，以讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)一致。Bootstrap中包含有豐富的組件，其中包括下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航條、面包屑、分頁、排版、縮略圖、警告對話框、進(jìn)度條等，根據(jù)這些組件，可以快速搭建一個風(fēng)格簡約和功能完備的網(wǎng)站。它還自帶了一組jQuery交互插件，包括模式對話框、標(biāo)簽頁、滾動條、彈出框等，不但功能完善，而且十分精致，正在成為眾多jQuery項目的默認(rèn)設(shè)計標(biāo)準(zhǔn)。而這些模塊化的組件在修改時也是非常方便的，只需要修改變量就可以形成自己的獨特風(fēng)格。要使用Bootstrap就必須首先將Bootstrap的文件包放在相應(yīng)的文件夾下，文件包中包含所有CSS文件、jQuary文件以及相關(guān)的圖標(biāo)文件，使用時只在網(wǎng)頁文件中引入即可，代碼如下：

Bootstrap．CSS”，>，其中“path”為Bootstrap所在路徑，若用到其他組件和插件，只需要引人相應(yīng)的文件就可以了。Bootstrap默認(rèn)頁面寬度為940px，并將其平均分為12柵格(Grid)，分別從span1到spanl2，在使用過程中只需保持各個行塊中內(nèi)容的寬度不大于設(shè)置的相關(guān)span寬度即可。搭建一個網(wǎng)站中常用1∶2格局的版面只需要如下代碼：

若需要設(shè)置元素平行移動，代碼為“offsetspanN”(0

1.2 現(xiàn)行的主流結(jié)構(gòu)在Web開發(fā)中的弊端

目前網(wǎng)頁設(shè)計師在設(shè)計網(wǎng)頁時常用的主流結(jié)構(gòu)是DIV+CSS，其中CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫，是一種用來表現(xiàn)HTML或XML等文件式樣的計算機(jī)語言，負(fù)責(zé)前端頁面的外觀。但是編寫CSS文件是一個繁冗細(xì)致的工作，不但需要有一定的代碼編寫能力，更對美術(shù)設(shè)計功底有一定的要求。在網(wǎng)站項目開發(fā)中，往往需要編寫大量的CSS代碼，如果沒有一定的經(jīng)驗，很容易造成大量代碼混雜，尤其是DIV+CSS編碼，其本身并沒有統(tǒng)一的規(guī)范，很容易造成外聯(lián)樣式與行內(nèi)樣式冗余等其他問題。其次，瀏覽器兼容性也是在前端設(shè)計時無法避免的問題，由于目前瀏覽器對CSS的代碼識別不同，使得相同的CSS樣式在不同類型、不同版本的瀏覽器上存在較大的顯示差異。而解決這樣的問題不僅需要在編寫時高度注意，更需要通過大量的測試來確定最終的瀏覽效果，反復(fù)的測試無疑在很大程度上降低了網(wǎng)頁開發(fā)效率。

1.3 基于BootStrap的響應(yīng)式Web設(shè)計優(yōu)劣勢

圖1 CSS框架不同的需求自行對頁面進(jìn)行響應(yīng)式調(diào)整

響應(yīng)式Web設(shè)計優(yōu)勢。使用BootStrap中的CSS框架能夠很巧妙地避開上述弊端，以BootStrap為基礎(chǔ)設(shè)計的Web頁面能夠讓不同移動設(shè)備兼容顯示，這主要指的是入口頁面可以自動判斷不同設(shè)備、不同環(huán)境的用戶行為，并根據(jù)這些不同的需求自行對頁面進(jìn)行響應(yīng)式調(diào)整，以期達(dá)到兼容各種設(shè)備的正常顯示與瀏覽的目的。不管訪問Web頁面的用戶是何種設(shè)備，或者用戶對屏幕的擺放是橫向還是豎向，頁面都應(yīng)該能夠識別當(dāng)前訪問用戶的終端并且自動切換分辨率、圖片大小及相關(guān)腳本功能，以兼容不同設(shè)備，效果如圖1所示。響應(yīng)式Web設(shè)計劣勢包括兼容各種設(shè)備工作量大，效率低下代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時間加長其實這是一種折衷性質(zhì)的設(shè)計解決方案，多方面因素影響而達(dá)不到最佳效果一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況。

2 響應(yīng)式網(wǎng)站系統(tǒng)設(shè)計

2.1 設(shè)計目標(biāo)

通過對現(xiàn)今響應(yīng)式設(shè)計技術(shù)的掌握與了解，設(shè)計出的網(wǎng)站應(yīng)該能夠達(dá)到以下2個目標(biāo)：(1)前臺部分能夠兼容顯示絕大部分移動終端設(shè)備、不同尺寸和分辨率的屏幕；能夠在不同瀏覽器內(nèi)核中對網(wǎng)頁保持同樣的風(fēng)格，輸出時保證用戶的相同體驗；(2)后臺部分可以根據(jù)現(xiàn)有的PC網(wǎng)站后臺數(shù)據(jù)接口獲取相關(guān)頁面的信息，將數(shù)據(jù)庫中提取的相關(guān)信息加載到相應(yīng)的模塊當(dāng)中。

2.2 主頁HTML設(shè)計

在網(wǎng)站主頁設(shè)計中，為保持各個頁面的連貫性，采用分塊設(shè)計的方法。與此同時為了與傳統(tǒng)pc網(wǎng)站相關(guān)聯(lián)，仍采用相同的宣傳圖片作為各個網(wǎng)頁的頭部，為了實現(xiàn)響應(yīng)式設(shè)計，采用Bootstrap網(wǎng)格系統(tǒng)實現(xiàn)，設(shè)計代碼如下：

中間內(nèi)容部分以白色作為基色調(diào)。能夠把內(nèi)容鮮明地體現(xiàn)出來。

網(wǎng)站的分頁是各個欄目的詳細(xì)內(nèi)容的展開，各級子頁面保持與主頁面的風(fēng)格，實現(xiàn)了網(wǎng)站的統(tǒng)一。

2.3 實現(xiàn)響應(yīng)式布局

一切以彈性靈活為基礎(chǔ)。所謂彈性布局就是不對網(wǎng)頁頁面的寬度作任何設(shè)定，即非固定式頁面布局，也就是體現(xiàn)在頁面整體布局以及字號、圖片等方面可以根據(jù)不同環(huán)境自動做出適應(yīng)和調(diào)整，因而能使頁面更富有彈性化使其能夠兼容適應(yīng)不同移動設(shè)備的環(huán)境。然而彈性布局并不能完美解決web的響應(yīng)式設(shè)計的需求，在某些極端特殊的情況下，一些元素或者頁面布局仍有可能遭到破壞。盡管如此，彈性布局還是響應(yīng)式設(shè)計的基礎(chǔ)，如果沒有它，Web響應(yīng)式設(shè)計的后續(xù)工作將無法開展。

媒介查詢器功能?，F(xiàn)今大多數(shù)移動瀏覽器將HTML頁面放大為寬的視圖(viewport)以符合屏幕分辨率，為了讓媒體查詢能夠在各個瀏覽器下充分發(fā)揮其響應(yīng)式的作用時可以使用視圖的meta標(biāo)簽來進(jìn)行重置,先在標(biāo)簽里加入下面標(biāo)簽：

接下來就可以使用媒介查詢器對整個頁面進(jìn)行響應(yīng)式布局設(shè)計，媒介查詢器可以根據(jù)條件告訴瀏覽器如何為指定寬度的視圖渲染頁面。它只一種以純CSS方式實現(xiàn)響應(yīng)式Web設(shè)計思路的手段，能夠有效幫助鎖定某些指定的設(shè)備，并針對某些特定的設(shè)備類型顯示不同的頁面布局風(fēng)格，很好地實現(xiàn)響應(yīng)式設(shè)計。

2.4 數(shù)據(jù)庫連接代碼的設(shè)計

該響應(yīng)式網(wǎng)站的設(shè)計是以已存在的網(wǎng)站為基礎(chǔ)的，所以只需要調(diào)用已存在的后臺數(shù)據(jù)庫數(shù)據(jù)，就可以進(jìn)行與數(shù)據(jù)庫的連接或讀取，然后將數(shù)據(jù)顯示到前臺頁面，代碼如下：

include_once "../config.inc.php";// 連接到數(shù)據(jù)庫

MYMconn =mysql_connect(MYMdbhost, MYMdbuser, MYMdbpw);

if (!MYMconn)

{

echo "Unable to connect to DB: " .mysql_error();exit;

}

if (!mysql_select_db(MYMdbname))

{

echo "Unable to select database: " .mysql_error();exit;

}

mysql_query("set names gbk");

3 響應(yīng)式動態(tài)網(wǎng)站測試和結(jié)束語

當(dāng)前期的工作完成以后，網(wǎng)站建設(shè)的目標(biāo)就基本實現(xiàn)了。下面介紹如何具體實現(xiàn)頁面截圖。移動終端顯示效果如圖2所示。

圖2 移動終端顯示效果

對以BootStrap為基礎(chǔ)的響應(yīng)式Web設(shè)計進(jìn)行了一定程度的研究后，針對不同移動設(shè)備環(huán)境的用戶提供了更友好的瀏覽體驗和更加舒適的界面風(fēng)格，這些彌補(bǔ)了PC網(wǎng)站在時間和空間上的限制，為實現(xiàn)用戶隨時隨地訪問安徽省地震局網(wǎng)站內(nèi)的主要內(nèi)容提供了可能。

[1] Jake Spurlock.李松峰譯.Bootstrap手冊[M]．北京：人民郵電出版社，2013.

[2] 張亞飛.HTML5+CSS3網(wǎng)頁布局和樣式精粹[M]．北京：清華大學(xué)出版社，2011.

The responsive web designing based on Bootstrap for Earthquake Administration of Anhui Province

Sun Jing, Wan Jie, Li Yalong

(Earthquake Administration of Anhui Province, Anhui Hefei 230031, China)

With the earthquake researching development in Anhui Province and more knowledge on the earthquake disaster reduction are demanded. Supported by the Twelfth Five-year Plan, the particularly important task is to release the earthquake catalog timely and seismological work as soon as possible. As a propagation window of the Earthquake Administration of Anhui Province, the traditional mode web and PC Internet mode were still used. With the development of the mobile phone and the internet popularization, the mobile Internet era starts. By 2015, the number of mobile Internet users will surpass desktop users. In addition to intelligent mobile phone, tablet computer and TV Internet users continue to increase even. In this situation, to make our website as far as compatible with various types of equipment, and to ensure good user experience will be more and more important. The WEB responsive web designing based on the BootStrap is a good tool. It adapts to the screen size flexible and to be compatible with a variety of intelligent terminal.

BootStrap; intelligent compatible; responsive web designing

2015-06-24

孫靜(1978-)，女，安徽省合肥市人，工程師，碩士，畢業(yè)于中國科學(xué)技術(shù)大學(xué)，主要從事網(wǎng)絡(luò)技術(shù)方面的研究工作.

TP393.092

B

1001-8115(2015)03-0038-04

10.13716/j.cnki.1001-8115.2015.03.010