Bootstrap前端框架技術(shù)的應(yīng)用研究

何 莉

（長江職業(yè)學(xué)院 湖北 武漢 430074）

1 引言

隨著移動互聯(lián)網(wǎng)時(shí)代的到來，移動端網(wǎng)頁使用量逐年提升。響應(yīng)式網(wǎng)頁設(shè)計(jì)是指在網(wǎng)頁設(shè)計(jì)與開發(fā)時(shí)，根據(jù)用戶的設(shè)備環(huán)境和行為習(xí)慣進(jìn)行相對應(yīng)的調(diào)整，同一個(gè)網(wǎng)頁能夠自適應(yīng)多個(gè)終端設(shè)備，而不是為每個(gè)終端分別設(shè)計(jì)特定的版本。響應(yīng)式網(wǎng)頁設(shè)計(jì)的優(yōu)勢在于既能提高代碼利用率，又能根據(jù)不同的設(shè)備尺寸呈現(xiàn)出不同的頁面效果，有效提升用戶體驗(yàn)度。

2 相關(guān)技術(shù)簡介

2.1 響應(yīng)式網(wǎng)頁設(shè)計(jì)

響應(yīng)式網(wǎng)頁設(shè)計(jì)最初是由伊桑·馬卡特（Ethan Marcotte）提出來的，來源于他曾發(fā)表的“Responsive Web Design”文章中提出的一個(gè)概念、一門新興的學(xué)科——“響應(yīng)式架構(gòu)(responsive architecture)”，并提出了物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。響應(yīng)式是一種全新的網(wǎng)頁設(shè)計(jì)理念，提倡向下兼容、移動優(yōu)先，最終實(shí)現(xiàn)同一個(gè)網(wǎng)頁能夠自適應(yīng)多個(gè)終端設(shè)備。

2.2 Bootstrap簡介

Bootstrap來自Twitter，是目前非常受歡迎的前端開源工具包，用于快速開發(fā)Web項(xiàng)目和應(yīng)用程序。Bootstrap基于HTML、CSS、JAVASCRIPT，自2011年8月在GitHub上發(fā)布，推出以后頗受廣大用戶青睞。Bootstrap中預(yù)定義了一套CSS樣式以及與樣式相對應(yīng)的jQuery（jQuery是一個(gè)快速、小巧、功能豐富的JAVASCRIPT庫）代碼。在網(wǎng)頁開發(fā)時(shí)，首先要在HTML結(jié)構(gòu)的之間引入“bootstrap.min.css”，接著在之間引入“bootstrap.min.js”，然后在class類名稱中引入Bootstrap中的樣式類，即可實(shí)現(xiàn)預(yù)期的網(wǎng)頁效果[1]。

2.3 Bootstrap的優(yōu)勢

基于Bootstrap前端框架的響應(yīng)式網(wǎng)頁設(shè)計(jì)，能夠自適應(yīng)于普通電腦、平板電腦和手機(jī)等不同終端。自Bootstrap3開始，移動設(shè)備優(yōu)先的CSS樣式便一直貫穿始終。目前幾乎所有主流瀏覽器都支持它，包括IE、Firefox、chrome、Safari等。Bootstrap是開源的，不僅包含了功能強(qiáng)大的內(nèi)置組件，還基于Web易于進(jìn)行個(gè)性定制，為程序開發(fā)者提供了一套相對統(tǒng)一又簡潔靈活的解決方案。

3 常見的布局方式

3.1 媒體查詢

在響應(yīng)式網(wǎng)頁設(shè)計(jì)時(shí)，程序開發(fā)者如果使用媒體查詢的方式來布局整個(gè)頁面，便可根據(jù)視口寬度、設(shè)備方向等來改變網(wǎng)頁的展現(xiàn)方式。媒體查詢的語句從“@media”開始，包含媒體類型、條件表達(dá)式，例如：

此行代碼表示媒體類型為screen，屏幕寬度小于等于1024px時(shí)應(yīng)用的CSS樣式。

3.2 百分比布局

