熊慧 武漢交通職業(yè)學(xué)院電子與信息工程學(xué)院

移動互聯(lián)網(wǎng)技術(shù)在不斷發(fā)展，已進(jìn)入互聯(lián)網(wǎng)新時代。移動通信技術(shù)的進(jìn)步和發(fā)展，各行各業(yè)對智能移動終端的應(yīng)用更加廣泛，使互聯(lián)網(wǎng)的應(yīng)用技術(shù)為適應(yīng)社會和用戶的需要，將轉(zhuǎn)變方向到移動平臺。目前在市面上和用戶手中的移動終端類型較多，如各種智能手機和各種平板電腦等。移動終端與PC段存在著較大的差異，設(shè)備的屏幕尺寸差距較大是最明顯的特征，同一網(wǎng)址在PC端和移動終端顯示的網(wǎng)頁頁面也有所差異。并且移動終端的設(shè)備種類繁多且其屏幕尺寸、分辨率等也有所差別。為了滿足用戶使用不同設(shè)備訪問頁面時的良好體驗，開發(fā)人員提出了以Bootstrap框架為基礎(chǔ)的響應(yīng)式網(wǎng)頁設(shè)計思想和理念，充分利用現(xiàn)有的較為通用的網(wǎng)頁框架設(shè)計模板，為用戶提供和設(shè)計開發(fā)出能適用于不同設(shè)備的頁面，提升用戶的網(wǎng)頁瀏覽體驗。

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

響應(yīng)式網(wǎng)頁設(shè)計是指在設(shè)計研發(fā)網(wǎng)頁頁面的工作中，根據(jù)應(yīng)用設(shè)備的不同尺寸大小、不同的系統(tǒng)、不同的屏幕分辨率等，以及用戶對頁面在設(shè)備上顯示布局和瀏覽體驗的要求。由響應(yīng)式設(shè)計的網(wǎng)頁頁面，能夠滿足用戶在不同設(shè)備上的使用和需要，根據(jù)用戶設(shè)備的系統(tǒng)類型、屏幕分辨率、屏幕尺寸大小等要素對頁面顯示布局進(jìn)行自動調(diào)節(jié)，用戶也可根據(jù)自身的需要在屏幕上對頁面進(jìn)行手動調(diào)節(jié)，為用戶提供良好的瀏覽體驗。

響應(yīng)式網(wǎng)頁研發(fā)設(shè)計的中心設(shè)計理念和思想是:優(yōu)先考慮移動終端、效果逐漸加強。在進(jìn)行頁面的研發(fā)和設(shè)計的時候，設(shè)計優(yōu)先考慮和滿足移動終端，移動終端的屏幕顯示尺寸大小有多種類型，其屏幕分辨率也有多種規(guī)格，設(shè)計開發(fā)和滿足移動終端的頁面顯示效果，適應(yīng)不同移動終端的頁面布局，這樣的設(shè)計安排方式有益于提高網(wǎng)頁設(shè)計開發(fā)的效率和效果。

在優(yōu)先考慮和滿足移動終端的頁面布局顯示效果的基礎(chǔ)上，在滿足移動終端小尺寸屏幕頁面布局的顯示效果的前提下，逐步開發(fā)設(shè)計和滿足更大尺寸屏幕的頁面布局的顯示效果。在小尺寸屏幕的顯示范圍內(nèi)，將頁面應(yīng)有的內(nèi)容顯示出來，但內(nèi)容的顯示形式則較為簡約。隨著屏幕尺寸的增大，可顯示頁面內(nèi)容的空間增大，在不改變頁面顯示內(nèi)容的基礎(chǔ)上，提高頁面內(nèi)容的顯示效果。

2 Bootstrap簡介

