潘惠蘋(píng)

摘? 要： 移動(dòng)設(shè)備的迅速普及和快速發(fā)展，對(duì)網(wǎng)頁(yè)的開(kāi)發(fā)設(shè)計(jì)工作提出了新的要求。在過(guò)去，由于上網(wǎng)設(shè)備單一，網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)相對(duì)簡(jiǎn)單，但是隨著移動(dòng)設(shè)備的占比不斷增長(zhǎng)，對(duì)網(wǎng)頁(yè)的兼容性要求越來(lái)越高，需要開(kāi)發(fā)者能夠在Bootstrap框架下做好web移動(dòng)開(kāi)發(fā)工作，只有這樣才能讓網(wǎng)頁(yè)適應(yīng)更多的設(shè)備，從而達(dá)到更好的視覺(jué)體驗(yàn)。

關(guān)鍵詞： Bootstrap技術(shù); Web移動(dòng)開(kāi)發(fā); 網(wǎng)頁(yè)

中圖分類(lèi)號(hào)：TP3? ? ? ? ? 文獻(xiàn)標(biāo)志碼：A? ? ?文章編號(hào)：1006-8228（2019）05-27-03

Abstract： With the rapid popularization and rapid development of mobile devices， new requirements have been put forward for the development and design of Web pages. In the past， Web design and development was relatively simple because of the single Internet devices. However， with the increasing proportion of mobile devices， the requirement for Web page compatibility is getting higher and higher. In order to make the web pages adapt to more devices， the developers are required to be well done with mobile Web development within the Bootstrap framework， so as to achieve a better visual experience.

Key words： Bootstrap technology; mobile Web development; Web page

0 引言

在Web移動(dòng)開(kāi)發(fā)過(guò)程中，需要在Bootstrap技術(shù)基礎(chǔ)上，通過(guò)的良好的技術(shù)準(zhǔn)備以及相應(yīng)的開(kāi)發(fā)工作，完成對(duì)移動(dòng)端的有效開(kāi)發(fā)工作，使網(wǎng)頁(yè)設(shè)計(jì)能夠適應(yīng)不同設(shè)備的屏幕。本文對(duì)Web移動(dòng)開(kāi)發(fā)設(shè)計(jì)進(jìn)行了簡(jiǎn)單概述，通過(guò)對(duì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的探討，以及對(duì)彈性化設(shè)計(jì)的分析等，實(shí)現(xiàn)對(duì)移動(dòng)設(shè)備的完美兼容，能夠更好地完成Web移動(dòng)開(kāi)發(fā)工作。

1 Web移動(dòng)開(kāi)發(fā)設(shè)計(jì)的簡(jiǎn)單概述

我國(guó)的智能移動(dòng)終端普及率不斷提高，迎來(lái)了的移動(dòng)互聯(lián)網(wǎng)發(fā)展的高峰，在這個(gè)階段，傳統(tǒng)的網(wǎng)站內(nèi)容提供商，需要優(yōu)化自身網(wǎng)站的頁(yè)面，使其不僅能夠適應(yīng)傳統(tǒng)的桌面設(shè)備，也能夠支持移動(dòng)設(shè)備，實(shí)現(xiàn)良好的兼容，從而提高網(wǎng)站的易用性。幫助企業(yè)順利的推廣自身，同時(shí)也能幫助人們以較為舒適的狀態(tài)瀏覽的網(wǎng)站。因此，Web移動(dòng)開(kāi)發(fā)設(shè)計(jì)適用于那些沒(méi)有足夠的資金和技術(shù)能力來(lái)實(shí)現(xiàn)移動(dòng)程序開(kāi)發(fā)的用戶(hù)和企業(yè)，同時(shí)對(duì)于一些互聯(lián)網(wǎng)公司而言，也是必須要考慮的開(kāi)發(fā)方向。這些都是對(duì)Web前端工程師的考驗(yàn)，只有出色的設(shè)計(jì)和良好的內(nèi)容，才能夠?yàn)榻窈笠苿?dòng)互聯(lián)網(wǎng)的迅猛發(fā)展提供重要的技術(shù)鋪墊[1]。

