描述Bootstrap框架的響應式設計理念發(fā)布者：本站     時(shí)間：2020-05-02 14:05:18

1 響應式設計

響應式網(wǎng)站設計的概念是由著(zhù)名網(wǎng)頁(yè)設計師Ethan Marcotte于2010年提出的, 其設計理念是針對客戶(hù)的不同行為或不同設備, 網(wǎng)頁(yè)都可以及時(shí)做出調整和響應。響應式是一種跨終端的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù), 可以針對不同的設備顯示出合理的頁(yè)面, 實(shí)現一次開(kāi)發(fā)、多處適用。無(wú)論客戶(hù)是使用PC或移動(dòng)設備瀏覽網(wǎng)頁(yè), 響應式網(wǎng)頁(yè)都能立刻對分辨率、文字大小、圖片尺寸等自動(dòng)進(jìn)行調整, 對不同設備做出及時(shí)響應, 而無(wú)需為每個(gè)設備開(kāi)發(fā)一個(gè)特定的版本, 從而大大節省了開(kāi)發(fā)成本。響應式設計的關(guān)鍵技術(shù)主要包含媒體查詢(xún)、彈性盒布局及百分比布局等。

1.1 媒體查詢(xún)

移動(dòng)端瀏覽器中存在可見(jiàn)視口 (即設備大小) 和視窗視口 (即網(wǎng)頁(yè)寬度) , 在CSS3規范中, 媒體查詢(xún)可以根據可見(jiàn)視口寬度、設備方向等差異來(lái)改變頁(yè)面的顯示方式。媒體查詢(xún)通常由媒體類(lèi)型和條件表達式組成, 如:

上述代碼表示媒體類(lèi)型為screen并且屏幕寬度小于等于960px時(shí)的樣式。由于CSS代碼是從上到下依次執行, 所以當使用max-width來(lái)區分屏幕時(shí), 要按照從大屏到小屏的編寫(xiě)順序, 使用min-width來(lái)區分屏幕時(shí), 則按照從小屏到大屏的編寫(xiě)順序。

1.2 彈性盒布局

CSS3中的彈性盒布局是為了輕松創(chuàng )建響應式網(wǎng)頁(yè)布局, 為盒狀模型增加靈活性。彈性盒改進(jìn)了塊模型, 既不使用浮動(dòng), 也不會(huì )在彈性盒容器與其內容之間合并外邊距, 是一種非常靈活的布局方法。在使用彈性盒布局時(shí), 通過(guò)設置容器的display屬性為flex, 將其設置成彈性盒容器。彈性盒由容器、子元素和軸組成, 默認情況下, 子元素的排列方向與橫軸的方向一致, flex-flow屬性用于排列彈性子元素, 即可以通過(guò)設置“flex-flow:row;”達到子元素按橫軸方向順序排列。彈性容器中的每一個(gè)子元素都是一個(gè)彈性子元素, 彈性容器在布局時(shí)用數字可以達到分配寬度的效果, 如圖1將容器分為5份, article占3份, CSS代碼可以通過(guò)設置“flex:3;”實(shí)現。配合媒體查詢(xún)使用, 當屏幕小于640px, 彈性盒中的子元素由橫向變?yōu)榭v向方向排列, 即“flex-flow:column;”。

圖1 彈性盒布局PC端效果和移動(dòng)端頁(yè)面效果

1.3 百分比布局

由于媒體查詢(xún)只能針對某幾個(gè)特定階段的視口, 在捕捉到下一個(gè)視口前, 頁(yè)面的布局是不會(huì )變化的, 這樣會(huì )影響頁(yè)面的顯示, 同時(shí)也無(wú)法兼容日益增多的各種設備。所以, 要想做出真正靈活的頁(yè)面, 還需要用百分比布局代替固定布局, 并且使用媒體查詢(xún)限制范圍。百分比布局的本質(zhì)是將固定寬度換算為百分比寬度, 換算公式為:目標元素寬度÷父盒子寬度=百分數寬度。使用百分比布局的網(wǎng)頁(yè)會(huì )隨瀏覽器的縮放而等比例進(jìn)行縮放。

2 Bootstrap實(shí)現響應式設計

Bootstrap是由著(zhù)名的社交網(wǎng)站Twitter推出的前端開(kāi)源工具包, 它基于HTML、CSS、JavaScript等前端技術(shù), 一經(jīng)推出就深受廣大前端開(kāi)發(fā)人員的歡迎。Bootstrap中預定義了一套CSS樣式和與樣式對應JQuery代碼, 應用時(shí)只需提供固定的HTML結構, 添加Bootstrap中提供的class名稱(chēng)就可以完成指定效果的實(shí)現。Bootstrap還包含了功能強大的插件和內置組件, 并且提供了一個(gè)先進(jìn)的柵格系統。使用Bootstrap可以構建出非常優(yōu)雅的前端界面, 而且占用資源非常小, Bootstrap的響應式CSS能夠自適應臺式機、平板電腦和手機的屏幕大小, 除此之外, 移動(dòng)設備優(yōu)先的樣式貫穿整個(gè)庫, IE、Chrome、Firefox等主流瀏覽器都支持Bootstrap。

2.1 響應式導航條

Bootstrap導航欄是在應用或網(wǎng)站中作為導航的響應式基礎組件。Bootstrap中提供了默認樣式的導航條, 它在移動(dòng)設備上可以折疊, 且可以通過(guò)漢堡按鈕實(shí)現開(kāi)關(guān), 在視口寬度逐漸增加時(shí)變?yōu)樗秸归_(kāi)模式, 縮小瀏覽器窗口時(shí)菜單均被隱藏, 代替出現的是一個(gè)漢堡按鈕。實(shí)現菜單折疊的效果有以下兩個(gè)步驟:

(1) 實(shí)現菜單的折疊和隱藏, 把小屏幕顯示時(shí)需要折疊的內容包裹在一個(gè)<div>標簽內, 并且為這個(gè)<div>標簽使用.collapse、.navbar-collapse兩個(gè)類(lèi), 為這個(gè)div添加一個(gè)id。

(2) 添加在小屏幕時(shí), 要顯示的漢堡按鈕的固定寫(xiě)法如下:

使用漢堡按鈕時(shí), 先為折疊菜單添加id, 值為navbar-collapse, 再在<button>標簽添加data-target="#navba r-collapse", 代表這個(gè)按鈕控制的是id值為navbar-collapse的容器。單擊漢堡按鈕即可顯示下拉菜單。

2.2 柵格系統

柵格系統在網(wǎng)頁(yè)設計中用固定的格子進(jìn)行頁(yè)面布局, 是一種清晰工整的設計風(fēng)格。Bootstrap提供了一套響應式、移動(dòng)設備優(yōu)先的流式柵格系統, 隨著(zhù)屏幕或視口 (viewport) 尺寸的增加, 系統會(huì )自動(dòng)分為最多12列。它包含了易于使用的預定義類(lèi)和強大的mixin用于生成更具語(yǔ)義的布局。柵格系統用于通過(guò)一系列的行 (row) 和列 (column) 的組合來(lái)創(chuàng )建頁(yè)面布局, Bootstrap為不同屏幕寬度定義了不同的類(lèi), 它使用4種柵格選項來(lái)形成柵格系統, 這4種柵格選項的區別在于適用不同尺寸的屏幕設備。如表1所示。