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

1 響應式設計

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

1.1 媒體查詢

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

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

1.2 彈性盒布局

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

圖1 彈性盒布局PC端效果和移動端頁面效果

1.3 百分比布局

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

2 Bootstrap實現(xiàn)響應式設計

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

2.1 響應式導航條

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

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

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

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

2.2 柵格系統(tǒng)

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