基于Bootstrap的響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)

崔蓬

摘要 在以信息技術(shù)為支撐的新經(jīng)濟(jì)下，要想在競(jìng)爭(zhēng)中取得勝利，企業(yè)就必須不斷地進(jìn)行更新信息，及時(shí)的將信息進(jìn)行反饋，這必然就要求企業(yè)建立屬于自己的網(wǎng)站管理系統(tǒng)。根據(jù)企業(yè)的需求，網(wǎng)站基于Bootstrap框架，能快速進(jìn)行前端開(kāi)發(fā)，能更好的兼容不同的終端設(shè)備，使Web網(wǎng)站頁(yè)面風(fēng)格一致，用戶的體驗(yàn)始終一致。

【關(guān)鍵詞】響應(yīng)式 Bootstrap前端開(kāi)發(fā)移動(dòng)設(shè)備

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)絡(luò)已呈現(xiàn)出商業(yè)化、全民化、全球化的趨勢(shì)。在以信息技術(shù)為支撐的新經(jīng)濟(jì)下，同時(shí)也有越來(lái)越多的企業(yè)已開(kāi)始從對(duì)互聯(lián)網(wǎng)的認(rèn)知階段進(jìn)入到認(rèn)同和行動(dòng)階段。企業(yè)只有不斷地適應(yīng)、融入到這個(gè)信息化社會(huì)，才可能有較大的發(fā)展前景。要想在競(jìng)爭(zhēng)中取得勝利，企業(yè)就必須不斷地進(jìn)行更新信息，及時(shí)的將信息進(jìn)行反饋，這必然就要求企業(yè)建立屬于自己的網(wǎng)站管理系統(tǒng)。因此，有很多行業(yè)的企業(yè)開(kāi)始制作自己的企業(yè)門(mén)戶網(wǎng)站，越來(lái)越多的傳統(tǒng)企業(yè)借助互聯(lián)網(wǎng)和電子商務(wù)技術(shù)來(lái)推廣自己的產(chǎn)品和強(qiáng)化服務(wù)質(zhì)量，這樣有助于用戶及時(shí)的了解企業(yè)的相關(guān)信息。這不僅樹(shù)立了企業(yè)的品牌形象，而且使企業(yè)在市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。提高企業(yè)品牌形象，增強(qiáng)企業(yè)的核心競(jìng)爭(zhēng)力，為企業(yè)創(chuàng)造更大的價(jià)值。

1 響應(yīng)式布局技術(shù)

在移動(dòng)互聯(lián)網(wǎng)爆發(fā)之后，不同設(shè)備的分辨率和顯示效果差距非常大。如果在不同設(shè)備上顯示相同Web頁(yè)面效果，大大降低了用戶的視覺(jué)體驗(yàn)度。隨著移動(dòng)設(shè)備的普及，如何讓用戶通過(guò)移動(dòng)設(shè)備瀏覽您的網(wǎng)站獲得良好的視覺(jué)效果，已經(jīng)是一個(gè)不可避免的問(wèn)題了。為了更好的解決這個(gè)問(wèn)題，催生了響應(yīng)式技術(shù)的誕生。它能更好的兼容不同的終端設(shè)備，讓不同的設(shè)備達(dá)到最優(yōu)的視覺(jué)體驗(yàn)，給用戶帶來(lái)更好的感官體驗(yàn)。對(duì)于Web前端開(kāi)發(fā)人員而言，這種最優(yōu)的體驗(yàn)雖然會(huì)使得編寫(xiě)兼容性代碼加大，增加了前端頁(yè)面的加載速度，但這并不影響響應(yīng)式布局技術(shù)在移動(dòng)端頁(yè)面布局方面的應(yīng)用。

2 BootstraPl端i框架

Bootstrap是由Twitter的幾位設(shè)計(jì)師合作開(kāi)發(fā)的一款優(yōu)雅、靈活、可擴(kuò)展的前端開(kāi)發(fā)框架。Bootstrap是用于搭建Web頁(yè)面的HTML、CSS、JavaScript工具集，它基于HTML5和CSS3，并基于iQuery開(kāi)發(fā)了豐富的Web組件，可以確保整個(gè)應(yīng)用程序的Web頁(yè)面風(fēng)格一致，用戶的體驗(yàn)始終一致，人機(jī)交互習(xí)慣保持一致。Bootstrap框架比較成熟，有完善的文檔和大量項(xiàng)目的充分測(cè)試和使用.可以實(shí)現(xiàn)快速開(kāi)發(fā)，為Web前端技術(shù)人員的大大節(jié)省了工作時(shí)間和工作量。

