劉志東　陳天偉

摘要；移動智能設(shè)備的廣泛應(yīng)用，使得網(wǎng)頁的設(shè)計要求必須滿足移動設(shè)備端的完美呈現(xiàn)。該文在研究響應(yīng)式網(wǎng)頁設(shè)計的基礎(chǔ)上，結(jié)合Bootstrap框架，以個人博客頁面的響應(yīng)式設(shè)計與實現(xiàn)為例，闡述了響應(yīng)式網(wǎng)頁設(shè)計的設(shè)計思想，說明了Bootstrap框架的在應(yīng)用中的實現(xiàn)過程。采用基于Bootstrap框架的響應(yīng)式網(wǎng)頁開發(fā)，不但可以縮短開發(fā)周期，提高開發(fā)效率，還可以使網(wǎng)頁適應(yīng)千差萬別的移動設(shè)備，具有廣泛應(yīng)用前景。

關(guān)鍵詞：Bootstrap；響應(yīng)式設(shè)計；HTMI～；媒體查詢

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2017）07-0085-03

1背景

互聯(lián)網(wǎng)進入Web2.0時代，同時隨著移動通信技術(shù)的發(fā)展，越來越多的智能移動終端廣泛地應(yīng)用于各個行業(yè)，促使互聯(lián)網(wǎng)應(yīng)用必須適應(yīng)移動終端的需要轉(zhuǎn)向移動平臺方向。目前移動終端種類繁多，如智能手機、智能手表，平板電腦等，移動終端與PC端最大的不同之處就是設(shè)備屏幕尺寸要小，同時不同設(shè)備的分辨率和尺寸也存在差異，PC端頁面在移動終端上無法直接呈現(xiàn)。對于用戶而言，要求在不同系統(tǒng)平臺、不同設(shè)備尺寸、不同分辨率下，訪問的頁面都應(yīng)該保持良好的布局性。為了滿足用戶對訪問頁面的一致性的體驗要求，開發(fā)人員提出了基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計理念，利用網(wǎng)頁框架的通用模板，為用戶設(shè)計能夠自動適應(yīng)不同設(shè)備需要的頁面，提升了用戶的體驗。

2響應(yīng)式網(wǎng)頁設(shè)計

2.1概述

響應(yīng)式網(wǎng)頁設(shè)計是指在設(shè)計和開發(fā)頁面過程中，根據(jù)頁面的應(yīng)用設(shè)備的尺寸、系統(tǒng)平臺、分辨率、屏幕方向等，以及用戶的需要能夠?qū)υO(shè)備顯示頁面進行相應(yīng)的布局和呈現(xiàn)。響應(yīng)式開發(fā)設(shè)計的頁面，在能夠在用戶使用不同的設(shè)備（如PC機、平板電腦或者智能手機）進行頁面瀏覽時，能夠根據(jù)設(shè)備的顯示需要，對顯示分辨率、頁面布局、顯示方向等內(nèi)容進行自動調(diào)制，適應(yīng)設(shè)備需要，展示最佳顯示效果。響應(yīng)式網(wǎng)頁開發(fā)的核心設(shè)計思想就是“移動優(yōu)先、漸進增強”。所謂“移動優(yōu)先”是指在對頁面進行設(shè)計時，充分考慮移動終端尺寸、分辨率的多樣性，先對移動終端的頁面效果進行設(shè)計，能夠適應(yīng)移動終端的布局和用戶體驗，再來考慮PC端的頁面效果，這樣對提升網(wǎng)頁開發(fā)效率是有益的。而“漸進增強”是指在優(yōu)先考慮移動終端設(shè)備的前提下，頁面顯示效果從小尺寸逐漸向大尺寸轉(zhuǎn)換，逐步進行開發(fā)。在小尺寸的有限顯示空間內(nèi)，頁面內(nèi)容要突出顯示，而內(nèi)容表現(xiàn)則要簡化，隨著尺寸的增多，在頁面內(nèi)容不變的前提下，提升內(nèi)容表現(xiàn)，使頁面展示效果越來越豐富。

2.2核心技術(shù)

1）彈性化

通過響應(yīng)式網(wǎng)頁設(shè)計開發(fā)的頁面具有很強的“彈性化”。頁面展示效果根據(jù)設(shè)備尺寸的變化能夠展現(xiàn)不同的頁面布局與效果，在不同尺寸設(shè)備下，圖片的大小可以自動調(diào)整，頁面內(nèi)容可以自動調(diào)整布局，不會再出現(xiàn)頁面整體效果被破壞的情況。但是基于響應(yīng)式的頁面開發(fā)并不一定是最完美的，但是從目前來說，能夠給用戶在不同設(shè)備下訪問網(wǎng)頁提供一個不錯的用戶體驗。

