基于企業的BootStrap響應式網站的設計與實現

王永恒 將存峰

（1.上海中僑職業技術學院 上海市 201514 2.上海市軟件中心 上海市 201112）

1 BootStrap及相關技術簡介

1.1 Bootstrap技術

Bootstrap 是流式柵格系統，目前企業里比較熱門的制作前端響應網頁的框架，它的顯著特點是移動設備優先，在設計與開發中，一般設置四個屏幕，移動端，小屏，中屏和大屏，移動端設備樣式優先，其余設備繼承移動端。BootStrap 支持大多數瀏覽器，如Firefox 和Chrome 等[1]。

在移動端進行設計時，首先需要引入meta 標記，meta 標記中viewport 的設置直接會影響到不同屏幕的響應，Bootstrap 框架自帶.container 或 .container-fluid 類，稱為布局容器，行必須包含在此布局容器中，即行必須在.container class 內，目的是獲得適當的alignment 和padding。padding 是內邊距，可以設置列中內容的邊距，該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最后一列的行偏移[2]。

1.2 響應式布局

在傳統的網頁設計與開發中，在不同的設備終端顯示時，需要單獨設計每個終端的布局，PC 端設計一套，手機端設計一套。而使用響應式布局可以實現不同屏幕分辨率的終端上瀏覽不同的網頁的布局。響應式布局可以通過檢測視口的分辨率響應不同的客戶端的布局和內容，通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

2 基于BootStrap響應式網站的設計與實現

文中所設計的企業網站項目包含首頁，新聞頁面，樂園和聯系四個主頁面，本文主要是以“首頁”和“聯系我們”頁面為例進行分析和設計。“首頁”中主要是對Carousel 插件和nav 插件進行設計和實現，Grid System 布局的設計選擇了結構比較清晰的“聯系我們”頁面。

2.1 meta標簽引入

打開 網頁，在＜head＞和＜/head＞中引入meta 標 記，添加viewport 和content 屬性，其中content 中寬度等于設備寬度， initial-scale 是頁面首次被顯示可見區域的縮放級別，取值1 表示頁面按實際尺寸顯示，無任何縮放，代碼如圖1 所示。

2.2 BootStrap下載與安裝

登錄https://www.bootcss.com 中文網站，單擊Bootstrap 中文文檔，下載用于生產環境的Bootstrap 壓縮包并將其解壓到所創建的網站項目中，直接根據其開發文檔使用Bootstrap3。將其中的bootstrap.css 放在CSS 文件夾中，jquery.min.js 和bootstrap.min.js 放在JS 文件夾中，三個文件在HTML 頁面的引入位置如圖2 和圖3所示。

圖1：meta 標記

圖2：bootstrap.css 引入位置

圖3：jquery.min.js 和bootstrap.min.js 的引入位置

2.3 nav導航模塊和Bootstrap滑塊設計與實現

2.3.1 nav 導航模塊的設計和實現

導航欄是Bootstrap 的基礎組件，是Bootstrap 響應式網站的一個突出特點。在 Bootstrap 中，導航欄包括了站點名稱和基本的導航定義樣式。在大屏、中屏和小屏中導航將橫向布局，在移動端導航將以隱藏按鈕（折疊）的形式出現，當單擊按鈕時彈出橫向菜單，按鈕菜單的實現主要是通過.icon-bar 類來實現的，是否被觸發則是通過button 按鈕的data-toggle=“collapse”事件實現的。

具體的設計如下：

（1）最外面直接使用＜nav＞＜/nav＞標簽是導航條，class 為navbar，指定一個顏色，這里使用的navbar-inverse：黑底白字，daohang 是用戶自定義的類，實現上邊距和背景的顏色；

（2）＜nav＞＜/nav＞標簽中添加兩個＜div＞，其中第一個＜div＞里引入button 標記，主要實現的功能是當屏幕小于一定分辨率的時候，導航條自動隱藏。按鈕標簽里嵌套了三個span 的icon，引入navbar-toggle 樣式類和collapse 屬性(收起的作用)，點擊的時候目標為data-target。

圖4：四屏導航效果圖

