鄔紫琴 ，盧詩怡 ，張 妮

（廣西農(nóng)業(yè)職業(yè)技術(shù)學(xué)院，廣西 南寧 530007）

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，以智能手機(jī)為代表的移動(dòng)終端設(shè)備越來越普及，利用移動(dòng)設(shè)備獲取資源成為大眾重要的學(xué)習(xí)方式。然而，原大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)是依托PC端而建，在以往傳統(tǒng)的PC電腦上瀏覽起來很便捷，而在移動(dòng)設(shè)備上雖然也可以訪問，但是卻需要用戶通過手動(dòng)調(diào)整、縮放頁面等操作來獲取信息，無法獲得良好的用戶體驗(yàn)感。相比之下，響應(yīng)式設(shè)計(jì)使用了具有更加彈性的機(jī)制。響應(yīng)式設(shè)計(jì)是指能讓同一個(gè)頁面根據(jù)不同顯示設(shè)備的屏幕尺寸自動(dòng)調(diào)整網(wǎng)頁布局，保證頁面呈現(xiàn)最佳顯示效果。大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)中使用響應(yīng)式設(shè)計(jì)只需要修改前端設(shè)計(jì)，并不涉及后臺的修改，開發(fā)成本大大降低，同時(shí)一套網(wǎng)站適應(yīng)了不同的尺寸的終端設(shè)備，運(yùn)行維護(hù)便捷，還保證了網(wǎng)站地址的唯一性。

1 響應(yīng)式設(shè)計(jì)理念

響應(yīng)式網(wǎng)頁設(shè)計(jì)最早是由網(wǎng)頁設(shè)計(jì)師Ethan Marcotte提出的。響應(yīng)式網(wǎng)頁設(shè)計(jì)的理念是頁面的設(shè)計(jì)與開發(fā)應(yīng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的調(diào)整[1]。這就意味著，只需要制作一套網(wǎng)站便可以自動(dòng)適應(yīng)不同的終端設(shè)備。相對于經(jīng)常采用固定布局的傳統(tǒng)網(wǎng)頁設(shè)計(jì)，響應(yīng)式網(wǎng)頁更強(qiáng)調(diào)設(shè)計(jì)的靈活性，它通常使用模塊化設(shè)計(jì)，頁面中每個(gè)元素的大小、位置甚至表現(xiàn)形式都是動(dòng)態(tài)的，能夠依據(jù)終端設(shè)備尺寸的大小而自動(dòng)適應(yīng)，并呈現(xiàn)出較好的網(wǎng)頁效果。面對越來越多樣化的終端設(shè)備以及操作系統(tǒng)的差異，響應(yīng)式網(wǎng)頁設(shè)計(jì)強(qiáng)大的兼容性、適應(yīng)性和跨平臺的特性讓其越來越受到廣大網(wǎng)頁制作者的青睞。

目前，常見的響應(yīng)式設(shè)計(jì)的框架主要有Bootstrap、Foundatiton、GroundworkCSS、Compass CSS 等，這些框架都幾乎使用了響應(yīng)式網(wǎng)格系統(tǒng)，包涵了豐富的樣式和組件，利用這些框架能夠快速地進(jìn)行響應(yīng)式網(wǎng)站的開發(fā)。

2 Bootstrap框架

2.1 Bootstrap框架介紹

Bootstrap是基于HTML、CSS、JavaScript的一個(gè)前端框架，是GitHub上非常熱門的開源項(xiàng)目。它由動(dòng)態(tài)CSS語言Less寫成，主要包括了全局CSS樣式、組件、JavaScript插件和定制四大部分。CSS樣式提供了很多常用的樣式，開發(fā)者通過直接引用類名，就可方便地設(shè)置網(wǎng)頁的各類CSS樣式，以及設(shè)計(jì)出先進(jìn)的柵格系統(tǒng)；組件部分提供了大量可重復(fù)使用的組件，包括字體圖標(biāo)、下拉菜單、導(dǎo)航、警告框、彈出框等多種的功能；JavaScript插件為 Bootstrap 的組件賦予了“生命”。可以簡單地一次性引入所有插件，或者逐個(gè)引入到頁面中；框架還可通過自定義Bootstrap 組件、Less 變量和 jQuery 插件，定制一份屬于自己的 Bootstrap 版本[2]。

2.2 Bootstrap框架的特點(diǎn)

Bootstrap框架能很好地適應(yīng)各種設(shè)備，且應(yīng)用簡單，上手速度快。其主要具有以下幾個(gè)特點(diǎn)：

1）開發(fā)速度快，容易上手。Bootstrap集成了很多的樣式、組件和插件，只要簡單地引用即可得到需要的網(wǎng)頁設(shè)計(jì)，不需要另外編寫大量的代碼。而且對于使用人員而言，只要掌握簡單的HTML和CSS語法便很容易使用。

2）移動(dòng)優(yōu)先，兼容性好。Bootstrap框架提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，運(yùn)用該柵格系統(tǒng)可便捷地讓網(wǎng)頁適應(yīng)不同特性的顯示設(shè)備。不僅支持主流的瀏覽器，而且還充分貫徹了移動(dòng)優(yōu)先的宗旨，全面支持移動(dòng)平臺的開發(fā)。

3）插件豐富，且易于修改。Bootstrap框架內(nèi)置了豐富的jQuery插件，是基于jQuery進(jìn)行個(gè)性化完善的一套框架，使用者可以便捷地實(shí)現(xiàn)各種響應(yīng)式功能[3]。同時(shí)，該框架的代碼編寫非常簡潔，便于開發(fā)者對樣式進(jìn)行修改，以實(shí)現(xiàn)個(gè)性化網(wǎng)頁的設(shè)計(jì)。

3 Bootstrap響應(yīng)式設(shè)計(jì)在大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)的具體應(yīng)用

