Bootstrap的校園電子商務網站設計

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

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

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

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

1響應式web設計的趨勢

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

2Bootstrap的優勢

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

3利用Bootstrap

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

4結束語

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

參考文獻：

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

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

[3]Bootstrap官網[EB/OL].v3.bootcss.com.

作者:李靜 單位:海南職業技術學院