Bootstrap技術(shù)在Web移動開發(fā)中的應(yīng)用研究

潘惠蘋

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

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

中圖分類號：TP3? ? ? ? ? 文獻(xiàn)標(biāo)志碼：A? ? ?文章編號：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移動開發(fā)過程中，需要在Bootstrap技術(shù)基礎(chǔ)上，通過的良好的技術(shù)準(zhǔn)備以及相應(yīng)的開發(fā)工作，完成對移動端的有效開發(fā)工作，使網(wǎng)頁設(shè)計(jì)能夠適應(yīng)不同設(shè)備的屏幕。本文對Web移動開發(fā)設(shè)計(jì)進(jìn)行了簡單概述，通過對響應(yīng)式網(wǎng)頁設(shè)計(jì)的探討，以及對彈性化設(shè)計(jì)的分析等，實(shí)現(xiàn)對移動設(shè)備的完美兼容，能夠更好地完成Web移動開發(fā)工作。

1 Web移動開發(fā)設(shè)計(jì)的簡單概述

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

2 Web移動開發(fā)分析

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

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

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

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

2.3 媒體查詢服務(wù)

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

2.4 流式布局

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

3 Bootstrap框架

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

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

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

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

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

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

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

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

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

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

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

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

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

4.5 實(shí)流式布局

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

5 總結(jié)

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

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

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

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

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

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

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

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