Bootstrap響應式設計應用研究*——以大學生創業服務網為例

鄔紫琴 ，盧詩怡 ，張 妮

（廣西農業職業技術學院，廣西 南寧 530007）

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

1 響應式設計理念

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

目前，常見的響應式設計的框架主要有Bootstrap、Foundatiton、GroundworkCSS、Compass CSS 等，這些框架都幾乎使用了響應式網格系統，包涵了豐富的樣式和組件，利用這些框架能夠快速地進行響應式網站的開發。

2 Bootstrap框架

2.1 Bootstrap框架介紹

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

2.2 Bootstrap框架的特點

Bootstrap框架能很好地適應各種設備，且應用簡單，上手速度快。其主要具有以下幾個特點：

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

2）移動優先，兼容性好。Bootstrap框架提供了一套響應式、移動設備優先的流式柵格系統，運用該柵格系統可便捷地讓網頁適應不同特性的顯示設備。不僅支持主流的瀏覽器，而且還充分貫徹了移動優先的宗旨，全面支持移動平臺的開發。

3）插件豐富，且易于修改。Bootstrap框架內置了豐富的jQuery插件，是基于jQuery進行個性化完善的一套框架，使用者可以便捷地實現各種響應式功能[3]。同時，該框架的代碼編寫非常簡潔，便于開發者對樣式進行修改，以實現個性化網頁的設計。

3 Bootstrap響應式設計在大學生創業服務網的具體應用

鑒于移動端瀏覽逐漸普及的趨勢，以及在綜合分析多種智能終端設備的環境以及考慮后期維護、人力技術成本的前提下，課題組決定采用Bootstrap框架對學校大學生創業服務網進行響應式設計和開發。

3.1 設計方案

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

3.2 網頁設計與開發

3.2.1 Bootstrap框架的下載與應用

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

同時為了使其成為一個Bootstrap模板，需要包含響應的CSS和JS文件，加入如下文件，就可以開始用Bootstrap開發網站和應用程序了。

3.2.2 頁面框架和布局設計

網頁方案設計好之后，便著力實現網頁的基本框架和布局設計。創業服務網主要采用HTML5進行整體框架建設，大學生創業服務網在傳統的PC端瀏覽中顯示的是三欄布局，而在小屏幕的手機端的瀏覽中顯示的是單欄的布局，主要采用的是基于Bootstrap的柵格式布局，網站的結構代碼大致如下：

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

3.2.3 導航菜單的響應式設計

在傳統的PC瀏覽中，因為屏幕空間充足，一般主菜單都全部顯示出來，而在移動手機端瀏覽中，因為屏幕比較小，所以一般都是折疊起來的。大學生創業服務網的主菜單主要包含有首頁、中心簡介、新聞動態、通知公告、基地項目、政策文件、專項宣傳、合作共贏等欄目，同時，包含有網站LOGO，主要通過采用Bootstrap的折疊導航菜單實現，其實現關鍵代碼如下：

該響應式菜單主要應用了Bootstrap框架中的媒體查詢@media、navbar-toggler樣式和 data-toggle屬性實現導航的折疊功能，當菜單在屏幕尺寸小于768px時，菜單實現響應式的折疊導航。

3.2.4 前端優化和系統整合

基于Bootstrap的大學生創業服務網的前端的響應式設計已基本完成，對于一些細節還需要進一步進行優化，比如為了讓不同設備對圖片有更好的兼容和顯示，對圖片采用了img-fluid樣式。同時，前端的設計也僅僅只是完成靜態的設計，還需要嵌入對應的代碼，真正實現網站信息的動態發布、查詢等功能。

3.3 調試與效果展示

調試是網站建設的重要環節，便于進一步發現問題并修正。對初步搭建完成的廣西農業職業集團網進行了調試，首先在360、IE、谷歌、火狐等常用瀏覽器進行了調試，測試網頁是否存在錯位等現象。然后利用谷歌瀏覽器提供的模擬各種不同設備尺寸的窗口進行響應式的測試。最后，還通過在PC、平板電腦以及不同尺寸的手機上進行測試，以充分保證網站的正常運行。

4 結語

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