潘 超,許 燁

(南陽職業(yè)學(xué)院,河南 南陽 474750)

0 引言

隨著現(xiàn)代社會經(jīng)濟(jì)的快速發(fā)展,人們的生活水平得到了極大改善,互聯(lián)網(wǎng)與智能設(shè)備已經(jīng)全面融入人們?nèi)粘Ｉ钆c工作,手機(jī)成為人們獲取信息、瀏覽網(wǎng)頁的重要移動設(shè)備。Web 開發(fā)人員在進(jìn)行信息發(fā)布以及處理時,應(yīng)當(dāng)充分重視移動設(shè)備的應(yīng)用,然而要針對移動設(shè)備開發(fā)專門的應(yīng)用軟件,必然要投入大量的資金和人力。如何簡單、有效地設(shè)計出傳統(tǒng)計算機(jī)設(shè)備的Web 應(yīng)用,并且較好地與移動設(shè)備兼容,成了Web 開發(fā)人員面臨的重要問題。為了有效解決此類問題,Ethan Marcotte 提出了響應(yīng)式Web 設(shè)計。Bootstrap 是十分關(guān)鍵的框架結(jié)構(gòu),依托于現(xiàn)代新型技術(shù)的引用,不僅能夠促進(jìn)系統(tǒng)平穩(wěn)升級,還能夠?yàn)槭褂谜邘砹己玫捏w驗(yàn),從而獲得更加廣泛的應(yīng)用[1]。本文提出了Bootstrap 背景下響應(yīng)式Web 前端設(shè)計的方法,希望為進(jìn)一步推動Web 前端設(shè)計發(fā)展提供幫助。

1 響應(yīng)式Web 設(shè)計

1.1 響應(yīng)式Web 設(shè)計內(nèi)涵與CSS 框架分析

響應(yīng)式Web 設(shè)計面向的是所有設(shè)備的網(wǎng)頁內(nèi)容,能夠?qū)崿F(xiàn)其科學(xué)布局的顯示體制[2]。在響應(yīng)式Web 設(shè)計中,引入了現(xiàn)代新型的設(shè)計理念,即移動設(shè)備優(yōu)先,再全面覆蓋桌面設(shè)備。在這種需求越來越旺盛的背景下,出現(xiàn)了各種類型的響應(yīng)式Web 框架,為開展Web前端設(shè)計提供了重要支持。

各種框架設(shè)計的根本目的都是為了提高CSS 應(yīng)用的便捷性,使得Web 前端開發(fā)人員能夠在較短的時間內(nèi)完成多種常用類型頁面的布局,不再需要重新編輯底層CSS[3]。此外,響應(yīng)式Web 框架還可以引導(dǎo)Web前端設(shè)計人員規(guī)范框架命名方式以及代碼編寫模式,重復(fù)利用開發(fā)出的許多代碼,顯著改善代碼的適用范圍,提高代碼開發(fā)速度。Bootstrap 框架是Twitter 公司W(wǎng)eb 前端設(shè)計人員開發(fā)的開源框架,我國也開發(fā)出了一些開源框架,其代表框架有Amaze,UI 等[4]。

1.2 響應(yīng)式Web 設(shè)計關(guān)鍵點(diǎn)

在進(jìn)行響應(yīng)式Web 前端設(shè)計時,設(shè)計人員通常需要重點(diǎn)把握以下兩個關(guān)鍵點(diǎn),分別是:有無必要運(yùn)用響應(yīng)式CSS 框架以及怎樣高效設(shè)計原型[5]。第一,是否使用CSS 框架,需要聯(lián)系Web 前端的復(fù)雜程度。在Web 前端的布局較為單一、組件不多的情況下,通常不運(yùn)用CSS 框架。這種情況下全部代碼均從零開始,同時編寫代碼也要從桌面設(shè)備慢慢變化為移動設(shè)備。為了提高Web 前端設(shè)計效果,相關(guān)人員可以先運(yùn)用固定布局展示桌面實(shí)際效果,在大致確定之后再改為流式布局。第二,在實(shí)際進(jìn)行Web 前端設(shè)計時,相關(guān)人員要依照不同的設(shè)備類型設(shè)計出多種多樣的效果圖,同時科學(xué)把握頁面布局改變、視窗縮放表達(dá)等效果。最后將設(shè)計完成的效果圖放置到不同設(shè)備中檢測,從而第一時間探索到一個完美平衡點(diǎn)。

2 Bootstrap 框架及在響應(yīng)式Web 設(shè)計中的應(yīng)用

