摘要：介紹了bootstrap的概念、組成和優(yōu)勢，同時對基于bootstrap響應(yīng)式web前端設(shè)計(jì)進(jìn)行了分析，包括設(shè)計(jì)原則、關(guān)鍵技術(shù)和主要組件技術(shù)，并對設(shè)計(jì)工作進(jìn)行展望。響應(yīng)式web前端設(shè)計(jì)人員要以bootstrap框架結(jié)構(gòu)為基礎(chǔ)，完善設(shè)計(jì)，優(yōu)化結(jié)構(gòu)功能，讓用戶獲得最佳的用戶體驗(yàn)。

關(guān)鍵詞：bootstrap 響應(yīng)式web前端 柵格布局 表格應(yīng)用

中圖分類號：TP391.3 文獻(xiàn)標(biāo)識碼：A 文章編號：1007-9416（2016）10-0179-01

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，人們在日常生活與工作之中，不僅要注重提高互聯(lián)網(wǎng)資源的利用效率，還要關(guān)注用戶與網(wǎng)站的交互性，讓互聯(lián)網(wǎng)技術(shù)更好為工作與生活服務(wù)。Bootstrap作為重要的框架結(jié)構(gòu)，通過先進(jìn)技術(shù)的應(yīng)用，有利于系統(tǒng)升級，也能讓用戶獲得良好的體驗(yàn)，其應(yīng)用也變得愈加廣泛。本文結(jié)合實(shí)際需要，就基于bootstrap響應(yīng)式web前端進(jìn)行探討分析，希望能為類似工作開展提供啟示。

1 bootstrap概述

作為重要的框架結(jié)構(gòu)形式，bootstrap包括多項(xiàng)不同的組成內(nèi)容，并且擁有自身顯著的技術(shù)優(yōu)勢和特點(diǎn)。

（1）bootstrap的概念。Bootstrap是以HTML、CSS、JS為基礎(chǔ)的開發(fā)框架，它包含類型多樣、結(jié)構(gòu)漂亮的樣式。傳統(tǒng)網(wǎng)絡(luò)開發(fā)過程中，在不同分辨率下很難實(shí)現(xiàn)兼容，制約開發(fā)工作效率提升，對網(wǎng)頁正常使用也帶來不利影響。而在bootstrap的輔助下，網(wǎng)頁開發(fā)變得更為便捷。Web前端開發(fā)人員可利用bootstrap進(jìn)行響應(yīng)式網(wǎng)頁制作，有利于網(wǎng)頁的擴(kuò)展與升級，對網(wǎng)頁維護(hù)也具有一定作用。隨著bootstrap的發(fā)展與進(jìn)步，內(nèi)容豐富多樣，結(jié)構(gòu)靈活的響應(yīng)式柵格系統(tǒng)得到應(yīng)用，也讓基于bootstrap響應(yīng)式web前端開發(fā)成為現(xiàn)實(shí)。

（2）bootstrap的組成。作為web前端工具，bootstrap包含豐富的結(jié)構(gòu)類型，并且免費(fèi)開源，提供預(yù)編譯和源碼兩種形式的壓縮包，包內(nèi)的文件按類別存放于不同目錄之中，同時提供壓縮與未壓縮兩種版本。Bootstrap最基本的組織形式為預(yù)編譯版本，可在任意web項(xiàng)目中直接使用，包括壓縮與未壓縮兩種CSS和JS文件。就源碼來看，bootstrap包含CSS、JavaScript、圖標(biāo)字體文件、LESS等。安裝bootstrap時，先完成基本樣式的安裝，然后調(diào)用JavaScript插件，做好調(diào)試與安裝工作，完成任務(wù)，為web前端開發(fā)創(chuàng)造條件。

（3）bootstrap的優(yōu)勢。在bootstrap的輔助下，賦予CSS動態(tài)性，能有效適應(yīng)各種移動設(shè)備。并降低網(wǎng)頁開發(fā)難度，節(jié)約成本，有利于網(wǎng)頁維護(hù)。大多數(shù)瀏覽器支持bootstrap框架，為網(wǎng)頁提供排版、導(dǎo)航、縮略圖、進(jìn)度條等組件，方便web前端設(shè)計(jì)。并且bootstrap代碼簡單，方便開發(fā)人員的各項(xiàng)工作，降低勞動強(qiáng)度，確保web前端的高效與便捷，有利于提高網(wǎng)頁開發(fā)工作效率。

2 基于bootstrap響應(yīng)式web前端分析

利用bootstrap開展響應(yīng)式web前端設(shè)計(jì)，一方面要明確其優(yōu)勢和特點(diǎn)，另一方面還要合理英語相關(guān)的技術(shù)措施，促進(jìn)設(shè)計(jì)水平提高。