鑒于移動(dòng)端瀏覽逐漸普及的趨勢，以及在綜合分析多種智能終端設(shè)備的環(huán)境以及考慮后期維護(hù)、人力技術(shù)成本的前提下，課題組決定采用Bootstrap框架對學(xué)校大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)進(jìn)行響應(yīng)式設(shè)計(jì)和開發(fā)。

3.1 設(shè)計(jì)方案

響應(yīng)式網(wǎng)頁設(shè)計(jì)能自適應(yīng)各種終端設(shè)備，這也決定了其與傳統(tǒng)PC網(wǎng)頁相比在前期網(wǎng)頁設(shè)計(jì)上最大的不同是要兼顧不同尺寸的終端設(shè)備。雖然響應(yīng)式的重要特點(diǎn)之一便是移動(dòng)優(yōu)先，但是考慮到大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)站的很多訪問者還是通過PC端進(jìn)行瀏覽，所以在設(shè)計(jì)過程中，采用了以PC瀏覽為主、兼顧移動(dòng)瀏覽為輔的思路進(jìn)行設(shè)計(jì)。大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)站在改版設(shè)計(jì)過程中，盡量保留了原網(wǎng)站的主體內(nèi)容，但是在界面上進(jìn)行了精心的設(shè)計(jì)。大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)設(shè)計(jì)主要分為header頭部導(dǎo)航、section網(wǎng)頁主體、footer網(wǎng)頁底部三部分內(nèi)容。其中，header頭部包含logo信息和網(wǎng)頁主菜單，section主體部分包含了大圖展示以及各欄目信息模塊，footer底部主要就是簡單的版權(quán)信息。在傳統(tǒng)的PC端瀏覽中，大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)主要采取經(jīng)典的三欄顯示布局。而在小屏幕的移動(dòng)瀏覽中則采用單欄式瀑布流的方式進(jìn)行優(yōu)化顯示[4]。

3.2 網(wǎng)頁設(shè)計(jì)與開發(fā)

3.2.1 Bootstrap框架的下載與應(yīng)用

Bootstrap的安裝非常便捷，其官網(wǎng)上提供了未編譯的源代碼和預(yù)編譯的壓縮版本。為了使用方便，大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)使用的是Bootstrap的預(yù)編譯版本。預(yù)編譯的 Bootstrap主要包含了已編譯的 CSS 和 JS（bootstrap.*），以及已編譯壓縮的 CSS 和 JS（bootstrap.min.*），同時(shí)也包含了 Glyphicons 的字體。為了讓 Bootstrap 開發(fā)的網(wǎng)站對移動(dòng)設(shè)備友好，確保適當(dāng)?shù)睦L制和觸屏縮放，需要在網(wǎng)頁的 head 之中添加 viewport meta 標(biāo)簽，如下所示：

同時(shí)為了使其成為一個(gè)Bootstrap模板，需要包含響應(yīng)的CSS和JS文件，加入如下文件，就可以開始用Bootstrap開發(fā)網(wǎng)站和應(yīng)用程序了。

3.2.2 頁面框架和布局設(shè)計(jì)

網(wǎng)頁方案設(shè)計(jì)好之后，便著力實(shí)現(xiàn)網(wǎng)頁的基本框架和布局設(shè)計(jì)。創(chuàng)業(yè)服務(wù)網(wǎng)主要采用HTML5進(jìn)行整體框架建設(shè)，大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)在傳統(tǒng)的PC端瀏覽中顯示的是三欄布局，而在小屏幕的手機(jī)端的瀏覽中顯示的是單欄的布局，主要采用的是基于Bootstrap的柵格式布局，網(wǎng)站的結(jié)構(gòu)代碼大致如下：

