基于Bootstrap的響應式網頁設計與實現(xiàn)

劉志東　陳天偉

摘要；移動智能設備的廣泛應用，使得網頁的設計要求必須滿足移動設備端的完美呈現(xiàn)。該文在研究響應式網頁設計的基礎上，結合Bootstrap框架，以個人博客頁面的響應式設計與實現(xiàn)為例，闡述了響應式網頁設計的設計思想，說明了Bootstrap框架的在應用中的實現(xiàn)過程。采用基于Bootstrap框架的響應式網頁開發(fā)，不但可以縮短開發(fā)周期，提高開發(fā)效率，還可以使網頁適應千差萬別的移動設備，具有廣泛應用前景。

關鍵詞：Bootstrap；響應式設計；HTMI～；媒體查詢

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2017）07-0085-03

1背景

互聯(lián)網進入Web2.0時代，同時隨著移動通信技術的發(fā)展，越來越多的智能移動終端廣泛地應用于各個行業(yè)，促使互聯(lián)網應用必須適應移動終端的需要轉向移動平臺方向。目前移動終端種類繁多，如智能手機、智能手表，平板電腦等，移動終端與PC端最大的不同之處就是設備屏幕尺寸要小，同時不同設備的分辨率和尺寸也存在差異，PC端頁面在移動終端上無法直接呈現(xiàn)。對于用戶而言，要求在不同系統(tǒng)平臺、不同設備尺寸、不同分辨率下，訪問的頁面都應該保持良好的布局性。為了滿足用戶對訪問頁面的一致性的體驗要求，開發(fā)人員提出了基于Bootstrap框架的響應式網頁設計理念，利用網頁框架的通用模板，為用戶設計能夠自動適應不同設備需要的頁面，提升了用戶的體驗。

2響應式網頁設計

2.1概述

響應式網頁設計是指在設計和開發(fā)頁面過程中，根據頁面的應用設備的尺寸、系統(tǒng)平臺、分辨率、屏幕方向等，以及用戶的需要能夠對設備顯示頁面進行相應的布局和呈現(xiàn)。響應式開發(fā)設計的頁面，在能夠在用戶使用不同的設備（如PC機、平板電腦或者智能手機）進行頁面瀏覽時，能夠根據設備的顯示需要，對顯示分辨率、頁面布局、顯示方向等內容進行自動調制，適應設備需要，展示最佳顯示效果。響應式網頁開發(fā)的核心設計思想就是“移動優(yōu)先、漸進增強”。所謂“移動優(yōu)先”是指在對頁面進行設計時，充分考慮移動終端尺寸、分辨率的多樣性，先對移動終端的頁面效果進行設計，能夠適應移動終端的布局和用戶體驗，再來考慮PC端的頁面效果，這樣對提升網頁開發(fā)效率是有益的。而“漸進增強”是指在優(yōu)先考慮移動終端設備的前提下，頁面顯示效果從小尺寸逐漸向大尺寸轉換，逐步進行開發(fā)。在小尺寸的有限顯示空間內，頁面內容要突出顯示，而內容表現(xiàn)則要簡化，隨著尺寸的增多，在頁面內容不變的前提下，提升內容表現(xiàn)，使頁面展示效果越來越豐富。

2.2核心技術

1）彈性化

通過響應式網頁設計開發(fā)的頁面具有很強的“彈性化”。頁面展示效果根據設備尺寸的變化能夠展現(xiàn)不同的頁面布局與效果，在不同尺寸設備下，圖片的大小可以自動調整，頁面內容可以自動調整布局，不會再出現(xiàn)頁面整體效果被破壞的情況。但是基于響應式的頁面開發(fā)并不一定是最完美的，但是從目前來說，能夠給用戶在不同設備下訪問網頁提供一個不錯的用戶體驗。

2）媒體查詢

