徐曉

(無錫機電高等職業(yè)技術學校，無錫 214028)

0 引言

隨著國內的互聯(lián)網業(yè)務迅速發(fā)展，和Android和iPhone等智能手機日益普及，促使移動端Web開發(fā)得到充分的發(fā)揮。移動平臺的開發(fā)應用是近年來的熱門，隨著不斷發(fā)展的瀏覽器和移動設備種類的增多，如何高效、快捷地基于移動平臺的Web開發(fā)就成了問題。HTML5和CSS3是移動互聯(lián)網最前沿的Web技術，采用HTML5和CSS3技術的響應式網頁設計，可以使網站兼容多種設備和屏幕。Web開發(fā)人員經常借助于第三方框架的特征。Bootstrap就是這樣一個方便快捷、流行和開放源代碼的框架。使用Bootstrap框架可以在開發(fā)響應式網站的時候，不必因為CSS有太多煩惱。Bootstrap提供了一個豐富的CSS框架，當然，如果有需要也可以自行定義。添加常見的Web頁面元素，比如導航菜單、按鈕、form表單元素和排版都會變得非常容易。作為Web前端開發(fā)框架，Bootstrap的流行趨勢很容易理解。它為大多數(shù)標準的UI界面設計提供了用戶友好、跨瀏覽器的解決方案，它現(xiàn)成可用而且HTML標記、CSS樣式及JavaScript行為的組合，極大地提高了Web前端的開發(fā)效率。本文主要研究基于Bootstrap技術的移動端Web開發(fā)。

1 HTML5、CSS3、JavaScript、Jquery簡介

1.1 HTML5簡介

HTML5的發(fā)展愈來愈邁向成熟穩(wěn)定，很多的移動端開發(fā)已經逐漸走進大家平常生活中了，HTML5的技術已經完美取代了以往傳統(tǒng)網站上的互動Flash。HTML5是新一代的HTML標準，它不僅擁有HTML中所有的特性，而且添加了很多實用的特性，如視頻、音頻、畫布(canvas)等。根據W3C的發(fā)言稿稱：“HTML5是開放的Web網絡平臺的奠基石。”

1.2 CSS3簡介

CSS3是CSS的加強升級版。以前的規(guī)范作為一個模塊實在是太龐大、復雜，所以加以改進的方法是將它分解為一些小的模塊，把更多新的模塊也加入進來，融合成一個新的簡單又不冗余的模塊。這些模塊包括：盒子模型、列表模型、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。

1.3 JavaScript簡介

JavaScript是一種安全，基于時間驅動和對象的腳本語言。它與HTML，CSS結合起來，用于增強功能，并能很好的提高與最終使用時相互之間的交互性能。客戶端的JavaScript是解釋型語言，不需要編譯，省了道工序?？墒亲鳛镠TML文件的一部分是直接由解釋器解釋執(zhí)行的。

1.4 Jquery簡介

Jquery是一種新的支持HTML元素選取和操作、CSS操作、JS特效與動畫、DOM處理、Ajax等快速的、簡捷的JavaScript庫。Jquery優(yōu)勢所在：具有輕量級；強大的選擇器；代碼量雖然很少但具有功能很強大；鏈式語法；可靠的事件處理機制；完善的Ajax；出色的瀏覽器兼容性。

2 響應式開發(fā)框架Bootstrap

Bootstrap是一個用于構建響應式網站的框架。無論你想構建應用程序、博客還是普通企業(yè)網站，Bootstrap都能靈活適用，只要你想得到的地方，它都能行。Bootstrap把HTML、CSS和JavaScript組合起來，為構建穩(wěn)定的網站提供了基礎設施，也能提高開發(fā)效率?；谀J的網格系統(tǒng)，布局不像以前那么繁瑣，比之前減輕了很大的工作量，Bootstrap自帶很多CSS按鈕、導航和表格的漂亮樣式，開發(fā)人員用起來也得心應手。十幾個JavaScript插件更是讓我們?yōu)橹谱骶W站交互能力減輕了工作量，提供了強有力的保障。

Bootstrap框架具有以下重要特性:①一套完整的基礎CSS插件；②豐富的預定義樣式表；③一組基于Jquery的JS插件集；④一個非常靈活的響應式柵格系統(tǒng)，并且崇尚移動先行(MobileFirst)的思想。

3 實現(xiàn)響應式Bootstrap

下載用于生產環(huán)境的Bootstrap框架，里面含有編譯并壓縮好的CSS、JavaScript和字體文件。但是Bootstrap提供的默認樣式往往不能滿足我們的需求，所以我們還需要自己定義CSS文件。

3.1 響應式導航條

本網站采用的響應式導航在小于768設備情況下，移動端導航條將折疊，然后會出現(xiàn)一個可展開和可以隱藏內容的按鈕圖標，則在大于768設備情況下，在窗口增大時會變?yōu)樗秸归_。具體方法還是在使用了Bootstrap框架中HTML5標簽