基于Bootstrap框架的響應(yīng)式網(wǎng)站設(shè)計

張晶晶 曹雙雙 楊怡潔 劉玲 蔡夢媛

摘要：隨著移動設(shè)備的廣泛應(yīng)用，網(wǎng)頁必須實現(xiàn)在不同設(shè)備上呈現(xiàn)相應(yīng)的視覺效果。該文在研究響應(yīng)式網(wǎng)頁設(shè)計上，結(jié)合了Bootstrap框架，開發(fā)者可以讓網(wǎng)頁在不同的設(shè)備上都獲得最佳的體驗。它最大的優(yōu)勢在于響應(yīng)式布局，對其核心技術(shù)媒體查詢、彈性化和流式布局等進行了相關(guān)介紹，并對使用Bootstrap框架搭建WEB項目進行了描述。

關(guān)鍵詞：Bootstrap;響應(yīng)式;WEB網(wǎng)頁;柵格系統(tǒng)

中圖分類號：TP311 ? ? ? ?文獻標(biāo)識碼：A

文章編號：1009-3044（2020）34-0247-02

Abstract： With the widespread use of mobile devices， web pages must be able to present the corresponding visual effects on different devices.This article combines the Bootstrap framework to study responsive web design， enabling developers to make web pages experience best on different devices.Its biggest advantage lies in responsive layout. It introduces the core technology media query， flexible and streaming layout， and describes the use of Bootstrap framework to build a WEB project.

Keywords：Bootstrap; response;WEB page;grid system

Bootstrap是目前前端開發(fā)主流框架之一，定義了許多CSS樣式和JS插件，開發(fā)人員可以在框架基礎(chǔ)上進行可開發(fā)，簡化編碼。最大的特點就是在各種終端設(shè)備上進行響應(yīng)式布局，同一套頁面可以適應(yīng)不同分辨率的設(shè)備。相對于以往的固定像素比設(shè)計有了很大的進步，更適應(yīng)當(dāng)代互聯(lián)網(wǎng)。

1背景

21世紀(jì)，互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，使用人群的不斷增多，各種智能移動終端廣泛在行業(yè)中使用，所以PC端應(yīng)用必須適應(yīng)移動終端的需要。移動終端種類繁多，各種都存在差異，而PC端一成不變頁面已經(jīng)無法滿足用戶的需求。各種設(shè)備都應(yīng)該呈現(xiàn)良好的布局，隨著終端設(shè)備的改變而隨之變化。為了滿足用戶的這一需求，就催生出了響應(yīng)式網(wǎng)頁開發(fā)的理念，兼容不同的終端設(shè)備，給用戶最佳的視覺體驗。

2 Bootstrap

2.1 簡介

Bootstrap是2011年新推出的一款前端技術(shù)，快速開發(fā)WEB應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap代碼編寫簡單，開發(fā)人員在熟悉基礎(chǔ)代碼的情況下就能很好地使用Bootstrap框架，響應(yīng)式布局能夠適應(yīng)于臺式機、平板電腦和手機，它為開發(fā)人創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案;含有強大的內(nèi)置組件，易于定制;極大縮短周期，增加效率。因為直接使用框架的原因，后期維護也很方便。

2.2核心內(nèi)容

2.2.1媒體查詢

媒體查詢可以讓開發(fā)者根據(jù)終端設(shè)備的特性，如屏幕大小、視口、設(shè)備為其設(shè)定特定CSS樣式，媒體查詢由媒體類型和檢測媒體特性的條件表達式組成。使用媒體查詢，頁面可以在不改變內(nèi)容的情況下，呈現(xiàn)出特定的視覺效果。媒體查詢的表達式通常由設(shè)備和設(shè)備特征來表示，如：@media 設(shè)備類型and（設(shè)備特征），在CSS、HTML和XML上都可以設(shè)置媒體查詢，通過媒體查詢也可以很方便實現(xiàn)頁面效果。例如在不同頁面上顯示不同的背景顏色就可以這樣設(shè)置：

@media screen and （min-width：900px）{

body{

background-color：red;

}

}

@media screen and （min-width：600px） and （max-width：899px）{

body{

background-color：blue;

}

}

2.2.2彈性化

