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

1 響應式設計

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

1.1 媒體查詢

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

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

1.2 彈性盒布局

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

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

1.3 百分比布局

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

2 Bootstrap實現響應式設計

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

2.1 響應式導航條

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

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

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

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

2.2 柵格系統

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