2 Web移動(dòng)開(kāi)發(fā)分析

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

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)，需要其網(wǎng)頁(yè)能夠根據(jù)移動(dòng)設(shè)備尺寸、屏幕分辨率、屏幕方向等眾多參數(shù)（其中也包括用戶(hù)的具體需求等），來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行優(yōu)化，使其能適應(yīng)這些設(shè)備。從而能夠?qū)Ω鞣N設(shè)備進(jìn)行良好的兼容即有效的適應(yīng)不同類(lèi)型的設(shè)備，如PC機(jī)、平板電腦或者智能手機(jī)等等。根據(jù)實(shí)際設(shè)備的具體參數(shù)，對(duì)分辨率，頁(yè)面布局以及顯示方向等，都能夠適應(yīng)設(shè)備的屏幕，從而達(dá)到較為理想的顯示效果。根據(jù)各種設(shè)備對(duì)網(wǎng)頁(yè)的訪(fǎng)問(wèn)量來(lái)看，移動(dòng)端占比更為龐大，為了能夠得到快速的相應(yīng)速度，需要的遵循“移動(dòng)優(yōu)先”的原則進(jìn)行，盡可能的滿(mǎn)足的移動(dòng)端設(shè)備。在具體設(shè)計(jì)中，應(yīng)該以用戶(hù)體驗(yàn)為核心要素。并圍繞其展開(kāi)一定的布局和設(shè)計(jì)。然后，再考慮PC端設(shè)備，從而能夠達(dá)到良好的適應(yīng)效果[5]。

2.2 彈性化設(shè)計(jì)分析

在進(jìn)行響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，需要的網(wǎng)頁(yè)設(shè)計(jì)具有一定的彈性化，使其網(wǎng)絡(luò)頁(yè)面的展示效果能夠根據(jù)設(shè)備尺寸的大小進(jìn)行必要的切換，在不同設(shè)備下圖片的大小可以實(shí)現(xiàn)自適應(yīng)布局，大小可以自動(dòng)調(diào)整，達(dá)到最佳的閱讀效果。這樣避免了頁(yè)面割裂現(xiàn)象而破壞整體顯示效果，以及對(duì)數(shù)據(jù)的使用過(guò)程在造成非常不利的影響。因此，在實(shí)際的應(yīng)用過(guò)程中，響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)，雖然不是最完美的解決方案，但也能夠在一定程度上為用戶(hù)訪(fǎng)問(wèn)網(wǎng)頁(yè)提供一個(gè)很好的解決方案。

2.3 媒體查詢(xún)服務(wù)

媒體查詢(xún)服務(wù)在實(shí)際的Web開(kāi)發(fā)設(shè)計(jì)過(guò)程中有著重要的應(yīng)用。媒體查詢(xún)服務(wù)需要根據(jù)不同的設(shè)備媒體類(lèi)型以及顯示條件針定義CSS樣式表（又稱(chēng)之為層疊樣式表）。在實(shí)現(xiàn)響應(yīng)式的過(guò)程中，可以通過(guò)媒體查詢(xún)服務(wù)，利用層疊樣式表中的規(guī)章，指定媒體類(lèi)型，使頁(yè)面能夠在不同的媒體類(lèi)型下表現(xiàn)出不同的形式。在CSS、HTML和XML中都可以進(jìn)行媒體查詢(xún)?cè)O(shè)置。其中主要在CSS應(yīng)用較多，通過(guò)對(duì)其進(jìn)行適當(dāng)?shù)脑O(shè)計(jì)可以很方便的實(shí)現(xiàn)不同的頁(yè)面設(shè)置規(guī)則。從而能夠達(dá)到相關(guān)設(shè)計(jì)要求。

2.4 流式布局