響應(yīng)式布局有很強的彈性化，不同的媒體設(shè)備下能夠彈性適應(yīng)，展示不同的效果。在頁面中圖片和文字大小可以根據(jù)媒體設(shè)備自動適應(yīng)，各個版塊內(nèi)容也可以自動調(diào)整布局，頁面不會出現(xiàn)排版混亂的情況。對于用戶來說是一個很好的體驗，也能夠很好地兼容現(xiàn)在的主流設(shè)備。

2.2.3流式布局

流體布局相對于固定布局就在于對網(wǎng)站尺寸測量單位不同，固定布局就是最外面的框架是固定像素，而流式布局則不用考慮設(shè)備尺寸或屏幕大小，它選擇的是百分比，為網(wǎng)頁提供了很強的可塑性和流動性。流式布局也是目前的主流布局，在容器發(fā)生變化時，會根據(jù)實際情況來調(diào)整大小和位置，流式布局與媒體查詢密切相關(guān)。如圖1流式布局和圖2固定布局所示。

3實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計

3.1響應(yīng)式導(dǎo)航條

傳統(tǒng)的導(dǎo)航條一般是橫向顯示在網(wǎng)頁頂部，無法根據(jù)頁面變化做出改變。采用列表li進行排列，利用左浮動的特性實現(xiàn)橫向，但是當(dāng)頁面在小分辨率的終端設(shè)備下，容易出現(xiàn)遮擋或換行的情況，影響用戶體驗感。而Bootstrap提供了導(dǎo)航組件，可以根據(jù)實際情況進行折疊內(nèi)容，隨著可用視口寬度的增加，導(dǎo)航欄也會水平展開。實現(xiàn)響應(yīng)式導(dǎo)航條的關(guān)鍵是需要設(shè)置斷點，并給導(dǎo)航內(nèi)容添加相應(yīng)組件，通過媒體查詢來進行相應(yīng)改變。

3.2柵格系統(tǒng)

Bootstrap最強大的地方就在于柵格系統(tǒng)，在設(shè)計過程中用固定的格子進行布局。柵格系統(tǒng)有三層基本結(jié)構(gòu)，最外層是container和最里層是column，以及夾層row。row里面可以包含很多column，柵格系統(tǒng)就是通過row和column的組合來創(chuàng)建頁面布局，它使用4種柵格選項來形成柵格系統(tǒng)，如表1所示。

3.3搭建響應(yīng)式網(wǎng)頁基本框架

在基本的HTML框架上需要引入自適應(yīng)標(biāo)簽，由于Bootstrap是以移動優(yōu)先為主要準(zhǔn)則，所以為了實現(xiàn)響應(yīng)式布局的效果，我們需要在head標(biāo)簽中入對應(yīng)的meta標(biāo)簽，才能夠保證頁面在所有設(shè)備上初始化的時候，會保持1.0的比例。再根據(jù)需要使用柵格布局，也就是在整個內(nèi)容寫在container容器之內(nèi)。其具體配置代碼如下所示：

<！ DOCTYPE html>

其中前3個標(biāo)簽分別用于設(shè)置字符集、文檔兼容模式聲明和確定視口寬度，meta標(biāo)簽必須放在頁面代碼的最前面其他內(nèi)容跟隨后面，代碼是從上向下執(zhí)行的，所以在加載完頁面之前應(yīng)先加載完兩個js文件，避免出現(xiàn)錯誤。

4結(jié)論

響應(yīng)式布局已經(jīng)成為當(dāng)下流行的一種概念，通過框架可以快速搭建響應(yīng)式頁面。Bootstrap給前端設(shè)計人員解決了一大麻煩，無疑是前端框架的佼佼者。既能夠很好地兼容各種終端媒體設(shè)備，又能給用戶很好的視覺體驗。但是否引用Bootstrap框架還要視具體情況而定，響應(yīng)式網(wǎng)頁在解決多設(shè)備問題的同時還帶來了其他一些問題：如效率低和代碼冗余都是值得重視的。

參考文獻：

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

[2] 紀(jì)娟，林亮亮.基于Bootstrap的自適應(yīng)自主測評系統(tǒng)設(shè)計與實現(xiàn)[J].安徽點電子信息職業(yè)技術(shù)學(xué)院學(xué)報，2017，16（93）：27-32.

[3] 劉志東，陳天偉.基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2007，13（7）：85-87.

【通聯(lián)編輯：代影】