2.1 Bootstrap 概述

Bootstrap 是由Twitter 公司設(shè)計人員在2011 年開發(fā)出的一種框架,其能夠?yàn)轫憫?yīng)式Web 前端設(shè)計中的各種問題提供有效的解決方法。Bootstrap 框架整合了HTML5,CSS3 以及jQuery 等多種技術(shù),既涵蓋了柵格系統(tǒng)、排版、表格以及圖片等通用型代碼,又涵蓋了各種組件庫與JavaScript 插件庫等,甚至還能夠選擇不同形式的主題。設(shè)計人員通過Bootstrap 框架的應(yīng)用,一方面能夠快速、高效地統(tǒng)一網(wǎng)頁界面,另一方面也有助于改善使用者的實(shí)際體驗(yàn)。

2.2 基于Bootstrap 的響應(yīng)式Web 前端設(shè)計研究

2.2.1 Bootstrap 應(yīng)用到響應(yīng)式Web 前端設(shè)計中的流程

第一,相關(guān)人員從網(wǎng)絡(luò)上下載能夠滿足生產(chǎn)條件的Bootstrap,同時對文件結(jié)構(gòu)進(jìn)行相應(yīng)地調(diào)整與改進(jìn),之后依托于Bootstrap 的通用模板,對其進(jìn)行進(jìn)一步的修改,使其能夠很好地滿足項(xiàng)目應(yīng)用的需求。需要格外留意的是,js 應(yīng)當(dāng)要排列在body 元素的末尾位置,并且需要先加載完成jQuery.min.js 文件[6]。

第二,相關(guān)人員依托Bootstrap 中的格柵系統(tǒng)完成對應(yīng)的響應(yīng)式規(guī)劃,同時在模塊中引入合理的元素以及系統(tǒng)自帶的組件,以此完成頁面排版的工作;再將其導(dǎo)入到多種輸出設(shè)備上開展運(yùn)行測試的工作,以此查看其有無達(dá)到理想的設(shè)計效果。

第三,根據(jù)設(shè)計完成的Web 網(wǎng)頁效果,圍繞具體要求開展html 組件代碼的編寫,也可在原有代碼組件html 的基礎(chǔ)之上進(jìn)行改進(jìn),最終實(shí)現(xiàn)html 結(jié)構(gòu)的語義化。此外,通過增添和調(diào)整的方式進(jìn)行CSS 代碼的優(yōu)化,最終獲得Web 前端設(shè)計的效果圖。在實(shí)際設(shè)計產(chǎn)出過程中,得到的Web 前端設(shè)計效果圖往往與設(shè)計人員的原始構(gòu)思有一定的差異,這就需要加強(qiáng)設(shè)計人員之間的交流、有針對性地解決各種問題,從而獲得雙方滿意的結(jié)果。

第四,在相關(guān)人員進(jìn)行插件選擇過程中,盡可能使用Bootstrap 自身包含的jQuery 插件,以此獲得良好的動畫與交互效果。當(dāng)難以達(dá)到這種插件的使用需求時,再選取其他的jQuery 插件,確?？梢垣@得良好的畫面效果,改善使用者的體驗(yàn)感受[7]。

2.2.2 Bootstrap 應(yīng)用到響應(yīng)式Web 前端設(shè)計中的技巧與方法

設(shè)計人員在基于Bootstrap 架構(gòu)開展響應(yīng)式Web前端設(shè)計過程中,要深入學(xué)習(xí)和探究Bootstrap 源代碼,最大程度依照Bootstrap 代碼運(yùn)用規(guī)則進(jìn)行設(shè)計,以此充分發(fā)揮Bootstrap 的應(yīng)用優(yōu)勢。設(shè)計人員在實(shí)際將Bootstrap 應(yīng)用到響應(yīng)式Web 前端設(shè)計中時,可以使用以下技巧與方法:

CSS 聲明次序:需要將屬性相似的聲明放置到同一組,同時依照特定的次序進(jìn)行排列,具體次序?yàn)閜ositioning,box model,typographic,visual。

CSS 命名原則:借鑒Bootstrap 源代碼中的相關(guān)命名方式與標(biāo)準(zhǔn),對CSS 代碼執(zhí)行修改、增減操作。下列為面板組組件代碼:

為了保證原始面板組件的形式不發(fā)生變化,并且能夠很好地契合項(xiàng)目實(shí)際要求,相關(guān)人員需要對代碼進(jìn)行一定的修改,具體操作如下:

將代碼