Bootstrap的校園電子商務網(wǎng)站設計

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了Bootstrap的校園電子商務網(wǎng)站設計范文，希望能給你帶來靈感和參考，敬請閱讀。

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

關鍵詞：Bootsrap；前端設計；校園二手商品交易商城

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

1響應式web設計的趨勢

響應式Web的設計注重的是實現(xiàn)一個網(wǎng)站能兼容多個終端，通過媒體查詢、彈性視覺媒體、流動布局的結(jié)合，實現(xiàn)兼容性網(wǎng)站創(chuàng)建，一個網(wǎng)站能夠滿足不同客戶端用戶需要。響應式Web設計能使客戶端適應用戶設備環(huán)境，智能化地適應大眾的需要。[1]相對于傳統(tǒng)網(wǎng)頁設計方式，響應式網(wǎng)頁設計能夠為不同終端的客戶提供更好的瀏覽體驗，帶來更多的經(jīng)濟效益；同時響應式網(wǎng)頁設計也能夠減少網(wǎng)站開發(fā)和維護成本，對于搜索引擎優(yōu)化也更加友好。因此，越來越多的前端開發(fā)工程師選擇響應式布局設計網(wǎng)頁。

2Bootstrap的優(yōu)勢

Bootstrap是由Twitter的設計師MarkOtto和JacobThornton合作開發(fā)的一款簡潔、直觀的用于前端開發(fā)的開源工具包。Bootstrap是基于HTML5和CSS3開發(fā)的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網(wǎng)站風格，并兼容大部分jQuery插件。1)Bootstrap是響應式布局的。能夠根據(jù)用戶的終端設備進行自適應調(diào)整，提高用戶的瀏覽體驗度。2)Bootstrap是移動設備優(yōu)先的。從Bootstrap3開始，針對移動設備的樣式融合進了框架的每個角落。更適應移動互聯(lián)網(wǎng)快速發(fā)展的今天。3)Bootstrap是易于學習的。只要具備HTML和CSS基礎知識，就能夠快速上手，對于高職院校的學生能夠快速掌握基本技術(shù)，搭建一個極具設計感的完整網(wǎng)站。4)Bootstrap含有豐富的組件。Bootstrap有豐富的HTML組件和JS組件，并且代碼簡潔，可以在其基礎之上個性化定制開發(fā).

3利用Bootstrap

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

4結(jié)束語

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

參考文獻：

[1]楊秀生.響應式Web的設計的關鍵技術(shù)研究[J].電腦知識與技術(shù),2017(5):51-52.

[2]余楷鑫.Bootstrap在Web移動開發(fā)中的應用[J].電腦知識與技術(shù),2017(6):82-84.

[3]Bootstrap官網(wǎng)[EB/OL].v3.bootcss.com.

作者:李靜 單位:海南職業(yè)技術(shù)學院