若運(yùn)用媒體查詢的方式來布局網(wǎng)頁，不足之處在于只能針對某幾個(gè)特定的區(qū)間范圍內(nèi)有效。在同一區(qū)間內(nèi)，改變網(wǎng)頁的窗口大小，頁面布局并沒有發(fā)生變化。而隨著移動終端設(shè)備的日益增多，視口寬度也在不斷發(fā)生著變化，媒體查詢的布局方式顯然滿足不了多樣化的需求。因此，要想真正實(shí)現(xiàn)自適應(yīng)的響應(yīng)式網(wǎng)頁，還需將百分比布局和媒體查詢結(jié)合起來使用。固定寬度（以像素為單位）換算為百分比寬度相當(dāng)便捷，用來實(shí)現(xiàn)百分比布局網(wǎng)頁[2]。

換算公式為：目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度，示例代碼見圖1。

圖1 百分比布局示例代碼

3.3 彈性盒布局

彈性盒布局是實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)的布局方式之一。在這種布局方式下，不用擔(dān)心彈性盒容器與內(nèi)容之間的外邊距會合并，它不僅改進(jìn)了盒模型，還增強(qiáng)了盒模型的靈活度。在彈性盒布局中，display屬性用于指定彈性盒的容器，其值可以為flex；如果為行內(nèi)元素，值為inline-flex。Flex屬性是flex-grow、flex-shrink和flex-basis的簡寫，可以設(shè)置擴(kuò)展、收縮等比率，用于設(shè)置子元素的伸縮性。Flexflow屬性是flex-direction和flex-wrap的簡寫，能夠設(shè)置彈性子元素的排列方式。Justify-content屬性能夠設(shè)置子元素如何在當(dāng)前軸方向的排列，align-items屬性用于設(shè)置子元素在垂直于軸的方向上的排列。例如：

此段代碼表示類名稱為“box”的div，顯示方式為彈性盒布局，元素從上到下排列，邊框粗細(xì)為1 px，紅色實(shí)線，內(nèi)邊距為5 px。

3.4 響應(yīng)式柵格系統(tǒng)

Bootstrap中的柵格系統(tǒng)是指使用相對固定的網(wǎng)格布局網(wǎng)頁，排版效果如同網(wǎng)格般清晰工整。響應(yīng)式柵格系統(tǒng)會隨著屏幕尺寸的增加，每一行最多分為12列。使用柵格系統(tǒng)進(jìn)行布局，最大的優(yōu)點(diǎn)就是可以讓網(wǎng)頁布局適應(yīng)不同的終端設(shè)備[3]。Bootstrap中的柵格系統(tǒng)自動地將每一行分為12列，由一系列包含內(nèi)容的行和列組成。例如“col-lg-*”“col-md-*”“col-sm-*”和“col-xs-*”，在這些類名稱中，“*”所代表的參數(shù)表示在當(dāng)前屏幕大小下每個(gè)div所占的列數(shù)，例如:

由此可見，這個(gè)div在當(dāng)前屏幕中所占位置是：“.col-xs-4”表明在超小屏幕中占4列（12/4列=3個(gè)div），也就相當(dāng)于占比1/3；“.col-md-6”表明在中等屏幕中占6列也就是（12/6列=2個(gè)div），也就是占到了屏幕的一半。以此類推，假若我們要在超小屏幕上一行顯示4個(gè)div，則可以表示為“col-xs-3”；在超大屏幕上顯示2個(gè)div（12/6列=2個(gè)div），則 col-lg-6。因此，通過柵格系統(tǒng)來控制響應(yīng)式網(wǎng)頁的排版效果，其實(shí)是相當(dāng)方便的。

4 案例實(shí)現(xiàn)

在網(wǎng)站開發(fā)中，導(dǎo)航欄的主要功能是能夠快速地引導(dǎo)用戶訪問目標(biāo)內(nèi)容，一般都是放在比較重要的位置。Bootstrap中默認(rèn)樣式的導(dǎo)航條在移動設(shè)備上顯示為折疊效果，當(dāng)視口寬度增加時(shí)才逐漸變?yōu)檎归_效果。

4.1 基礎(chǔ)導(dǎo)航欄

使用Bootstrap制作基礎(chǔ)導(dǎo)航欄主要分為以下步驟：首先，添加一個(gè)容器