張晶晶 曹雙雙 楊怡潔 劉玲 蔡夢(mèng)媛

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

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

中圖分類(lèi)號(hào)：TP311 ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

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

1背景

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

2 Bootstrap

2.1 簡(jiǎn)介

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

2.2核心內(nèi)容

2.2.1媒體查詢(xún)

媒體查詢(xún)可以讓開(kāi)發(fā)者根據(jù)終端設(shè)備的特性，如屏幕大小、視口、設(shè)備為其設(shè)定特定CSS樣式，媒體查詢(xún)由媒體類(lèi)型和檢測(cè)媒體特性的條件表達(dá)式組成。使用媒體查詢(xún)，頁(yè)面可以在不改變內(nèi)容的情況下，呈現(xiàn)出特定的視覺(jué)效果。媒體查詢(xún)的表達(dá)式通常由設(shè)備和設(shè)備特征來(lái)表示，如：@media 設(shè)備類(lèi)型and（設(shè)備特征），在CSS、HTML和XML上都可以設(shè)置媒體查詢(xún)，通過(guò)媒體查詢(xún)也可以很方便實(shí)現(xiàn)頁(yè)面效果。例如在不同頁(yè)面上顯示不同的背景顏色就可以這樣設(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)式布局有很強(qiáng)的彈性化，不同的媒體設(shè)備下能夠彈性適應(yīng)，展示不同的效果。在頁(yè)面中圖片和文字大小可以根據(jù)媒體設(shè)備自動(dòng)適應(yīng)，各個(gè)版塊內(nèi)容也可以自動(dòng)調(diào)整布局，頁(yè)面不會(huì)出現(xiàn)排版混亂的情況。對(duì)于用戶(hù)來(lái)說(shuō)是一個(gè)很好的體驗(yàn)，也能夠很好地兼容現(xiàn)在的主流設(shè)備。

2.2.3流式布局

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

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

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

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

3.2柵格系統(tǒng)

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

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

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

<！ DOCTYPE html>

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

4結(jié)論

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

參考文獻(xiàn)：

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

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

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

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