響應式網(wǎng)張開發(fā)基礎教程(jQuery+Bootstrap)第5章響應式布局課件

1、第5章 響應式布局1響應式布局響應式網(wǎng)頁布局概述網(wǎng)格布局使用Bootstrap實現(xiàn)網(wǎng)格布局本章實訓：基于Bootstrap的響應式布局實現(xiàn)響應式網(wǎng)頁布局概述固定布局：在固定布局中，每個網(wǎng)頁元素的寬度都必須指定固定的像素值。比如對最外層的div，定義其寬度為960px在固定布局中，其他布局元素，如圖像、段落等，其樣式也是被指定為固定的像素值的。比如以下網(wǎng)頁代碼：文字這種布局方式提供了很強的穩(wěn)定性與可控性，最大的優(yōu)點就是可以以像素為單位，精確地控制每個網(wǎng)頁元素所在的具體位置。但在移動互聯(lián)網(wǎng)時代，這種固定布局缺點也是很明顯的。由于各種設備的屏幕大小不一，如果設備的屏幕寬度小于固定布局的寬度，將會在瀏

2、覽器底部出現(xiàn)一個滾動條，對于使用觸屏設備的用戶來說，可能會帶來不太好的用戶體驗；而如果設備的屏幕寬度大于固定布局的寬度，網(wǎng)頁的邊緣會出現(xiàn)一些空白，這些空白的部分如果太寬，也會造成頁面的顯示效果不太友好，以及空間的浪費。所以，固定布局是無法滿足響應式網(wǎng)頁設計的需求的，尤其是面向各種不同設備的情形?！纠?-1】#container width:960px;示例 響應式網(wǎng)頁布局概述流式布局：流式布局與固定寬度布局的最大不同點在于對網(wǎng)頁布局元素定義的測量單位不同。固定布局設置元素寬度使用的單位是像素，但是流式布局使用的寬度單位是百分比。通過結合媒體查詢技術（有時搭配min-width、max-widt

3、h等屬性使用），相對單位的百分比即頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。流式布局示例：【例5-2】網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)，而max-width/min-width 等屬性則以像素為單位，這些屬性可控制尺寸流動范圍，以免過大或者過小影響瀏覽效果。圖像等布局元素也可以做類似處理，例如max-width一般設定為圖片本身的尺寸，防止被拉伸而失真。流式布局如今在網(wǎng)頁中非常常見，但也存在不足。因為雖然流式布局中寬度的單位是百分比，但高度、文字大小等仍是使用像素來指定的。如果屏幕尺度跨度太大，高度、文字的大小還是和原來一樣（因為以像素為單位則無法變成“流式”），影響網(wǎng)頁顯

4、示效果。響應式網(wǎng)頁布局概述彈性布局彈性布局與流式布局的區(qū)別只是在于，包裹文字的布局元素的尺寸采用em為單位，而頁面的主要區(qū)域的劃分尺寸仍使用百分數(shù)為單位。彈性布局的文字大小單位是em或rem示例：【例5-3】彈性布局把文字所在的div的寬度、文字大小、行距等與文字相關的元素都使用了rem作單位來定義響應式網(wǎng)頁布局概述混合布局混合布局是上面介紹的兩種或者更多布局類型的組合。比如，設置某些特定元素為固定寬度或固定高度，剩下的布局元素設置百分比，或者網(wǎng)頁的內(nèi)容顯示則選擇em或rem混合式布局可以根據(jù)每種布局元素的性質和顯示效果來選擇最合適的布局方式。尤其是對于不同類型的頁面排版布局，往往要采用不同的

5、實現(xiàn)方式。比如，通欄、等分結構等適合采用彈性布局的方式，而對于非等分的多欄結構就需要采用混合布局的方式了。【例5-4】#div2 width: 49.1525%; height: 200px;padding-top: 1rem;網(wǎng)格布局網(wǎng)格系統(tǒng)，也稱為柵格系統(tǒng)，是通過一系列的行（row）與列（column）的組合來進行網(wǎng)頁布局。網(wǎng)格系統(tǒng)其實早已廣泛應用在印刷媒體上，而在網(wǎng)頁布局與設計上也可借鑒這種思想。一個網(wǎng)格可以理解為水平與垂直方向相互相交的二維結構體。以網(wǎng)格作為框架，可以讓開發(fā)者有效地組織文本、圖像等網(wǎng)頁內(nèi)容的布局與顯示。網(wǎng)格系統(tǒng)的好處包括：可以為展示內(nèi)容提供順序性、創(chuàng)意性和和諧性；方便用

