基于Bootstrap的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

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

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

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

2 Bootstrap簡(jiǎn)介

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

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

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

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

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

3.2 網(wǎng)頁(yè)實(shí)現(xiàn)

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

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

3.2.2 Bootstrap引入

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

3.2.3 移動(dòng)設(shè)備兼容

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

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

4 結(jié)束語(yǔ)

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

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

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

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