當窗口縮小到一定分辨率時（移動端），導航條會折疊成三個“橫線”的按鈕顯示出來，當點擊這個按鈕時可以顯示出導航的菜單來。折疊按鈕效果如圖4 所示。第二個div 標簽中添加帶有 class .nav、.navbar-nav 的無序列表，可以實現下拉菜單，同時注意要增強可訪問性，一定要給每個導航條加上role="navigation"。設計參考代碼如圖5 所示。

2.3.2 Bootstrap 滑塊（Carousel）設計與實現

Bootstrap 滑塊（Carousel）插件實現的效果是圖片輪播，內容多樣化，可以是圖像、內嵌框架或視頻等。一個簡單的圖片輪播是由輪播指標，輪播項目和輪播導航構成的，其中輪播指標指的是輪播圖下方的原點，輪播項目指的是實現輪播效果的圖片，輪播導航指的是輪播圖片左右兩邊的箭頭。例如下圖中就使用 Bootstrap滑塊（Carousel）插件實現了一個循環播放。為了實現輪播，設計中引用了默認的class 類carousel slide，表示輪播滑動， dataride="carousel"屬性用于標記輪播在頁面加載時就開始動畫播放，而不是需要單擊時才觸發，實現效果圖如圖6 所示。

Carousel 設計詳細過程如下：

（1）輪播指標：在此部分的設計中，使用carousel-indicators設置indicators 的索引項， data-slide-to 將每個輪播指標與圖拼列的索引位置一一對應，索引從 0 開始計數， data-target="#myCarousel"將所有輪播指標指向激活輪播的元素，就是id=” myCarousel “。

（2）輪播項目：每一個輪播的img 都放在一個div 中，外層div 中引入的class="carousel-inner"是輪播的內容，包括所有輪播圖的盒子；class="item"，表示輪播的每一張圖片。

（3）輪播導航：在此部分的設計中，＜a＞超鏈接實現點擊切換，href 指向啟用輪播的元素的id。屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對于當前位置的位置，class="carouselcontrol " 用于添加左右兩個輪播導航箭頭，left 和right 指的是左箭頭和右箭頭, Glyphicons 是 Bootstrap 字體圖標，class="glyphicon glyphicon-chevron"是圖標箭頭。

圖5：導航代碼結構

圖6：輪播箭頭效果

圖7：Section 主體部分和footer 版權參考代碼

2.4 BootStrap柵格布局（Grid System）的設計及實現

本部分的Grid System 設計以“我們”頁面為例展開設計，本頁面分為三部分，header 頂部logo 和導航部分（上文中已經介紹），中間Section 主體和底部Footer 版權部分。

2.4.1 Section 主體部分的設計

此部分的Grid System 設計分為上下兩部分。在上面部分的“聯系方式”和“網站介紹”部分，大屏(min-width:1300px)和中屏（min-width:992px）左右兩部分柵格布局的列數分別為4 列和8 列，記為col-md-4 和col-md-8；小屏幕（min-width:768px）和移動端（min-width:480px）的柵格布局設置為col-xs-12，在此部分中引入了自定義的多個類about-img、lianxi 和 brief 等以實現CSS 樣式標準。在 “愛獒生活”部分的設計中，大屏和中屏分為三列col-md-4，小屏和移動端分為兩列，記為col-md-6，在此部分中自定義的類有dg-bianju。

2.4.2 Footer 版權部分的設計

此部分四個屏幕的Grid System 設計是一樣的，總12 列中平均分為2 列col-sm-6，自定義的類有footer、banquan、biankuang、pull-right 和weixin 等。部分參考代碼和頁面整體效果如圖7 所示。

3 總結

BootStrap框架在響應式網頁的設計中占據著非常重要的作用，其中的插件組件在一定程度上能夠縮短開發的時間，節省成本，通過BootStrap 所開發的頁面能夠適應不同分辨率響應式WEB 網站，尤其是在智能移動端更為用戶提供了良好的視覺效果。響應式網頁的設計對細節的要求是非常高的，需要不斷的調試，在本文提到的企業項目的設計過程中，上海市軟件行業協會給予了大力的支持，上海市軟件開發中心的IT 運維主管、網絡工程師蔣存峰先生在響應式網站的設計與實現的過程中給予了詳細的指導，再次感謝！