6、戶更容易找到需要的信息；用戶可以方便地添加新的內(nèi)容，而不會輕易破壞網(wǎng)頁原本的結構等。網(wǎng)格布局在網(wǎng)格布局中，可以讓網(wǎng)頁元素來決定網(wǎng)格的設計，根據(jù)網(wǎng)頁元素來設計適合的網(wǎng)格尺寸，包括圖像、視頻、文字、廣告、鏈接等等，而且網(wǎng)格也可用百分比的形式來劃分。網(wǎng)格結構中，布局一般從垂直或水平方向平均劃分，從而提供一致的組織空間。Dreamweaver CC流式網(wǎng)格布局示例CSS中的Flex與GridFlex布局又稱彈性盒子布局，它于2009年提出，現(xiàn)已進入CSS 3標準。CSS Grid現(xiàn)也已經(jīng)被W3C提出作為CSS 3的一種布局模塊，而且現(xiàn)在也已經(jīng)有一些最新版本的瀏覽器支持這種布局模塊?，F(xiàn)有的基于盒模型的布

7、局方式：CSS中的Flex與GridFlex布局Flex布局也稱為彈性布局（flexible box）模塊，主要是為了提供一個更有效的方式對容器之間的各項內(nèi)容進行布局。彈性布局的主要思想是讓容器能根據(jù)需要改變項目的寬度和高度，以填滿可用空間，滿足所有類型的顯示設備和屏幕尺寸。因此彈性布局模塊的大小是未知或者動態(tài)變化的。采用Flex布局的元素，稱為Flex容器（Flex container）。它的所有子元素都自動成為容器成員，稱為Flex項目（Flex item）。彈性布局是與方向無關的。特別是當頁面元素涉及到改變方向、縮放、拉伸等操作時，原來的垂直或水平的塊狀結構就顯然無法滿足這些變化的需要了

8、，而此時恰恰是彈性布局展現(xiàn)它的優(yōu)勢的地方。CSS中的Flex與GridFlex布局比較適合用于小規(guī)模的布局，比如應用程序中的組件布局。Flex容器中默認存兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置與邊框的交叉點叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫作main size，占據(jù)的交叉軸空間叫作cross size。在Flex容器中，其項目是沿著主軸（main axis），從主軸起點（main-start）到主軸

9、終點（main-end），或者沿著側軸（cross axis），從側軸起點（cross-start）到側軸終點（cross-end）來排列的。Flex容器中項目的排列方式取決于其尺寸、方向、物理位置等。CSS中的Flex與Grid通過“display:flex”可以定義一個彈性布局模塊由于Flex項目的排列有別于傳統(tǒng)的盒子模型，這種基于Flex模塊的彈性布局可使得對布局元素的控制更加便利?！纠?-5】.box display: flex;CSS中的Flex與Grid“flex-flow:row wrap”實際上是設置了flex-direction和flex-wrap兩個屬性，其等價的寫法可以是

10、：“flex-direction: row;flex-wrap: wrap;”。屬性“flex-direction:row”設置了布局元素控制子元素的排列方式為從左到右，而“flex-wrap:wrap”設置了子元素超出容器范圍時采用的換行方式。把這兩個屬性合起來設置就是“flex-flow:row wrap”。最后一個屬性“justify-content:space-around”定義了如何分配伸縮容器的剩余空間，這里設置的是在盒子中平均分布。跟傳統(tǒng)的盒子模型相比，在這個彈性容器中去掉了原來對于寬度的設置，這就可以讓容器的尺寸完全取決于容器的內(nèi)容大小，實現(xiàn)了容器的完全彈性化。.flex-co

11、ntainer display: flex; /*定義彈性布局元素 */ flex-flow: row wrap; /* 等價的寫法可以是： flex-direction: row; flex-wrap: wrap; */ justify-content: space-around;CSS中的Flex與Grid通過設置屬性justify-content，就可以設置導航菜單在不同顯示尺寸下分別是右對齊（flex-end）還是居中（space-around），而flex-direction可以控制內(nèi)容排列的方式是縱向還是橫向的?！纠?-7】.navigation display: flex; fl

12、ex-flow: row wrap; justify-content: flex-end; /*內(nèi)容向右對齊*/media all and (max-width: 800px) .navigation justify-content: space-around; /*居中 */ media all and (max-width: 500px) .navigation flex-direction: column; /* 內(nèi)容縱向排列*/ CSS中的Flex與GridGrid布局類似于Flex布局方式，Grid布局中基本的單位是網(wǎng)格線與網(wǎng)格。Flex布局更適用于小規(guī)模的容器，而Grid布局則在大

13、規(guī)模的布局范圍中更占優(yōu)勢。采用Grid布局的元素稱為Grid容器（Grid container）。容器中網(wǎng)格線的分隔組成了網(wǎng)格的結構，網(wǎng)格線可以是垂直的（“列網(wǎng)格線”）或者水平的（“行網(wǎng)格線”）。網(wǎng)格單元是指兩根毗鄰的行網(wǎng)格線和列網(wǎng)格線中間的位置，即圖中灰色的部分。CSS中的Flex與Grid也可以通過“display: grid;”來定義一個網(wǎng)格布局的容器。可以使用grid-template-rows和grid-template-columns屬性來設置每個網(wǎng)格行、列的大小及網(wǎng)格的行數(shù)、列數(shù)。屬性grid-template-columns設置了兩個列的寬度，而grid-template-ro