2）媒體查詢

媒體查詢是實現(xiàn)頁面響應(yīng)式開發(fā)的關(guān)鍵內(nèi)容。根據(jù)不同設(shè)備媒體類型和顯示條件，首先定義CSS（層疊樣式表）樣式表。在實現(xiàn)響應(yīng)式的過程中，通過媒體查詢，將CSS樣式表中指定的規(guī)則用于指定媒體類型或指定的條件，這樣就可以使頁面在不同的媒體類型或同一媒體不同條件下呈現(xiàn)出不同樣式表現(xiàn)。在CSS、HTML和XML中都可以進行媒體查詢設(shè)置，通常在CSS中居多，主要應(yīng)用在@media和@import規(guī)則上。通過媒體查詢，不同設(shè)備上可以很方便地實現(xiàn)不同的頁面效果，對于各式各樣的移動設(shè)備而言，具有廣泛的應(yīng)用。

3）流式布局

流式布局主要是相對于固定布局而言，目前PC端頁面開發(fā)采用的主要是固定局部方式。所謂固定布局就是在設(shè)計頁面的過程中，最外層的容器寬度是固定不變的，無論頁面在何種尺寸的設(shè)備中對頁面進行方面，頁面的寬度都是固定不變的，都是一樣的。而流式布局則不同，其外部容器會根據(jù)顯示尺寸自動擴展或縮小，能夠自動適應(yīng)訪問頁面的設(shè)備窗口。要實現(xiàn)流式布局，頁面中各個組成部分的寬度不能采用固定值，而要采用百分比來設(shè)置，同時利用CSS中的元素浮動屬性，當(dāng)設(shè)備尺寸發(fā)生變化時，頁面中的元素會根據(jù)頁面寬度按照設(shè)定的百分比進行自動調(diào)整其寬度和位置，這樣就可以很好的適應(yīng)不同的設(shè)備尺寸。

3Bootstrap

3.1Bootstrap簡介

Bootstrap由Twitter的MarkOtto和Jacob Thornton共同設(shè)計與開發(fā)，它是一個包含了HTML、CSS和JavaScript的響應(yīng)式網(wǎng)頁開發(fā)框架。Bootstrap設(shè)計的目的是解決頁面在不同尺寸設(shè)備下顯示的兼容性問題，如果依據(jù)傳統(tǒng)技術(shù)對網(wǎng)頁進行兼容性的實現(xiàn)是比較困難的，而Bootstrap提供眾多漂亮的樣式可供選擇，而且能夠很好地支持響應(yīng)式網(wǎng)頁開發(fā)，通過Bootstrap框架的輔助，開發(fā)適應(yīng)不同尺寸設(shè)備的網(wǎng)頁變得更加容易和方便。同時，基于Bootstrap框架開發(fā)的響應(yīng)式網(wǎng)頁具有良好的可擴展性和可維護性?；谶@些優(yōu)良的特性，Bootstrap技術(shù)發(fā)展迅速，其可提供的內(nèi)容也更加豐富多樣式，為開發(fā)人員提供了一個開發(fā)響應(yīng)式網(wǎng)頁的良好解決方案。

3.2Bootstrap的優(yōu)勢

Bootstrap框架將HTML、CSS和JavaSeript進行了有機地整合，尤其是其賦予了CSS動態(tài)性，使得基于Bootstrap框架開發(fā)的頁面能夠適應(yīng)不同尺寸設(shè)備的顯示，針對不同尺寸設(shè)備只需開發(fā)一套頁面即可，大大地降低了開發(fā)成本和維護成本，提高了開發(fā)效率。Bootstrap框架中包含了大量的Web組件，支持頁面的導(dǎo)航、進度條、縮略圖、排版等，并且得到了大部分瀏覽器的支持。Bootstrap框架設(shè)計者充分考慮開發(fā)人員在開發(fā)網(wǎng)頁過程中的工作強度，將Bootstrap框架進行了優(yōu)良設(shè)計，Bootstrap代碼編寫簡單，使得頁面開發(fā)人員能夠快速學(xué)習(xí)并輕松使用，大大地提高了頁面開發(fā)的效率，縮短了開發(fā)周期。

4網(wǎng)頁設(shè)計與實現(xiàn)

4.1網(wǎng)頁設(shè)計

