基于企業(yè)的BootStrap響應(yīng)式網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

王永恒 將存峰

（1.上海中僑職業(yè)技術(shù)學(xué)院 上海市 201514 2.上海市軟件中心 上海市 201112）

1 BootStrap及相關(guān)技術(shù)簡介

1.1 Bootstrap技術(shù)

Bootstrap 是流式柵格系統(tǒng)，目前企業(yè)里比較熱門的制作前端響應(yīng)網(wǎng)頁的框架，它的顯著特點(diǎn)是移動(dòng)設(shè)備優(yōu)先，在設(shè)計(jì)與開發(fā)中，一般設(shè)置四個(gè)屏幕，移動(dòng)端，小屏，中屏和大屏，移動(dòng)端設(shè)備樣式優(yōu)先，其余設(shè)備繼承移動(dòng)端。BootStrap 支持大多數(shù)瀏覽器，如Firefox 和Chrome 等[1]。

在移動(dòng)端進(jìn)行設(shè)計(jì)時(shí)，首先需要引入meta 標(biāo)記，meta 標(biāo)記中viewport 的設(shè)置直接會(huì)影響到不同屏幕的響應(yīng)，Bootstrap 框架自帶.container 或 .container-fluid 類，稱為布局容器，行必須包含在此布局容器中，即行必須在.container class 內(nèi)，目的是獲得適當(dāng)?shù)腶lignment 和padding。padding 是內(nèi)邊距，可以設(shè)置列中內(nèi)容的邊距，該內(nèi)邊距是通過 .rows 上的外邊距（margin）取負(fù)，表示第一列和最后一列的行偏移[2]。

1.2 響應(yīng)式布局

在傳統(tǒng)的網(wǎng)頁設(shè)計(jì)與開發(fā)中，在不同的設(shè)備終端顯示時(shí)，需要單獨(dú)設(shè)計(jì)每個(gè)終端的布局，PC 端設(shè)計(jì)一套，手機(jī)端設(shè)計(jì)一套。而使用響應(yīng)式布局可以實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽不同的網(wǎng)頁的布局。響應(yīng)式布局可以通過檢測視口的分辨率響應(yīng)不同的客戶端的布局和內(nèi)容，通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。

2 基于BootStrap響應(yīng)式網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

文中所設(shè)計(jì)的企業(yè)網(wǎng)站項(xiàng)目包含首頁，新聞頁面，樂園和聯(lián)系四個(gè)主頁面，本文主要是以“首頁”和“聯(lián)系我們”頁面為例進(jìn)行分析和設(shè)計(jì)。“首頁”中主要是對(duì)Carousel 插件和nav 插件進(jìn)行設(shè)計(jì)和實(shí)現(xiàn)，Grid System 布局的設(shè)計(jì)選擇了結(jié)構(gòu)比較清晰的“聯(lián)系我們”頁面。

2.1 meta標(biāo)簽引入

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

2.2 BootStrap下載與安裝

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

圖1：meta 標(biāo)記

圖2：bootstrap.css 引入位置

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

2.3 nav導(dǎo)航模塊和Bootstrap滑塊設(shè)計(jì)與實(shí)現(xiàn)

2.3.1 nav 導(dǎo)航模塊的設(shè)計(jì)和實(shí)現(xiàn)

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

具體的設(shè)計(jì)如下：

（1）最外面直接使用＜nav＞＜/nav＞標(biāo)簽是導(dǎo)航條，class 為navbar，指定一個(gè)顏色，這里使用的navbar-inverse：黑底白字，daohang 是用戶自定義的類，實(shí)現(xiàn)上邊距和背景的顏色；

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

圖4：四屏導(dǎo)航效果圖

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

2.3.2 Bootstrap 滑塊（Carousel）設(shè)計(jì)與實(shí)現(xiàn)

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

Carousel 設(shè)計(jì)詳細(xì)過程如下：

（1）輪播指標(biāo)：在此部分的設(shè)計(jì)中，使用carousel-indicators設(shè)置indicators 的索引項(xiàng)， data-slide-to 將每個(gè)輪播指標(biāo)與圖拼列的索引位置一一對(duì)應(yīng)，索引從 0 開始計(jì)數(shù)， data-target="#myCarousel"將所有輪播指標(biāo)指向激活輪播的元素，就是id=” myCarousel “。

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

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

圖5：導(dǎo)航代碼結(jié)構(gòu)

圖6：輪播箭頭效果

圖7：Section 主體部分和footer 版權(quán)參考代碼

2.4 BootStrap柵格布局（Grid System）的設(shè)計(jì)及實(shí)現(xiàn)

本部分的Grid System 設(shè)計(jì)以“我們”頁面為例展開設(shè)計(jì)，本頁面分為三部分，header 頂部logo 和導(dǎo)航部分（上文中已經(jīng)介紹），中間Section 主體和底部Footer 版權(quán)部分。

2.4.1 Section 主體部分的設(shè)計(jì)

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

2.4.2 Footer 版權(quán)部分的設(shè)計(jì)

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

3 總結(jié)

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