14、ws則分別設置了兩行的高度?！纠?-8】 #grid display: grid; /*網(wǎng)格布局容器 */ grid-template-columns: 20px 40px; /*列寬設置 */ grid-template-rows: 20px 40px; /*行高設置 */ #A grid-column: 1; grid-row: 1; #B grid-column: 2; grid-row: 1; #C grid-column: 1; grid-row: 2; #D grid-column: 2; grid-row: 2; 使用Bootstrap實現(xiàn)網(wǎng)格布局Bootstrap網(wǎng)格布局概述B

15、ootstrap 4的網(wǎng)格系統(tǒng)有以下4類 .col-xs-：針對小屏幕設備，屏幕寬度小于768px。 .col-sm-：小型顯示設備或平板設備，屏幕寬度大于等于768px小于992px。 .col-md-：中型顯示設備，屏幕寬度大于等于992px小于1200px。 .col-lg-：大型顯示設備，屏幕寬度大于等于1200px。Bootstrap框架中的網(wǎng)格系統(tǒng)將容器最多平分成12列，每個網(wǎng)頁元素可以占據(jù)其中的一列或多列。使用Bootstrap實現(xiàn)網(wǎng)格布局超小設備手機（768px）小型設備，平板電腦（768px）中型顯示設備（992px）大型顯示設備（1200px）網(wǎng)格行為一直是水平的以折疊開始

16、，斷點以上是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的最大容器寬度None（auto）750px970px1170pxclass 前綴col-xs-*col-sm-*col-md-*col-lg-*最大列數(shù)量和12最大列寬自動60px78px95px間隙寬度30px（一個列的每邊分別15px）可嵌套是偏移量是列排序是在Bootstrap中，網(wǎng)格布局的容器必須先定義為.container類，網(wǎng)格中的行定義為.row類，行必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內(nèi)距（padding）。在行（.row）中可以添加列（.column），但列數(shù)之和不能超

17、過總列數(shù)12。具體內(nèi)容的頁面元素應當放置在列容器（.column）內(nèi)，而且只有列（column）才可以作為行容器（.row）的直接子元素。如果一行（.row）中包含的列（.column）大于12，多余的列（.column）所在的元素將被作為一個整體另起一行排列。使用Bootstrap實現(xiàn)網(wǎng)格布局Bootstrap 網(wǎng)格的基本結構【例5-9】 . 使用Bootstrap實現(xiàn)網(wǎng)格布局【例5-10】網(wǎng)格效果示例使用Bootstrap實現(xiàn)網(wǎng)格布局Bootstrap響應式網(wǎng)格布局構建Bootstrap頁面網(wǎng)格層次結構，包括最外部的容器（container）和網(wǎng)格中的行（row）。假如這個網(wǎng)格第1行包含了

18、兩列，給這兩列添加不同的背景顏色（假設是淺灰色和淺黃色）。col-lg-* 定義的是在大型顯示尺寸（1200px）的設備下顯示的。拖動顯示窗口邊框，改變窗口大小為大于等于992px且小于1200px的區(qū)間，可見在此顯示尺寸下，這兩個div默認是縱向層疊顯示的，這是由于還沒對當前顯示尺寸下每個div的寬度進行設置，這時每個div默認是占據(jù)一行的寬度的。如果要讓兩個div顯示在一行，則需要對每個div設置其col-md-*的屬性。 使用Bootstrap實現(xiàn)網(wǎng)格布局【例5-11】 導航主頁介紹聯(lián)系我們 廣東開放大學始終堅持以終身教育理念為先導，以服務全民學習、終身學習、促進人的全面發(fā)展為宗旨，實現(xiàn)

19、教育觀念、教育對象、培養(yǎng)模式、學習資源、師資隊伍和方法手段的開放，推動信息技術與教育教學的深度融合，致力于滿足廣大學習者多樣化的學習需求，培養(yǎng)具有自主學習能力和終身發(fā)展能力的、適應廣東經(jīng)濟社會發(fā)展需要的應用型專門人才。 使用Bootstrap實現(xiàn)網(wǎng)格布局顯示尺寸顯示效果大型顯示設備（1200px）中型顯示設備（992px且1200px）小型設備，平板電腦（768px且992px）超小設備手機（768px）使用Bootstrap實現(xiàn)網(wǎng)格布局如果一行（.row）中包含的列（.column）大于 12，多余的列（.column）所在的元素將被作為一個整體另起一行排列。 1 2 3 4 5 6 7 8 9 10 11 12 使用Bootstrap實現(xiàn)網(wǎng)格布局使用列偏移只需在列元素上添加如表5-3所示的類名，這個列就會偏移指定的值。其中*號表示設置偏移的列數(shù)值，可偏移的列數(shù)可設置為從012，最大不能超過12。與前面類似，網(wǎng)格結構中一行所有的列的數(shù)量設置加起來，其總數(shù)不能超過12。列偏移示例：【例5-12】