至此，基于Bootstrap的大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)響應(yīng)式框架基本完成，只需在對應(yīng)的模塊添加對應(yīng)的代碼便可得到想要的效果。鑒于不同的設(shè)備，屏幕的寬度、比例都不一樣，為了使網(wǎng)頁能適應(yīng)不同的屏幕尺寸，Bootstrap主要通過其媒體查詢有效地解決問題。如上代碼中，主要引用了class=“col-sm-4”樣式，使大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)在大中屏幕主體內(nèi)容按照4∶4∶4的比例分三欄顯示，而在小屏幕的瀏覽中，主體內(nèi)容單欄顯示。同時(shí)，針對在IE9以下的瀏覽器對HTML5不能完全兼容的問題，采用引入html5.min.js和respond.min.js文件進(jìn)行解決[5]。

3.2.3 導(dǎo)航菜單的響應(yīng)式設(shè)計(jì)

在傳統(tǒng)的PC瀏覽中，因?yàn)槠聊豢臻g充足，一般主菜單都全部顯示出來，而在移動(dòng)手機(jī)端瀏覽中，因?yàn)槠聊槐容^小，所以一般都是折疊起來的。大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)的主菜單主要包含有首頁、中心簡介、新聞動(dòng)態(tài)、通知公告、基地項(xiàng)目、政策文件、專項(xiàng)宣傳、合作共贏等欄目，同時(shí)，包含有網(wǎng)站LOGO，主要通過采用Bootstrap的折疊導(dǎo)航菜單實(shí)現(xiàn)，其實(shí)現(xiàn)關(guān)鍵代碼如下：

該響應(yīng)式菜單主要應(yīng)用了Bootstrap框架中的媒體查詢@media、navbar-toggler樣式和 data-toggle屬性實(shí)現(xiàn)導(dǎo)航的折疊功能，當(dāng)菜單在屏幕尺寸小于768px時(shí)，菜單實(shí)現(xiàn)響應(yīng)式的折疊導(dǎo)航。

3.2.4 前端優(yōu)化和系統(tǒng)整合

基于Bootstrap的大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)的前端的響應(yīng)式設(shè)計(jì)已基本完成，對于一些細(xì)節(jié)還需要進(jìn)一步進(jìn)行優(yōu)化，比如為了讓不同設(shè)備對圖片有更好的兼容和顯示，對圖片采用了img-fluid樣式。同時(shí)，前端的設(shè)計(jì)也僅僅只是完成靜態(tài)的設(shè)計(jì)，還需要嵌入對應(yīng)的代碼，真正實(shí)現(xiàn)網(wǎng)站信息的動(dòng)態(tài)發(fā)布、查詢等功能。

3.3 調(diào)試與效果展示

調(diào)試是網(wǎng)站建設(shè)的重要環(huán)節(jié)，便于進(jìn)一步發(fā)現(xiàn)問題并修正。對初步搭建完成的廣西農(nóng)業(yè)職業(yè)集團(tuán)網(wǎng)進(jìn)行了調(diào)試，首先在360、IE、谷歌、火狐等常用瀏覽器進(jìn)行了調(diào)試，測試網(wǎng)頁是否存在錯(cuò)位等現(xiàn)象。然后利用谷歌瀏覽器提供的模擬各種不同設(shè)備尺寸的窗口進(jìn)行響應(yīng)式的測試。最后，還通過在PC、平板電腦以及不同尺寸的手機(jī)上進(jìn)行測試，以充分保證網(wǎng)站的正常運(yùn)行。

4 結(jié)語

仿真結(jié)果表明，Bootstrap作為一款優(yōu)秀的前端開發(fā)框架，其代碼開源，且具有很強(qiáng)的靈活性和擴(kuò)展性，利用它能高效便捷地實(shí)現(xiàn)各類響應(yīng)網(wǎng)頁的設(shè)計(jì)與開發(fā)。課題組基于Bootstrap框架高效便捷地對大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)進(jìn)行了響應(yīng)式的改版設(shè)計(jì)，為大學(xué)生創(chuàng)業(yè)服務(wù)信息的發(fā)布、資源的共享和信息化建設(shè)提供服務(wù)。此外，隨著移動(dòng)設(shè)備的廣泛使用，響應(yīng)式網(wǎng)頁也成為當(dāng)前網(wǎng)頁設(shè)計(jì)開發(fā)的必然趨勢，而Bootstrap的出現(xiàn)，讓廣大開發(fā)者能夠以較小的代價(jià)完成響應(yīng)式網(wǎng)頁的前端設(shè)計(jì)，且能給用戶帶來了更好的體驗(yàn)感，值得大力推廣。