Bootstrap的校園電子商務(wù)網(wǎng)站設(shè)計(jì)

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

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

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

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

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

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

2Bootstrap的優(yōu)勢(shì)

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

3利用Bootstrap

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

4結(jié)束語(yǔ)

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

參考文獻(xiàn)：

[1]楊秀生.響應(yīng)式Web的設(shè)計(jì)的關(guān)鍵技術(shù)研究[J].電腦知識(shí)與技術(shù),2017(5):51-52.

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

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

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