Bootstrap技術在Web移動開發中的應用研究

潘惠蘋

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

關鍵詞： Bootstrap技術; Web移動開發; 網頁

中圖分類號：TP3? ? ? ? ? 文獻標志碼：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移動開發過程中，需要在Bootstrap技術基礎上，通過的良好的技術準備以及相應的開發工作，完成對移動端的有效開發工作，使網頁設計能夠適應不同設備的屏幕。本文對Web移動開發設計進行了簡單概述，通過對響應式網頁設計的探討，以及對彈性化設計的分析等，實現對移動設備的完美兼容，能夠更好地完成Web移動開發工作。

1 Web移動開發設計的簡單概述

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

2 Web移動開發分析

2.1 響應式網頁設計概述

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

2.2 彈性化設計分析

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

2.3 媒體查詢服務

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

2.4 流式布局

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

3 Bootstrap框架

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

4 Bootstrap在Web開發設計中的應用

4.1 創建Bootstrap生產開發環境

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

4.2 設計優化

為了達到良好的設計效果，需要根據實際情況優化，如Web頁面設計效果圖，需要編寫自定義的html代碼結構來優化，只有這樣才能夠根據實際情況，做好相應的代碼設計，使html語義化。還可通過添加修改的CSS代碼，使其能夠實現Web的前端效果。設計人員之間應加強溝通，并對設計工作進行總結，對存在的問題進行綜合分析，根據分析結果，尋找到代碼結構與頁面效果兩者之間的平衡點從而獲得較為理想設計效果[4]。

4.3 Bootstrap技術在Web移動開發中的應用技巧

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

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

4.4 移動設備兼容代碼設置

為了能夠的讓網頁適應不同尺寸的設備需要在中添加代碼，如下：

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

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

4.5 實流式布局

在Bootstrap框架中采用柵格系統能實現頁面的流式布局。所謂的柵格系統就是通過一系列的行與列的組合，創建頁面布局，將頁面內容放到創建好的布局正當中，就能夠實現對各種屏幕兼容。網格系統原理相對來說較為簡單，通過對容器定義其大小，平分為12份等等，通過流式布來對不同屏幕規格的設備進行列寬的控制，并通過CSS樣式實現的無縫變換，從而獲得較為理想的顯示效果[6]。

5 總結

綜上所述，在Web移動開發中需要采用Bootstrap技術作為重要框架體系，首先需要創建Bootstrap開發環境，并按照相關要求進行設計優化工作，還要注意在Web移動開發中的應用技巧，從而能夠很好的實現相應的移動開發工作，使其能夠用各種屏幕尺寸下的移動設備，從而達到更加良好的視覺體驗。

參考文獻（References）：

[1] 羅宏俊，馮瑞.基于Web技術進行移動應用開發和中間件的研究[J].計算機系統應用，2017.11：19-27

[2] 徐曉.基于Bootstrap技術的移動端Web開發研究[J].微型電腦應用，2018.9：4-6

[3] 余楷鑫.Bootstrap在Web移動開發中的應用[J].電腦知識與技術，2017.6：82-84

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

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

[6] 舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應式網頁設計與實現[J].北京印刷學院學報，2016.2：47-52