久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

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

1 響應(yīng)式設(shè)計(jì)

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

1.1 媒體查詢

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

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

1.2 彈性盒布局

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

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

1.3 百分比布局

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

2 Bootstrap實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)

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

2.1 響應(yīng)式導(dǎo)航條

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

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

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

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

2.2 柵格系統(tǒng)

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