基于Bootstrap的web開發設計研究

馬立豐　劉文輝

摘 要：Web 平臺前端開發設計是現下計算機領域的重要組成部分，有效進行 Web 平臺前端開發設計，不但能夠充分發揮互聯網的優勢，在借助互聯網的基礎上搭建一個良好的平臺，而且也能夠服務多方領域，從而促進多個方面得到良好的進步與發展。需要注意的是，在 Web 平臺前端開發設計過程中，涉及的領域、知識點是涵蓋多個方面，因此，為了實現 Web 平臺前端開展良好的開發設計活動，本論文從不同方面闡述基于Bootstrap的web開發設計研究，希望為研究web開發設計的專家和學者提供理論參考依據。

關鍵詞：Bootstrap；web開發設計；分析

Web 前端開發技術廣泛應用于網頁制作中，是網頁制作的重要技術手段。隨著網頁制作水平的不斷提高及技術的演變，網頁開始開始由靜態內容顯示，逐漸轉變為動態內容顯示，Web 前端開發技術類型越來越豐富。如：Ajax帶來了無刷新數據交互，縮減了網頁跳轉次數，提高了 Web前端應用性能，使單個頁面能完成更多功能。而且 HTML5越來越成熟，JavaScript 應用度越來越高。但 Web 前端開發對代碼質量要求越來越高，所以具體開發中應做好優化工作，科學調整相關參數，以縮短頁面響應時間，提高運行效率。

1 Bootstrap的基本內涵

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。

2 Web 平臺的相關論點探討

2.1合理控制文件大小

文件大小不僅會影響加載速度，更重要的是會影響網頁響應速度及互動性能。若控件文件過大或樣式過多，必然導致響應速度變慢，造成網頁延遲過長，甚至導致網頁崩潰，出現無響應現象。因此，要合理控制文件大小，不僅要壓縮 JavaScript，且要去除一些多余 html 標簽，通過對 CSS 文件和代碼的優化提升運行速度，避免內聯式樣式，使 CSS 文件能快速加載，使部分頁面內容能立即呈現給用戶，解決以往傳統技術條件下，頁面長時間空白的問題，從而增強用戶體驗，使頁面加載合情合理。

2.2代碼優化用來保障傳輸

優化主要包括二個方面：第一是減少數據的傳輸量，第二是減少數據的傳輸頻率，做好這二個方面，就可以達到提高網頁加載速度，降低服務器占用資源，提高網絡帶寬使用率等目的。實現優化傳輸，我們需要減少空白區域，精簡CSS和JS。空格、制表符、換行符、注釋都可以安全刪除。使用最短格式的顏色表示，比如表示紅色，我們是使用#FF0000、red還是#F00呢？我想讀者自然會知道。除去“垃級”標簽，并對CSS代碼進行有效合并、減少或刪除重復，比如：p{font-size：16px；font-family：Arial；line-height：22px；font-weight：bold；}，可以改寫為p{font：bold 16/22px；Arial；}。網站不少的導航、表格確認和其它各式各樣的特效都用JS來實現，而JS往往都非常笨重，除了注釋，其它所有的//or/**/注釋都可以安全刪除，除去JS空白區域并優化代碼，如二行的x=x+1和y=y+1，加上分號后可以寫在一行，而x=x+1，又可以寫成x++。重命名用戶自定交的變量和函數也可以給代碼帶來顯著改善。

3 Web 平臺前端開發設計與實現

3.1立足 Java EE 的框架，開展一系列設計工作

Web 平臺前端開發設計的實現，需要采用靜態頁面技術、動態頁面技術中的 JSP 技術、Ajax 技術等，并且建立在 Java EE 的框架基礎之上，促使網頁前端主要由客服人員和系統管理人員統一管理，并作為信息服務平臺的前端界面，以此來促進 Web平臺前端開發設計得到良好實現。具體來講，主要體現在以下幾個方面：第一，安裝和配置 Java 虛擬環境。由于 Java 是一種高級語言，因此，在 Java 虛擬環境的基礎上為上層的應用提供豐富的庫，以此來做好接口進行運行。第二，在安裝和配置 Java 虛擬環境之后，開始安裝 Tomcat。Tomcat 的配置需要建立在系統環境之下，完成配置之后，啟動 Tomcat，看到歡迎界面之后，就說明安裝成功，之后建立 JSP app 的目錄。需要注意的是在 Tomcat 的安裝目錄之下有 WEBAPPS 目錄，在 WEBAPPS 目錄下新建一個目錄，起名叫 MYAPP，并在該目錄下再新建一個目錄 WEB-INF，在下新建 JSP 文件的基礎上寫上代碼，就可以開始頁面編程工作。第三，在 Web 平臺前端開發設計過程中，由于 MYSQL 是一款經典的數據庫，具有免費、功能齊全等方面的特點，在這一數據庫之中新建一個 MySQL-data 目錄，完成后再新建一個 my.ini的文件，以此來充分發揮這一數據庫的功能。第四，還需要建立JSP 頁面與 MYSQL 數據庫的聯系。

3.2提高工作人員工作能力，合理使用 Ajax 技術

為了實現 Web 平臺前端開發設計工作，還可以采取以下幾個方面的措施：第一，任何一項工作的開展都需要相對應的工作人員參與其中。由此可見，工作人員工作能力的高低，在很大程度上影響一項工作的開展質量。相對應的 Web 平臺前端開發設計工作在開展過程中，無論是設計還是開發，都需要充分調動工作人員的作用，才能在此基礎上實現 Web 平臺前端進行有效的開發設計。但是在實際發展中，在 Web 平臺前端開發設計工作中，有關于工作人員方面還存在著工作能力不高、素質不強等方面的問題，這些問題的存在，在很大程度上影響 Web 平臺前端開發設計工作得到有效落實，因此，充分發揮工作人員的工作能力是具有重要的作用。而提高工作人員的工作能力，可以采取兩個方面的措施，一方面是在對外的招聘環節中，要盡量避免因為人情、關系等原因，在公平的基礎上合理的篩選前來應聘的計算機人員；另一方面是在對內的人員管理中，多組織一些培訓活動，如業務培訓班，不僅進行有針對性的計算機操作方面培訓，而且也要進行計算機知識方面的培訓，以此來提高計算機人員的實際能力，從而促進整體的進步與發展。第二，合理應用 Ajax技術。

參考文獻

[1]以工作過程為導向的《大前端開發》課程規劃與設計[J].劉磊.現代計算機（專業版）.2015（33）

[2]統一前端抵御威脅[J].每周電腦報.2004（41）

[3]高校校園網前端技術的研究與探索[J].易昌華.價值工程.2010（02）

[4]淺析Web前端開發技術[J].閆志英.無線互聯科技.2016（02）