本文以個人博客頁面為對象來完成基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)。網(wǎng)站界面設(shè)計要求能夠自適應(yīng)PC機和手機、平板電腦等移動設(shè)備的訪問，同時要求界面美觀大方。在設(shè)計過程中，遵循“移動優(yōu)先”的原則，首先針對移動終端設(shè)備進行頁面設(shè)計，滿足在不同尺寸下的設(shè)備中能夠具有良好的界面效果，在此基礎(chǔ)上確定PC端顯示的布局及樣式。這種移動優(yōu)先的設(shè)計理念基于移動端來開發(fā)，優(yōu)先滿足移動端，從而對PC端的用戶體驗進行了弱化。本文研究對象為個人博客網(wǎng)站，其訪問的環(huán)境主要以PC端為主，兼顧移動端，因此，在對本研究中的網(wǎng)站進行設(shè)計時，采用PC端優(yōu)先的原則來設(shè)計。

針對PC端主要進行如下設(shè)計；

1）導(dǎo)航條位于頁面頂部，同時導(dǎo)航項帶有圖標(biāo)效果。

2）主頁圖片輪播占滿瀏覽器整個窗口寬度。

3）分為四欄，圖片與文字內(nèi)容間隔排布。

4）頁腳水平居中，并位于頁面底端

小尺寸移動終端進行如下設(shè)計：

1）導(dǎo)航欄進行折疊，放入帶有Logo圖片的按鈕中。

2）單欄進行布局，只顯示文字布局，包括標(biāo)題和文字內(nèi)容.

3）頁腳包含其他鏈接。

本文以PC端設(shè)計為主，使用環(huán)境也以PC機為主，因此界面適應(yīng)要求如下：尺寸大于768px的采用PC端布局，小于768px的采用小尺寸布局。

4.2網(wǎng)頁實現(xiàn)

1）HTML5結(jié)構(gòu)的搭建。

Bootstrap框架基于HTML5來完成，包括CSS和JavaScript內(nèi)容。因此網(wǎng)站中的結(jié)構(gòu)要遵循HTML5的基本結(jié)構(gòu)。HTML5的結(jié)構(gòu)如下所示：

2）Bootstrap引入

本網(wǎng)站是基于Bootstrap框架來進行響應(yīng)式網(wǎng)站設(shè)計，若要支持Bootstrap框架的相關(guān)內(nèi)容，必須將其相關(guān)文件引入到頁面中。Bootstrap相關(guān)文件引入按照如下操作：

3）移動設(shè)備兼容

如要使頁面能夠在不同尺寸下展示出符合響應(yīng)尺寸的效果，做到響應(yīng)式頁面，需要在標(biāo)簽中添加如下代碼：

通過引入該行代碼，當(dāng)頁面在不同尺寸設(shè)備上顯示頁面內(nèi)容時，組成頁面的各個元素占頁面的比例保持不變。Bootstrap框架中定義了四種不同尺寸設(shè)備屏幕的大小，分為如下所示；

1）超小屏幕，其屏幕像素小于768像素，前綴為xs。

2）小屏幕，其屏幕像素介于768像素和922像素之間，前綴為$ITl。

3）中等屏幕，其屏幕像素介于922像素和1200像素之間，前綴為md。

4）小屏幕，其屏幕像素大于等于1200像素，前綴為1g。

本網(wǎng)站在媒體查詢中實現(xiàn)的代碼如下：

4）實現(xiàn)流式布局

頁面采用流式布局進行實現(xiàn)。流式布局的實現(xiàn)需要使用Bootstrap框架中的柵格系統(tǒng)。柵格系統(tǒng)就是通過一系列的行與列的組合創(chuàng)建頁面布局，頁面內(nèi)容就可以放入到創(chuàng)建好的布局當(dāng)中。其網(wǎng)格系統(tǒng)的實現(xiàn)原理非常簡單，僅僅是通過定義容器大小，平分12份，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強大的響應(yīng)式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。通過流式布局，針對不同尺寸的設(shè)備設(shè)定相對應(yīng)的樣式表來實現(xiàn)列寬的控制。當(dāng)尺寸發(fā)生變化時，通過調(diào)用css樣式無縫變換。本文實現(xiàn)代碼如下：實現(xiàn)效果如圖1和圖2所示。

5結(jié)束語

本文采用Bootstrap框架技術(shù)實現(xiàn)了個人博客的響應(yīng)式網(wǎng)頁開發(fā)，以PC端優(yōu)先設(shè)計為主，兼顧移動端響應(yīng)，實現(xiàn)響應(yīng)式布局，并將具體網(wǎng)頁內(nèi)容填入到指定部分實現(xiàn)整個網(wǎng)頁?；贐ootstrap框架開發(fā)頁面，要充分利用百分比來對頁面中的元素寬度和間隔距離進行設(shè)置，不能使用像素。同時必須要合理使用媒體查詢功能，兼顧大、中、小不同尺寸的屏幕，并且頁面中應(yīng)用的圖片要具有彈性，適應(yīng)不同尺寸。