Bootstrap由Twitter的MarkOtto和Jacob Thornton合作研究設(shè)計與開發(fā)的，其包括了HTML、CSS和JavaScript的響應(yīng)式網(wǎng)頁設(shè)計開發(fā)框架。Bootstrap設(shè)計的最重要目的是為了使所設(shè)計的頁面能夠良好的顯示在不同屏幕尺寸的設(shè)備上，使頁面能夠兼容于各種屏幕尺寸的設(shè)備。傳統(tǒng)的網(wǎng)頁設(shè)計開發(fā)技術(shù)，難以實現(xiàn)其頁面兼容不同屏幕尺寸設(shè)備。Bootstrap為網(wǎng)頁設(shè)計提供多種類型的模板或樣式，并且適用于響應(yīng)式網(wǎng)頁設(shè)計開發(fā)，Bootstrap框架的使用，可減輕設(shè)計兼容于各種屏幕尺寸設(shè)備的網(wǎng)頁的工作量。并且，以Bootstrap框架為基礎(chǔ)開發(fā)設(shè)計的響應(yīng)式網(wǎng)頁，有著很好的可維護(hù)的性能和擴(kuò)展的性能。以這些良好特點為基礎(chǔ)，Bootstrap技術(shù)得到迅速推廣和發(fā)展，為網(wǎng)頁設(shè)計提供更多類型的模板或樣式，為網(wǎng)頁開發(fā)設(shè)計人員提供了良好輔助。

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

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

本文以研究分析響應(yīng)式網(wǎng)頁設(shè)計為基礎(chǔ)，與Bootstrap框架相結(jié)合，以響應(yīng)式設(shè)計研發(fā)個人博客頁面為例子，簡要講述網(wǎng)頁的響應(yīng)式設(shè)計理念和思想。網(wǎng)站的界面設(shè)計應(yīng)滿足于各種屏幕尺寸設(shè)備的瀏覽，并且要有良好的顯示效果。在網(wǎng)頁開發(fā)設(shè)計的過程中，優(yōu)先考慮和滿足移動終端的頁面布局顯示效果，例如用戶常用的智能手機和平板電腦等，在滿足移動終端小尺寸屏幕頁面布局的顯示效果的前提下，逐步開發(fā)設(shè)計和滿足更大尺寸屏幕的頁面布局的顯示效果，即PC端的頁面設(shè)計和開發(fā)。

本文以PC端的頁面顯示效果設(shè)計為主，網(wǎng)頁的使用環(huán)境主要是考慮在PC機上，因此頁面顯示界面的適應(yīng)要求如下:尺寸大于768px的采用PC端的頁面顯示布局，小于768px的采用小尺寸頁面顯示布局。

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

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

Bootstrap框架是基于HTML5來完成，包括CSS和JavaScript內(nèi)容。因此網(wǎng)站界面的結(jié)構(gòu)設(shè)計要以HTML5為基本結(jié)構(gòu)依據(jù)。

3.2.2 Bootstrap引入

本網(wǎng)站是以Bootstrap框架為基礎(chǔ)進(jìn)行響應(yīng)式網(wǎng)站界面的設(shè)計，若要符合Bootstrap框架的相關(guān)結(jié)構(gòu)形式和內(nèi)容，必須將相應(yīng)的文件或內(nèi)容引入到網(wǎng)站頁面中。

3.2.3 移動設(shè)備兼容

如要使網(wǎng)站頁面能夠適應(yīng)不同屏幕尺寸設(shè)備，展現(xiàn)出良好的顯示效果，成為響應(yīng)式的網(wǎng)頁頁面，則要在標(biāo)簽中加入相對應(yīng)的代碼。

通過加入相對應(yīng)的代碼，當(dāng)網(wǎng)站頁面在不同屏幕尺寸設(shè)備上顯示時，頁面的內(nèi)容和元素會根據(jù)屏幕大小進(jìn)行比例性的顯示。

4 結(jié)束語

用戶在工作、生活中或因條件的限制，其無論使用何種設(shè)備或系統(tǒng)，都希望所訪問的頁面有良好的瀏覽性，網(wǎng)頁設(shè)計的開發(fā)人員也應(yīng)該滿足各種設(shè)備對訪問頁面的兼容性和良好的布局性。設(shè)計研發(fā)人員可利用成熟的前端框架——Bootstrap進(jìn)行響應(yīng)式頁面設(shè)計工作，使網(wǎng)站頁面適用于不同屏幕尺寸大小的設(shè)備，為用戶提供良好的顯示服務(wù)。

[1] 舒后,熊一帆,葛雪嬌.基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)[J].北京印刷學(xué)院學(xué)報,2016, 24(2):47-52.

[2] 何秀全.基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計[J].軟件導(dǎo)刊,2017,16(6):104-105.

[3] 汪紅宇,劉雄輝, 喬波. 基于Bootstrap框架實現(xiàn)響應(yīng)式布局[J].電腦與信息技術(shù),2017,25(5):19-22.