媒體查詢是實現(xiàn)頁面響應式開發(fā)的關鍵內容。根據不同設備媒體類型和顯示條件，首先定義CSS（層疊樣式表）樣式表。在實現(xiàn)響應式的過程中，通過媒體查詢，將CSS樣式表中指定的規(guī)則用于指定媒體類型或指定的條件，這樣就可以使頁面在不同的媒體類型或同一媒體不同條件下呈現(xiàn)出不同樣式表現(xiàn)。在CSS、HTML和XML中都可以進行媒體查詢設置，通常在CSS中居多，主要應用在@media和@import規(guī)則上。通過媒體查詢，不同設備上可以很方便地實現(xiàn)不同的頁面效果，對于各式各樣的移動設備而言，具有廣泛的應用。

3）流式布局

流式布局主要是相對于固定布局而言，目前PC端頁面開發(fā)采用的主要是固定局部方式。所謂固定布局就是在設計頁面的過程中，最外層的容器寬度是固定不變的，無論頁面在何種尺寸的設備中對頁面進行方面，頁面的寬度都是固定不變的，都是一樣的。而流式布局則不同，其外部容器會根據顯示尺寸自動擴展或縮小，能夠自動適應訪問頁面的設備窗口。要實現(xiàn)流式布局，頁面中各個組成部分的寬度不能采用固定值，而要采用百分比來設置，同時利用CSS中的元素浮動屬性，當設備尺寸發(fā)生變化時，頁面中的元素會根據頁面寬度按照設定的百分比進行自動調整其寬度和位置，這樣就可以很好的適應不同的設備尺寸。

3Bootstrap

3.1Bootstrap簡介

Bootstrap由Twitter的MarkOtto和Jacob Thornton共同設計與開發(fā)，它是一個包含了HTML、CSS和JavaScript的響應式網頁開發(fā)框架。Bootstrap設計的目的是解決頁面在不同尺寸設備下顯示的兼容性問題，如果依據傳統(tǒng)技術對網頁進行兼容性的實現(xiàn)是比較困難的，而Bootstrap提供眾多漂亮的樣式可供選擇，而且能夠很好地支持響應式網頁開發(fā)，通過Bootstrap框架的輔助，開發(fā)適應不同尺寸設備的網頁變得更加容易和方便。同時，基于Bootstrap框架開發(fā)的響應式網頁具有良好的可擴展性和可維護性?；谶@些優(yōu)良的特性，Bootstrap技術發(fā)展迅速，其可提供的內容也更加豐富多樣式，為開發(fā)人員提供了一個開發(fā)響應式網頁的良好解決方案。

3.2Bootstrap的優(yōu)勢

Bootstrap框架將HTML、CSS和JavaSeript進行了有機地整合，尤其是其賦予了CSS動態(tài)性，使得基于Bootstrap框架開發(fā)的頁面能夠適應不同尺寸設備的顯示，針對不同尺寸設備只需開發(fā)一套頁面即可，大大地降低了開發(fā)成本和維護成本，提高了開發(fā)效率。Bootstrap框架中包含了大量的Web組件，支持頁面的導航、進度條、縮略圖、排版等，并且得到了大部分瀏覽器的支持。Bootstrap框架設計者充分考慮開發(fā)人員在開發(fā)網頁過程中的工作強度，將Bootstrap框架進行了優(yōu)良設計，Bootstrap代碼編寫簡單，使得頁面開發(fā)人員能夠快速學習并輕松使用，大大地提高了頁面開發(fā)的效率，縮短了開發(fā)周期。

4網頁設計與實現(xiàn)

4.1網頁設計

本文以個人博客頁面為對象來完成基于Bootstrap的響應式網頁設計與實現(xiàn)。網站界面設計要求能夠自適應PC機和手機、平板電腦等移動設備的訪問，同時要求界面美觀大方。在設計過程中，遵循“移動優(yōu)先”的原則，首先針對移動終端設備進行頁面設計，滿足在不同尺寸下的設備中能夠具有良好的界面效果，在此基礎上確定PC端顯示的布局及樣式。這種移動優(yōu)先的設計理念基于移動端來開發(fā)，優(yōu)先滿足移動端，從而對PC端的用戶體驗進行了弱化。本文研究對象為個人博客網站，其訪問的環(huán)境主要以PC端為主，兼顧移動端，因此，在對本研究中的網站進行設計時，采用PC端優(yōu)先的原則來設計。