2.1 設(shè)計(jì)原則

堅(jiān)持美觀、簡約原則，采用外形美觀、結(jié)構(gòu)精致簡約的控件，為人們帶來良好的視覺氛圍。同時落實(shí)“以用戶為中心”原則，根據(jù)用戶需要開展web前端設(shè)計(jì)。并確保系統(tǒng)的交互性，為用戶使用網(wǎng)頁提供方便，確保各項(xiàng)工作高效、便捷的開展下去。

2.2 關(guān)鍵技術(shù)

可以采用混合開發(fā)模式，發(fā)揮HTMLS的優(yōu)勢，提高web前端的綜合性能，確保安全性與可靠性。常用關(guān)鍵技術(shù)包括HTMLS+CSS+

JavaScript技術(shù)，然后完成程序編寫，并在運(yùn)營中注重系統(tǒng)升級和消息發(fā)送，利用bootstrap進(jìn)行交互，方便用戶使用，為他們提供便捷服務(wù)。

2.3 主要組件技術(shù)

設(shè)計(jì)和使用中，為提高響應(yīng)式web前端的應(yīng)用效果，還要采用以下技術(shù)。

（1）柵格布局技術(shù)。提供完整的響應(yīng)式柵格系統(tǒng)，對屏幕尺寸有較強(qiáng)適應(yīng)性，系統(tǒng)能自動形成柵格布局。Bootstrap柵格布局為小屏幕、中等屏幕、大屏幕提供前綴，讓web前端更加靈活，促進(jìn)系統(tǒng)前端與后臺數(shù)據(jù)交互，方便用戶使用。

（2）響應(yīng)式應(yīng)用技術(shù)。結(jié)合用戶使用性能設(shè)置導(dǎo)航欄，導(dǎo)航包括站點(diǎn)名稱與導(dǎo)航定義樣式。設(shè)備視圖中導(dǎo)航欄是折疊的，可用視口寬度增加時，導(dǎo)航欄水平展開，有利于用戶快速導(dǎo)航。

（3）表格應(yīng)用技術(shù)。包括用戶表、公司表、員工表，表格中存儲信息。Bootstrap為web前端提供表格應(yīng)用功能，設(shè)置主鍵與外鍵，對表格信息統(tǒng)一管理。

3 基于bootstrap響應(yīng)式web前端的展望

在信息技術(shù)不斷發(fā)展和完善的前提下，再加上設(shè)計(jì)人員綜合技能提高和經(jīng)驗(yàn)總結(jié)，bootstrap將會取得不斷發(fā)展和進(jìn)步，結(jié)構(gòu)中的系統(tǒng)元素也會改進(jìn)，web前端將會朝著響應(yīng)式方向發(fā)展。有利于各功能模塊聯(lián)系的增強(qiáng)，并賦予bootstrap框架以規(guī)律性和持續(xù)性。進(jìn)而促進(jìn)bootstrap響應(yīng)式web前端設(shè)計(jì)完善，提高設(shè)計(jì)水平，更好滿足人們生活和工作需要。

4 結(jié)語

在bootstrap框架下，響應(yīng)式web前端具有更為高效、便捷的特征，能為用戶帶來更加便捷的體驗(yàn)。隨著信息技術(shù)發(fā)展與進(jìn)步，前端設(shè)備的代碼量也隨之增加，而采用響應(yīng)式布局能兼容各種前端設(shè)備，有利于縮短網(wǎng)站加載時間，提高上網(wǎng)效率。因此，響應(yīng)式web前端設(shè)計(jì)人員要以bootstrap框架結(jié)構(gòu)為基礎(chǔ)，以提高網(wǎng)站運(yùn)營效率和設(shè)計(jì)效果為目的，完善響應(yīng)式web前端設(shè)計(jì)，優(yōu)化結(jié)構(gòu)功能，讓用戶獲得最佳的用戶體驗(yàn)。

參考文獻(xiàn)

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

[2]張曉穎.基于bootstrap框架的響應(yīng)式OA系統(tǒng)前端UI實(shí)現(xiàn)[J].科技展望，2016（23），158.

[3]李金亮，李春青.基于Boot Strap的WEB開發(fā)設(shè)計(jì)研究[J].信息技術(shù)，2016（2），217.

[4]李強(qiáng).Web前端開發(fā)技術(shù)與學(xué)習(xí)探討[J].長治學(xué)院學(xué)報(bào)，2016（2），75-77.

收稿日期：2016-09-09

作者簡介：潘丹（1982—），女，江西九江人，講師，碩士，研究方向：網(wǎng)頁設(shè)計(jì)。