Bootstrap框架最大的優(yōu)勢(shì)就是響應(yīng)式布局，可以使Web前端頁(yè)面代碼適應(yīng)不同用戶不同終端屏幕尺寸。它的柵格系統(tǒng)就是通過(guò)行容器（row）與列容器（column）的組合創(chuàng)建頁(yè)面布局，具體內(nèi)容放在列容器（ column）之內(nèi)，而且只有列才能作為行的子元素。新版的Bootstrap4.0擁有了box-flex布局，不斷跟隨著前沿的Web前端技術(shù)的發(fā)展。

Bootstrap采用了大量流行的CSS3功能，預(yù)定義了很多CSS類(lèi)，可以對(duì)網(wǎng)站提供統(tǒng)一的視覺(jué)瀏覽體驗(yàn)。

Bootstrap的JavaScript插件非常豐富，自身存在13個(gè)iQuery插件，不僅可以用自帶的集成版的Bootstrap.js，也可以在此基礎(chǔ)上自行擴(kuò)充。

3 Bootstrap開(kāi)發(fā)網(wǎng)站的流程

開(kāi)發(fā)企業(yè)網(wǎng)站的第一步首先是要根據(jù)企業(yè)的需求確定網(wǎng)站風(fēng)格，規(guī)劃好建站的目的、網(wǎng)站的類(lèi)型、網(wǎng)站的受眾、具備的功能、采用什么樣的布局版式。明確了網(wǎng)站主題后，第二步搜集所需要的文字、圖片等信息后再進(jìn)行UI界面設(shè)計(jì)。完成UI界面設(shè)計(jì)以后，使用合適的工具進(jìn)行布局規(guī)劃，與此同時(shí)需要引入Bootstrap框架相關(guān)文件，利用Bootstrap框架的柵格系統(tǒng)、組件、插件完成前端開(kāi)發(fā)。網(wǎng)站雛形完成以后，要進(jìn)行測(cè)試評(píng)估，等頁(yè)面功能測(cè)試完善后，網(wǎng)站才能上線發(fā)布。

4 企業(yè)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

4.1 網(wǎng)站主題風(fēng)格的確立

這里以瑜伽網(wǎng)站為例，說(shuō)到瑜伽，大家想到的是禪，是安靜，所以網(wǎng)站的設(shè)計(jì)要意在放空，寧?kù)o。所以網(wǎng)站的設(shè)計(jì)意在空，寧?kù)o，網(wǎng)頁(yè)要呈現(xiàn)身體、心靈與精神的和諧統(tǒng)一。藍(lán)色和綠色易產(chǎn)生清澈、超脫、遠(yuǎn)離世俗的感覺(jué)。因此網(wǎng)站主要以綠、白作為主色調(diào)。

4.2 UI設(shè)計(jì)

為了便于進(jìn)行響應(yīng)式布局的設(shè)計(jì)，我們將功能界面進(jìn)行重新整理和歸類(lèi)。頁(yè)面類(lèi)型主要分為：列表類(lèi)頁(yè)面、詳情類(lèi)頁(yè)面。列表類(lèi)頁(yè)面包括網(wǎng)站首頁(yè)、瑜伽展示、新聞動(dòng)態(tài)、關(guān)于我們。詳情類(lèi)頁(yè)面包括瑜伽體式詳情、新聞詳情、公司簡(jiǎn)介。UI設(shè)計(jì)主要分為移動(dòng)端UI設(shè)計(jì)和PC端UI設(shè)計(jì)。首頁(yè)的效果圖，在移動(dòng)端和PC端的UI設(shè)計(jì)如圖1、圖2所示。

4.3 企業(yè)網(wǎng)站響應(yīng)式布局的實(shí)現(xiàn)

4.3.1 導(dǎo)航欄的響應(yīng)式設(shè)計(jì)

傳統(tǒng)基于PC端的網(wǎng)站，導(dǎo)航欄一般是橫向顯示在頁(yè)面頂部，在響應(yīng)式技術(shù)出現(xiàn)之前，一般是使用li標(biāo)簽進(jìn)行頁(yè)面布局，再用向左浮動(dòng)，實(shí)現(xiàn)列表項(xiàng)內(nèi)容由橫向變縱向。但這種方式在移動(dòng)端小分辨率屏幕下.處理不好，菜單欄可能會(huì)換行顯示或相互遮擋。

Bootstrap提供了導(dǎo)航條組件，在移動(dòng)端上可以折疊，在窗口寬度變大時(shí)逐步變?yōu)樗秸归_(kāi)方式。務(wù)必添加nav標(biāo)簽，并將其class設(shè)置為navbar參數(shù)，表示它是一個(gè)導(dǎo)航條組件。需要折疊和展開(kāi)的導(dǎo)航欄內(nèi)容必須放在一個(gè)div中，并設(shè)置其class為navbar-collapse和collapse。導(dǎo)航條的菜單內(nèi)容用ul、li標(biāo)簽布局，對(duì)ul可以添加navbar-right樣式實(shí)現(xiàn)導(dǎo)航條內(nèi)元素向右對(duì)齊。如果需要改變默認(rèn)的樣式，可以修改navbar-default樣式中的參數(shù)。如圖3所示。