傳統(tǒng)PC端口的固定布局最外層的寬度是固定的，無(wú)論是處于怎樣的環(huán)境中，其寬度都不會(huì)變化即都是一樣的。這樣在制作過(guò)程中更容易對(duì)整體界面進(jìn)行優(yōu)化，從而能制作出相對(duì)優(yōu)良的頁(yè)面布局。PC端口的固定布局這種相對(duì)的兼容性較差，并不能完美適配各種設(shè)備。但是流式布局能夠有效解決這一問(wèn)題，其外部容器的寬度能夠適應(yīng)設(shè)備屏幕，從而在達(dá)到良好的表現(xiàn)效果。因此在進(jìn)行移動(dòng)開(kāi)發(fā)的過(guò)程中，不能將頁(yè)面中各個(gè)組成的寬度設(shè)置為固定值，應(yīng)當(dāng)采用百分比。使其能夠適應(yīng)屏幕尺寸大小，從而在設(shè)備進(jìn)行訪(fǎng)問(wèn)頁(yè)面的時(shí)候能夠和設(shè)備窗口相適應(yīng)。還要利用CSS中的元素浮動(dòng)屬性，當(dāng)顯示設(shè)備的分辨率發(fā)生變化時(shí)，相應(yīng)的顯示內(nèi)容也會(huì)根據(jù)頁(yè)面的寬度進(jìn)行變化，從而能夠自動(dòng)調(diào)整寬度，適應(yīng)屏幕的變化[2]。

3 Bootstrap框架

Bootstrap是通過(guò)Twitter設(shè)計(jì)和開(kāi)發(fā)的網(wǎng)頁(yè)開(kāi)發(fā)框架，其中包含了HTML、CSS等。其設(shè)計(jì)初衷是為了解決在不同設(shè)備下的兼容問(wèn)題，如果按照傳統(tǒng)技術(shù)進(jìn)行開(kāi)發(fā)，是很難實(shí)現(xiàn)的。而B(niǎo)ootstrap的有效利用，使其很好的解決這一問(wèn)題，能夠有效的適應(yīng)不同設(shè)備的開(kāi)發(fā)環(huán)境，讓相應(yīng)的網(wǎng)頁(yè)開(kāi)發(fā)工作變得較為容易，并且基于的Bootstrap框架下開(kāi)發(fā)的網(wǎng)頁(yè)以及相關(guān)產(chǎn)品，具有一定的可維護(hù)性，正是這些優(yōu)點(diǎn)，讓Bootstrap技術(shù)得到了迅猛發(fā)展，其提供了豐富多彩的開(kāi)發(fā)模塊，為各種功能的實(shí)現(xiàn)提供了多種方法，能夠有效的幫助開(kāi)發(fā)人員做好的網(wǎng)頁(yè)的開(kāi)發(fā)工作。

4 Bootstrap在Web開(kāi)發(fā)設(shè)計(jì)中的應(yīng)用

4.1 創(chuàng)建Bootstrap生產(chǎn)開(kāi)發(fā)環(huán)境

為了能夠有效的完成相應(yīng)的Web前期開(kāi)發(fā)，下載Bootstrap，根據(jù)相應(yīng)的文件結(jié)構(gòu)進(jìn)行合理的安排，采用Bootstrap基本模板進(jìn)行網(wǎng)頁(yè)的開(kāi)發(fā)工作。其中的文件類(lèi)型要注意其具有一定的次序，如js要放在body之前，對(duì)于其中的jQuery.min.js要首先加載，進(jìn)行元素的填充工作，并利用系統(tǒng)提供的組件進(jìn)行排版，從而有效的完成相應(yīng)的填充工作，最后需要在不同的設(shè)備進(jìn)行必要的測(cè)試，使其能夠達(dá)到相應(yīng)的要求。

4.2 設(shè)計(jì)優(yōu)化

為了達(dá)到良好的設(shè)計(jì)效果，需要根據(jù)實(shí)際情況優(yōu)化，如Web頁(yè)面設(shè)計(jì)效果圖，需要編寫(xiě)自定義的html代碼結(jié)構(gòu)來(lái)優(yōu)化，只有這樣才能夠根據(jù)實(shí)際情況，做好相應(yīng)的代碼設(shè)計(jì)，使html語(yǔ)義化。還可通過(guò)添加修改的CSS代碼，使其能夠?qū)崿F(xiàn)Web的前端效果。設(shè)計(jì)人員之間應(yīng)加強(qiáng)溝通，并對(duì)設(shè)計(jì)工作進(jìn)行總結(jié)，對(duì)存在的問(wèn)題進(jìn)行綜合分析，根據(jù)分析結(jié)果，尋找到代碼結(jié)構(gòu)與頁(yè)面效果兩者之間的平衡點(diǎn)從而獲得較為理想設(shè)計(jì)效果[4]。

