基于Bootstrap的響應(yīng)式校園電子商務(wù)網(wǎng)站設(shè)計

李靜

摘要：隨著近年來互聯(lián)網(wǎng)+概念的提出，互聯(lián)網(wǎng)應(yīng)用的發(fā)展達到了一個新的高潮。越來越多的傳統(tǒng)行業(yè)試圖通過互聯(lián)網(wǎng)平臺創(chuàng)造新的發(fā)展生態(tài)。其中移動互聯(lián)網(wǎng)的占有量更是逐年攀升，為了滿足不同移動終端的顯示尺寸，響應(yīng)式的頁面布局應(yīng)運而生。該文利用bootstrap工具設(shè)計響應(yīng)式校園二手商品交易商城的前端。

關(guān)鍵詞：Bootsrap；前端設(shè)計；校園二手商品交易商城

中圖分類號：TP393 文獻標(biāo)識碼：A 文章編號：1009-3044（2017）14-0225-01

移動互聯(lián)網(wǎng)是采用移動無線通信方式通過智能移動終端獲取業(yè)務(wù)和服務(wù)的，而移動終端則包括了智能手機、電子書、平板電腦等。近年來，隨著移動通信和智能移動終端的發(fā)展，更多的客戶會選擇移動互聯(lián)網(wǎng)這樣隨時隨地可以上網(wǎng)的方式，移動互聯(lián)經(jīng)濟也隨之高速發(fā)展。而傳統(tǒng)的網(wǎng)頁制作方式大多只適用于PC端的瀏覽器，在智能終端多尺寸的顯示屏上的瀏覽效果卻不盡如人意。

1響應(yīng)式web設(shè)計的趨勢

響應(yīng)式Web的設(shè)計注重的是實現(xiàn)一個網(wǎng)站能兼容多個終端，通過媒體查詢、彈性視覺媒體、流動布局的結(jié)合，實現(xiàn)兼容性網(wǎng)站創(chuàng)建，一個網(wǎng)站能夠滿足不同客戶端用戶需要。響應(yīng)式Web設(shè)計能使客戶端適應(yīng)用戶設(shè)備環(huán)境，智能化地適應(yīng)大眾的需要。

相對于傳統(tǒng)網(wǎng)頁設(shè)計方式，響應(yīng)式網(wǎng)頁設(shè)計能夠為不同終端的客戶提供更好的瀏覽體驗，帶來更多的經(jīng)濟效益；同時響應(yīng)式網(wǎng)頁設(shè)計也能夠減少網(wǎng)站開發(fā)和維護成本，對于搜索引擎優(yōu)化也更加友好。因此，越來越多的前端開發(fā)工程師選擇響應(yīng)式布局設(shè)計網(wǎng)頁。

2 Bootstrap的優(yōu)勢

Bootstrap是由Twitter的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)的一款簡潔、直觀的用于前端開發(fā)的開源工具包。Bootstrap是基于HTMl5和CSS3開發(fā)的，它在jQuery的基礎(chǔ)上進行了更為個性化和人性化的完善，形成一套自己獨有的網(wǎng)站風(fēng)格，并兼容大部分iQuery插件。

1）Bootstrap是響應(yīng)式布局的。能夠根據(jù)用戶的終端設(shè)備進行自適應(yīng)調(diào)整，提高用戶的瀏覽體驗度。

2）Bootstrap是移動設(shè)備優(yōu)先的。從Bootstrap3開始，針對移動設(shè)備的樣式融合進了框架的每個角落。更適應(yīng)移動互聯(lián)網(wǎng)快速發(fā)展的今天。

3）Bootstrap是易于學(xué)習(xí)的。只要具備HTML和CSS基礎(chǔ)知識，就能夠快速上手，對于高職院校的學(xué)生能夠快速掌握基本技術(shù)，搭建一個極具設(shè)計感的完整網(wǎng)站。

4）Bootstrap含有豐富的組件。Bootstrap有豐富的HTML組件和JS組件，并且代碼簡潔，可以在其基礎(chǔ)之上個性化定制開發(fā)。

3利用Bootstrap工具實現(xiàn)校園二手商品交易商城頁面

引入bootstrap框架，利用其布局容器、導(dǎo)航欄、表單、按鈕、柵格系統(tǒng)、標(biāo)簽、響應(yīng)式工具以及輪播插件，完成校園二手商品交易商城頁面的制作。

4結(jié)束語

Bootstrap是一個開源框架，提供CSS布局組件和javascript組件，對于高職院校的學(xué)生更容易掌握，從校園二手商品交易商城的開發(fā)到后期維護階段都可以讓學(xué)生參與進來，也是增加學(xué)生的實踐機會。