4.3.2 輪播圖響應(yīng)式設(shè)計(jì)

為了實(shí)現(xiàn)一個(gè)廣告輪播效果，可以通過(guò)iQuery的插件或自己編寫(xiě)代碼實(shí)現(xiàn)。這里使用了Bootstrap自帶的輪播插件--Carousel。要使用該插件，必須在頁(yè)面中引入bootstrap.minjs。添加一個(gè)div，將其樣式設(shè)置為carousel。需要輪換的內(nèi)容放在一個(gè)div中，將其樣式設(shè)置為carousel-inner。每一個(gè)輪換圖片的img標(biāo)簽，可以各自放在一個(gè)div中，并設(shè)置該div的樣式為carousel-inner。廣告輪播下方的指示器使用

1. 標(biāo)簽，里面的每個(gè)圓點(diǎn)通過(guò)data-slide接受prev或next，用以改變幻燈片相對(duì)位置，使用data-slide-to來(lái)向輪播傳遞指向圖片位置。如圖4所示。

   4.3.3 包含圖片列表的響應(yīng)式設(shè)計(jì)

   在這個(gè)區(qū)域中，有三個(gè)等寬的橫向排列的小塊，每個(gè)小塊是由一個(gè)帶圓角邊框圖片和說(shuō)明文字組成。Bootstrap提供了一套響應(yīng)式柵格系統(tǒng)，系統(tǒng)會(huì)自動(dòng)分為最多12列。

   指定柵格布局內(nèi)部的元素的class為col-md-份數(shù)，來(lái)告訴它的寬度占據(jù)這12份里面的幾份。這里要實(shí)現(xiàn)三個(gè)等寬的小塊，每個(gè)小塊是一個(gè)div，每個(gè)div的占12份中的四份，才能實(shí)現(xiàn)等寬，因此三個(gè)div的class設(shè)置為col-md-4。

   Bootstrap為圖片設(shè)置了img-responsive類(lèi)，方便對(duì)圖片進(jìn)行響應(yīng)式布局。為了實(shí)現(xiàn)為圖片添加帶圓角邊框樣式，Bootstrap還為圖片提供了img-thumbnail類(lèi)。如圖5、圖6所示。

   4.4 兼容性測(cè)試

   在網(wǎng)站的設(shè)計(jì)和制作中，一定要進(jìn)行瀏覽器的兼容性測(cè)試，能讓開(kāi)發(fā)的網(wǎng)站在不同的瀏覽器下都正常顯示。這里選用的Chrome、火狐瀏覽器、360瀏覽器、IE8、Safari五種瀏覽器。網(wǎng)頁(yè)在手機(jī)端均能正常顯示。但在PC端，IE8和360瀏覽器無(wú)法正常顯示。IE8不支持HTML5，但I(xiàn)E8是Win7系統(tǒng)的默認(rèn)瀏覽，360瀏覽器在Win7系統(tǒng)下的兼容模式，大部分就是IE8版本的內(nèi)核?？梢允褂胔tm15shiv.js幫助低版本IE兼容HTML5語(yǔ)義化標(biāo)簽。使用respond.js可幫助低版本IE兼容媒體查詢條件。

   5 結(jié)語(yǔ)

   基于Bootstrap的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)重視用戶體驗(yàn)，Web前端頁(yè)面簡(jiǎn)潔大方，能滿足不同移動(dòng)端設(shè)備的良好視覺(jué)體驗(yàn)，為企業(yè)移動(dòng)服務(wù)提供一種新的設(shè)計(jì)思維和方法，接下來(lái)網(wǎng)站將加強(qiáng)與用戶的交互設(shè)計(jì)，實(shí)現(xiàn)與用戶之間更加方便有效的互動(dòng)，促進(jìn)企業(yè)的宣傳。

   參考文獻(xiàn)

   [1]汪紅宇，劉雄輝，喬波，基于Bootstrap框架實(shí)現(xiàn)響應(yīng)式布局[J].電腦與信息技術(shù)，2017，25 （05）：19-22

   [2]李淼，杜明晶，苗放，網(wǎng)頁(yè)設(shè)計(jì)中Bootstrap CSS框架的應(yīng)用與拓展[J].電子技術(shù)與軟件工程，201 3，17： 222-223.

   [3] Bootstrap中文網(wǎng)[EB/OL]. http：//www.bootcss.com.