針對PC端主要進行如下設計；

1）導航條位于頁面頂部，同時導航項帶有圖標效果。

2）主頁圖片輪播占滿瀏覽器整個窗口寬度。

3）分為四欄，圖片與文字內容間隔排布。

4）頁腳水平居中，并位于頁面底端

小尺寸移動終端進行如下設計：

1）導航欄進行折疊，放入帶有Logo圖片的按鈕中。

2）單欄進行布局，只顯示文字布局，包括標題和文字內容.

3）頁腳包含其他鏈接。

本文以PC端設計為主，使用環(huán)境也以PC機為主，因此界面適應要求如下：尺寸大于768px的采用PC端布局，小于768px的采用小尺寸布局。

4.2網頁實現(xiàn)

1）HTML5結構的搭建。

Bootstrap框架基于HTML5來完成，包括CSS和JavaScript內容。因此網站中的結構要遵循HTML5的基本結構。HTML5的結構如下所示：

2）Bootstrap引入

本網站是基于Bootstrap框架來進行響應式網站設計，若要支持Bootstrap框架的相關內容，必須將其相關文件引入到頁面中。Bootstrap相關文件引入按照如下操作：

3）移動設備兼容

如要使頁面能夠在不同尺寸下展示出符合響應尺寸的效果，做到響應式頁面，需要在標簽中添加如下代碼：

通過引入該行代碼，當頁面在不同尺寸設備上顯示頁面內容時，組成頁面的各個元素占頁面的比例保持不變。Bootstrap框架中定義了四種不同尺寸設備屏幕的大小，分為如下所示；

1）超小屏幕，其屏幕像素小于768像素，前綴為xs。

2）小屏幕，其屏幕像素介于768像素和922像素之間，前綴為$ITl。

3）中等屏幕，其屏幕像素介于922像素和1200像素之間，前綴為md。

4）小屏幕，其屏幕像素大于等于1200像素，前綴為1g。

本網站在媒體查詢中實現(xiàn)的代碼如下：

4）實現(xiàn)流式布局

頁面采用流式布局進行實現(xiàn)。流式布局的實現(xiàn)需要使用Bootstrap框架中的柵格系統(tǒng)。柵格系統(tǒng)就是通過一系列的行與列的組合創(chuàng)建頁面布局，頁面內容就可以放入到創(chuàng)建好的布局當中。其網格系統(tǒng)的實現(xiàn)原理非常簡單，僅僅是通過定義容器大小，平分12份，再調整內外邊距，最后結合媒體查詢，就制作出了強大的響應式網格系統(tǒng)。Bootstrap框架中的網格系統(tǒng)就是將容器平分成12份。通過流式布局，針對不同尺寸的設備設定相對應的樣式表來實現(xiàn)列寬的控制。當尺寸發(fā)生變化時，通過調用css樣式無縫變換。本文實現(xiàn)代碼如下：實現(xiàn)效果如圖1和圖2所示。

5結束語

本文采用Bootstrap框架技術實現(xiàn)了個人博客的響應式網頁開發(fā)，以PC端優(yōu)先設計為主，兼顧移動端響應，實現(xiàn)響應式布局，并將具體網頁內容填入到指定部分實現(xiàn)整個網頁?；贐ootstrap框架開發(fā)頁面，要充分利用百分比來對頁面中的元素寬度和間隔距離進行設置，不能使用像素。同時必須要合理使用媒體查詢功能，兼顧大、中、小不同尺寸的屏幕，并且頁面中應用的圖片要具有彈性，適應不同尺寸。