4.3 Bootstrap技術(shù)在Web移動(dòng)開(kāi)發(fā)中的應(yīng)用技巧

在使用Bootstrap的過(guò)程中，需要研究源代碼，例如基于Bootstrap的源代碼，在使用過(guò)程中需要遵循一定的使用規(guī)范，使其在使用和維護(hù)的過(guò)程中都能夠較為舒適，這需要技巧。如CSS聲明順利，屬性相同應(yīng)當(dāng)歸為一組，從而更好地完成相應(yīng)的順序排列。如positioning、box model、visual等等，還有相應(yīng)的命名規(guī)范，需要參照Bootstrap源代碼命名規(guī)則，使其能夠添加和修改CSS代碼，如下：

為了能夠使用媒體查詢(xún)，可以把相關(guān)代碼放在一起，使其能夠方便閱讀和維護(hù)。從而提高代碼效率，降低冗余出錯(cuò)率[3]。

4.4 移動(dòng)設(shè)備兼容代碼設(shè)置

為了能夠的讓網(wǎng)頁(yè)適應(yīng)不同尺寸的設(shè)備需要在中添加代碼，如下：

Content="width-device=width，initial-scale-1.0">

這段代碼的有效引入，可以讓網(wǎng)頁(yè)智能化排版，適應(yīng)不同尺寸的移動(dòng)端設(shè)備。另外，使設(shè)計(jì)元素的比例保持不變。如對(duì)超小屏幕、小屏幕、中等屏幕以及大屏幕等，通過(guò)對(duì)不同屏幕的有效支持，能夠完成對(duì)相關(guān)設(shè)備的良好支持[2]。

4.5 實(shí)流式布局

在Bootstrap框架中采用柵格系統(tǒng)能實(shí)現(xiàn)頁(yè)面的流式布局。所謂的柵格系統(tǒng)就是通過(guò)一系列的行與列的組合，創(chuàng)建頁(yè)面布局，將頁(yè)面內(nèi)容放到創(chuàng)建好的布局正當(dāng)中，就能夠?qū)崿F(xiàn)對(duì)各種屏幕兼容。網(wǎng)格系統(tǒng)原理相對(duì)來(lái)說(shuō)較為簡(jiǎn)單，通過(guò)對(duì)容器定義其大小，平分為12份等等，通過(guò)流式布來(lái)對(duì)不同屏幕規(guī)格的設(shè)備進(jìn)行列寬的控制，并通過(guò)CSS樣式實(shí)現(xiàn)的無(wú)縫變換，從而獲得較為理想的顯示效果[6]。

5 總結(jié)

綜上所述，在Web移動(dòng)開(kāi)發(fā)中需要采用Bootstrap技術(shù)作為重要框架體系，首先需要?jiǎng)?chuàng)建Bootstrap開(kāi)發(fā)環(huán)境，并按照相關(guān)要求進(jìn)行設(shè)計(jì)優(yōu)化工作，還要注意在Web移動(dòng)開(kāi)發(fā)中的應(yīng)用技巧，從而能夠很好的實(shí)現(xiàn)相應(yīng)的移動(dòng)開(kāi)發(fā)工作，使其能夠用各種屏幕尺寸下的移動(dòng)設(shè)備，從而達(dá)到更加良好的視覺(jué)體驗(yàn)。

參考文獻(xiàn)（References）：

[1] 羅宏俊，馮瑞.基于Web技術(shù)進(jìn)行移動(dòng)應(yīng)用開(kāi)發(fā)和中間件的研究[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2017.11：19-27

[2] 徐曉.基于Bootstrap技術(shù)的移動(dòng)端Web開(kāi)發(fā)研究[J].微型電腦應(yīng)用，2018.9：4-6

[3] 余楷鑫.Bootstrap在Web移動(dòng)開(kāi)發(fā)中的應(yīng)用[J].電腦知識(shí)與技術(shù)，2017.6：82-84

[4] 丁蓮，張玲，杜巍.基于BootStrap的Web前端開(kāi)發(fā)應(yīng)用研究[J].電子制作，2016.10x：43-43

[5] 鐘葉.Bootstrap框架在響應(yīng)式Web開(kāi)發(fā)中的應(yīng)用與研究[J].科技廣場(chǎng)，2017.2：26-28

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