基于Bootstrap 響應式的Web 前端設計

潘 超,許 燁

(南陽職業學院,河南 南陽 474750)

0 引言

隨著現代社會經濟的快速發展,人們的生活水平得到了極大改善,互聯網與智能設備已經全面融入人們日常生活與工作,手機成為人們獲取信息、瀏覽網頁的重要移動設備。Web 開發人員在進行信息發布以及處理時,應當充分重視移動設備的應用,然而要針對移動設備開發專門的應用軟件,必然要投入大量的資金和人力。如何簡單、有效地設計出傳統計算機設備的Web 應用,并且較好地與移動設備兼容,成了Web 開發人員面臨的重要問題。為了有效解決此類問題,Ethan Marcotte 提出了響應式Web 設計。Bootstrap 是十分關鍵的框架結構,依托于現代新型技術的引用,不僅能夠促進系統平穩升級,還能夠為使用者帶來良好的體驗,從而獲得更加廣泛的應用[1]。本文提出了Bootstrap 背景下響應式Web 前端設計的方法,希望為進一步推動Web 前端設計發展提供幫助。

1 響應式Web 設計

1.1 響應式Web 設計內涵與CSS 框架分析

響應式Web 設計面向的是所有設備的網頁內容,能夠實現其科學布局的顯示體制[2]。在響應式Web 設計中,引入了現代新型的設計理念,即移動設備優先,再全面覆蓋桌面設備。在這種需求越來越旺盛的背景下,出現了各種類型的響應式Web 框架,為開展Web前端設計提供了重要支持。

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

1.2 響應式Web 設計關鍵點

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

2 Bootstrap 框架及在響應式Web 設計中的應用

2.1 Bootstrap 概述

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

2.2 基于Bootstrap 的響應式Web 前端設計研究

2.2.1 Bootstrap 應用到響應式Web 前端設計中的流程

第一,相關人員從網絡上下載能夠滿足生產條件的Bootstrap,同時對文件結構進行相應地調整與改進,之后依托于Bootstrap 的通用模板,對其進行進一步的修改,使其能夠很好地滿足項目應用的需求。需要格外留意的是,js 應當要排列在body 元素的末尾位置,并且需要先加載完成jQuery.min.js 文件[6]。

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

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

第四,在相關人員進行插件選擇過程中,盡可能使用Bootstrap 自身包含的jQuery 插件,以此獲得良好的動畫與交互效果。當難以達到這種插件的使用需求時,再選取其他的jQuery 插件,確保可以獲得良好的畫面效果,改善使用者的體驗感受[7]。

2.2.2 Bootstrap 應用到響應式Web 前端設計中的技巧與方法

設計人員在基于Bootstrap 架構開展響應式Web前端設計過程中,要深入學習和探究Bootstrap 源代碼,最大程度依照Bootstrap 代碼運用規則進行設計,以此充分發揮Bootstrap 的應用優勢。設計人員在實際將Bootstrap 應用到響應式Web 前端設計中時,可以使用以下技巧與方法:

CSS 聲明次序:需要將屬性相似的聲明放置到同一組,同時依照特定的次序進行排列,具體次序為positioning,box model,typographic,visual。

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

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

將代碼