基于Bootstrap的響應式企業網站設計

崔蓬

摘要 在以信息技術為支撐的新經濟下，要想在競爭中取得勝利，企業就必須不斷地進行更新信息，及時的將信息進行反饋，這必然就要求企業建立屬于自己的網站管理系統。根據企業的需求，網站基于Bootstrap框架，能快速進行前端開發，能更好的兼容不同的終端設備，使Web網站頁面風格一致，用戶的體驗始終一致。

【關鍵詞】響應式 Bootstrap前端開發移動設備

隨著互聯網技術的發展，網絡已呈現出商業化、全民化、全球化的趨勢。在以信息技術為支撐的新經濟下，同時也有越來越多的企業已開始從對互聯網的認知階段進入到認同和行動階段。企業只有不斷地適應、融入到這個信息化社會，才可能有較大的發展前景。要想在競爭中取得勝利，企業就必須不斷地進行更新信息，及時的將信息進行反饋，這必然就要求企業建立屬于自己的網站管理系統。因此，有很多行業的企業開始制作自己的企業門戶網站，越來越多的傳統企業借助互聯網和電子商務技術來推廣自己的產品和強化服務質量，這樣有助于用戶及時的了解企業的相關信息。這不僅樹立了企業的品牌形象，而且使企業在市場競爭中脫穎而出。提高企業品牌形象，增強企業的核心競爭力，為企業創造更大的價值。

1 響應式布局技術

在移動互聯網爆發之后，不同設備的分辨率和顯示效果差距非常大。如果在不同設備上顯示相同Web頁面效果，大大降低了用戶的視覺體驗度。隨著移動設備的普及，如何讓用戶通過移動設備瀏覽您的網站獲得良好的視覺效果，已經是一個不可避免的問題了。為了更好的解決這個問題，催生了響應式技術的誕生。它能更好的兼容不同的終端設備，讓不同的設備達到最優的視覺體驗，給用戶帶來更好的感官體驗。對于Web前端開發人員而言，這種最優的體驗雖然會使得編寫兼容性代碼加大，增加了前端頁面的加載速度，但這并不影響響應式布局技術在移動端頁面布局方面的應用。

2 BootstraPl端i框架

Bootstrap是由Twitter的幾位設計師合作開發的一款優雅、靈活、可擴展的前端開發框架。Bootstrap是用于搭建Web頁面的HTML、CSS、JavaScript工具集，它基于HTML5和CSS3，并基于iQuery開發了豐富的Web組件，可以確保整個應用程序的Web頁面風格一致，用戶的體驗始終一致，人機交互習慣保持一致。Bootstrap框架比較成熟，有完善的文檔和大量項目的充分測試和使用.可以實現快速開發，為Web前端技術人員的大大節省了工作時間和工作量。

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

Bootstrap采用了大量流行的CSS3功能，預定義了很多CSS類，可以對網站提供統一的視覺瀏覽體驗。

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

3 Bootstrap開發網站的流程

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

4 企業網站的設計與實現

4.1 網站主題風格的確立

這里以瑜伽網站為例，說到瑜伽，大家想到的是禪，是安靜，所以網站的設計要意在放空，寧靜。所以網站的設計意在空，寧靜，網頁要呈現身體、心靈與精神的和諧統一。藍色和綠色易產生清澈、超脫、遠離世俗的感覺。因此網站主要以綠、白作為主色調。

4.2 UI設計

為了便于進行響應式布局的設計，我們將功能界面進行重新整理和歸類。頁面類型主要分為：列表類頁面、詳情類頁面。列表類頁面包括網站首頁、瑜伽展示、新聞動態、關于我們。詳情類頁面包括瑜伽體式詳情、新聞詳情、公司簡介。UI設計主要分為移動端UI設計和PC端UI設計。首頁的效果圖，在移動端和PC端的UI設計如圖1、圖2所示。

4.3 企業網站響應式布局的實現

4.3.1 導航欄的響應式設計

傳統基于PC端的網站，導航欄一般是橫向顯示在頁面頂部，在響應式技術出現之前，一般是使用li標簽進行頁面布局，再用向左浮動，實現列表項內容由橫向變縱向。但這種方式在移動端小分辨率屏幕下.處理不好，菜單欄可能會換行顯示或相互遮擋。

Bootstrap提供了導航條組件，在移動端上可以折疊，在窗口寬度變大時逐步變為水平展開方式。務必添加nav標簽，并將其class設置為navbar參數，表示它是一個導航條組件。需要折疊和展開的導航欄內容必須放在一個div中，并設置其class為navbar-collapse和collapse。導航條的菜單內容用ul、li標簽布局，對ul可以添加navbar-right樣式實現導航條內元素向右對齊。如果需要改變默認的樣式，可以修改navbar-default樣式中的參數。如圖3所示。

4.3.2 輪播圖響應式設計

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

1. 標簽，里面的每個圓點通過data-slide接受prev或next，用以改變幻燈片相對位置，使用data-slide-to來向輪播傳遞指向圖片位置。如圖4所示。

   4.3.3 包含圖片列表的響應式設計

   在這個區域中，有三個等寬的橫向排列的小塊，每個小塊是由一個帶圓角邊框圖片和說明文字組成。Bootstrap提供了一套響應式柵格系統，系統會自動分為最多12列。

   指定柵格布局內部的元素的class為col-md-份數，來告訴它的寬度占據這12份里面的幾份。這里要實現三個等寬的小塊，每個小塊是一個div，每個div的占12份中的四份，才能實現等寬，因此三個div的class設置為col-md-4。

   Bootstrap為圖片設置了img-responsive類，方便對圖片進行響應式布局。為了實現為圖片添加帶圓角邊框樣式，Bootstrap還為圖片提供了img-thumbnail類。如圖5、圖6所示。

   4.4 兼容性測試

   在網站的設計和制作中，一定要進行瀏覽器的兼容性測試，能讓開發的網站在不同的瀏覽器下都正常顯示。這里選用的Chrome、火狐瀏覽器、360瀏覽器、IE8、Safari五種瀏覽器。網頁在手機端均能正常顯示。但在PC端，IE8和360瀏覽器無法正常顯示。IE8不支持HTML5，但IE8是Win7系統的默認瀏覽，360瀏覽器在Win7系統下的兼容模式，大部分就是IE8版本的內核。可以使用htm15shiv.js幫助低版本IE兼容HTML5語義化標簽。使用respond.js可幫助低版本IE兼容媒體查詢條件。

   5 結語

   基于Bootstrap的響應式網頁設計重視用戶體驗，Web前端頁面簡潔大方，能滿足不同移動端設備的良好視覺體驗，為企業移動服務提供一種新的設計思維和方法，接下來網站將加強與用戶的交互設計，實現與用戶之間更加方便有效的互動，促進企業的宣傳。

   參考文獻

   [1]汪紅宇，劉雄輝，喬波，基于Bootstrap框架實現響應式布局[J].電腦與信息技術，2017，25 （05）：19-22

   [2]李淼，杜明晶，苗放，網頁設計中Bootstrap CSS框架的應用與拓展[J].電子技術與軟件工程，201 3，17： 222-223.

   [3] Bootstrap中文網[EB/OL]. http：//www.bootcss.com.