bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)實(shí)例教程課件第3章

1、bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)實(shí)例教程課件第3章bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)實(shí)例教程課件第3章Bootstrap柵格系統(tǒng)的原理1Bootstrap柵格系統(tǒng)的原理1Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 柵格系統(tǒng)的實(shí)現(xiàn)原理非常簡(jiǎn)單，僅僅是通過(guò)容器大小，平均分配12份，在調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢(xún)，從而實(shí)現(xiàn)強(qiáng)大的響應(yīng)式柵格系統(tǒng)。柵格系統(tǒng)把網(wǎng)頁(yè)的總寬度平均分成12份，可以按份自由組合。有名的960Grid System（網(wǎng)址https:/960.gs/demo.html），它把960像素寬的區(qū)塊切分成12欄，在視覺(jué)設(shè)計(jì)與網(wǎng)頁(yè)排版時(shí)就按照所需要的大小對(duì)齊欄線(xiàn)，如圖3-1所示。Bootstrap柵格

2、系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的實(shí)現(xiàn)原理圖3-1 960Grid 樣例Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 柵格系統(tǒng)的Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)網(wǎng)站應(yīng)用柵格系統(tǒng)后頁(yè)面效果如圖3-2所示。Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的實(shí)現(xiàn)原理a) b）圖3-2 應(yīng)用柵格系統(tǒng)布局網(wǎng)站的效果a) 網(wǎng)站頁(yè)面效果 b）網(wǎng)站上的柵格呈現(xiàn)Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類(lèi)，還有強(qiáng)大的mixin 用于生成更具語(yǔ)義的布局。柵格系統(tǒng)使用的總寬度

3、可以不固定，Bootstrap會(huì)按百分比進(jìn)行平分。12柵格系統(tǒng)是整個(gè)Bootstrap的核心功能，也是響應(yīng)式設(shè)計(jì)核心理念的一個(gè)實(shí)現(xiàn)形式。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)網(wǎng)站應(yīng)用柵格系統(tǒng)后頁(yè)面效Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，在內(nèi)容中就可以放入這些創(chuàng)建好的布局中。Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理Bootstrap 柵格系統(tǒng)的工作原理“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的對(duì)齊

4、方式（aligment）和內(nèi)邊距（padding）。通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。頁(yè)面內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。行使用樣式 .row ，列使用樣式“.col-*-*”，內(nèi)容應(yīng)當(dāng)放置于列（column）內(nèi)，這種預(yù)定義的類(lèi)，可以用來(lái)快速創(chuàng)建柵格布局。例如：.col-md-4就表示占4列寬度。通過(guò)為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔。通過(guò)包含 .row類(lèi)的元素設(shè)置負(fù)值 margin 從而抵消掉為.container元素設(shè)置的 padding，也就間

5、接為“行（row）”所包含的“列（column）”抵消掉了padding。柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，四個(gè)等寬的列可以使用三個(gè) .col-xs-3 來(lái)創(chuàng)建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)柵格系統(tǒng)用于通過(guò)一系列的Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) Bootstrap3使用了4種柵格選項(xiàng)來(lái)形成柵格系統(tǒng)，這4種柵格選項(xiàng)的區(qū)別在于適合不同尺寸的屏幕設(shè)備，官網(wǎng)上Bootstrap的柵格參數(shù)如表3-1所示。Bootstrap柵格系統(tǒng)-Boo

6、tstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理超小設(shè)備手機(jī)（768px）小型設(shè)備平板電腦（768px）中型設(shè)備臺(tái)式電腦（992px）大型設(shè)備臺(tái)式電腦（1200px）網(wǎng)格行為一直是水平的以折疊開(kāi)始，斷點(diǎn)以上是水平的以折疊開(kāi)始，斷點(diǎn)以上是水平的以折疊開(kāi)始，斷點(diǎn)以上是水平的.container最大容器寬度None (auto)750px970px1170pxClass前綴.col-xs-.col-sm-.col-md-.col-lg-列數(shù)量和12121212最大列寬Auto60px78px95px間隙寬度30px列的兩側(cè)分別 15px30px列的兩側(cè)分別 15px30px列的兩側(cè)分別 15px30px

7、列的兩側(cè)分別 15px可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes表3-1 Bootstrap3的柵格參數(shù)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) BootstrBootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap3的柵格設(shè)置具體含義：手機(jī)（小于768px），class語(yǔ)句為：.col-xs-1.col-xs-12。平板（大于768px），class語(yǔ)句為：.col-sm-1.col-sm-12。一般計(jì)算計(jì)小型顯示器（大于992px），class語(yǔ)句為：.col-md-1.col-md -12。一般計(jì)算計(jì)大型顯示器（大于1200px），class語(yǔ)句為：.c

8、ol-lg-1.col- lg -12。Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap3的柵Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理【實(shí)例3-1】Bootstrap柵格系統(tǒng)原理演示，代碼如下所示。 第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列（四分之一）占3列（四分之一）占3列（四分之一）占3列（四分之一） 【實(shí)例3-1】Bootstrap柵格系統(tǒng)原理演示page1p

9、age2Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理【實(shí)例3-1】Bootstrap柵格系統(tǒng)原理演示，代碼如右所示。 第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列（四分之一）占3列（四分之一）占3列（四分之一）占3列（四分之一） 【實(shí)例3-1】Bootstrap柵格系統(tǒng)原理演示Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Boo

10、tstrap柵格系統(tǒng)的原理在柵格系統(tǒng)中使用的各個(gè)樣式類(lèi)：.container左右各有15px的內(nèi)邊距，.row是column的容器，最多只能放入12個(gè)column。行左右各有-15px的外邊距，可以抵消.container的15px的內(nèi)邊距。.column左右各有15px的內(nèi)容邊距，可以保證內(nèi)容不挨著瀏覽器的邊緣。兩個(gè)相鄰的column的內(nèi)容之間則有30px的間距。通過(guò)圖3-3可以看出，本例的“”在屏幕照中水平居中，左右兩側(cè)有同等留白，“.container”共包含了4個(gè)“”。柵格類(lèi)適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，例如，在元素上應(yīng)用任何 .col-md-* 柵格類(lèi)適用于與屏幕寬度大

11、于或等于分界點(diǎn)大小的設(shè)備。圖3-3bootstrap柵格布局演示效果運(yùn)行【實(shí)例3-1】代碼，頁(yè)面效果如下圖3-3所示。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理響應(yīng)式柵格當(dāng)768px屏幕992px時(shí)，.container的寬度為750px。當(dāng)屏幕768px時(shí)，.container使用最大寬度，效果和.container-fluid一樣。當(dāng)992px屏幕1200px時(shí)，.container的寬度為970px。當(dāng)屏幕1200px時(shí)，.container的寬度為1170px。在柵格系統(tǒng)中，.co

12、ntainer支持響應(yīng)式設(shè)計(jì)，其在媒體查詢(xún)樣式進(jìn)行了定義。針對(duì)不同的設(shè)備，container的寬度不同。運(yùn)行“實(shí)例1”的頁(yè)面效果，拖動(dòng)瀏覽器改變?yōu)g覽器的寬度，可以看到不同的效果。當(dāng)屏幕992px后，所有的列變成從上到下依次排列，在瀏覽器的寬度為800px和600px呈現(xiàn)的效果是一樣的，如圖3-4所示。a) b）圖3-4 應(yīng)用柵格系統(tǒng)布局網(wǎng)站的效果a) 寬度為800px時(shí)的頁(yè)面效果 b）寬度為600px時(shí)的頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理在使用.col-md-*為類(lèi)名時(shí)，*

13、號(hào)表示占了多少列的寬度，例如：col-md-3表示該列占了12列中三列的寬度。col-md-為中等屏幕列的前綴。依次類(lèi)推，還有col-xs-為超小屏幕（手機(jī)）列的前綴，col-sm-為小屏幕（平板電腦）列的前綴，col-lg-為大屏幕（大桌面顯示器）列的前綴。柵格系統(tǒng)是向大兼容的，打開(kāi)CSS文件夾下的“bootstrap.css”文件中的媒體查詢(xún)?cè)创a如左下：media (min-width: 768px) .container width: 750px;media (min-width: 992px) .container width: 970px; media (min-width: 120

14、0px) .container width: 1170px;所以，若想在不同設(shè)備上呈現(xiàn)一樣的效果，可以針對(duì)同一行代碼使用不同視口下的樣式。例如，將如下代碼：第1列 修改為： 第1列，運(yùn)行【實(shí)例3-2】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果如下所示。圖3-5不同視口下呈現(xiàn)同樣的頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理也可以針對(duì)同一元素，添加不同的類(lèi)來(lái)控制頁(yè)面的呈現(xiàn)效果，實(shí)現(xiàn)響應(yīng)式柵格。例如，編寫(xiě)如下的代碼：A1依據(jù)規(guī)則，可以實(shí)現(xiàn)在手機(jī)屏幕上（小于768像素）為水平的100%

15、顯示，在平板屏幕上（768px屏幕992px）時(shí)呈現(xiàn)每行可放置2個(gè)元素，在PC屏幕上（992px屏幕1200px）時(shí)呈現(xiàn)每行可放置3個(gè)元素，在PC大屏幕上（1200px）時(shí)呈現(xiàn)每行可放置4個(gè)元素。 divborder: 1px solid #000000; background-color: #D4D4D4; A1A1A1A1【實(shí)例3-3】中的HTML代碼【實(shí)例3-3】中的添加樣式代碼Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理運(yùn)行【實(shí)例3-3】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果

16、如圖3-6所示。a)b)c)d)圖3-6不同視口下呈現(xiàn)同樣的頁(yè)面效果a) 1200px以上PC呈現(xiàn) b）992px以上PC呈現(xiàn) c）768px以上平板呈現(xiàn) d）768px以下手機(jī)呈現(xiàn)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理注意，如果如下代碼中的文字多少不同時(shí)，頁(yè)面將會(huì)呈現(xiàn)出高度不一的情況。例如，將第一個(gè)如下代碼A1A1，bootstrap柵格系統(tǒng)，當(dāng)文字過(guò)多時(shí)的頁(yè)面呈現(xiàn)效果。修改為:原本的設(shè)計(jì)應(yīng)該是在平板狀態(tài)下，為兩行，每行呈現(xiàn)兩列，各占6個(gè)柵格，但在瀏覽時(shí)，頁(yè)面效果如圖3-7所示。圖3

17、-7在平板電腦上呈現(xiàn)的頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理圖3-7在平板電腦上呈現(xiàn)的頁(yè)面效果這樣呈現(xiàn)出的結(jié)果是出乎意料的，這主要因?yàn)閏ol都是采用的左浮動(dòng)，第一個(gè)div的高度過(guò)高，所以第三個(gè)div直接漂浮到第一個(gè)div的右側(cè)，而第四個(gè)div進(jìn)入第三行。如果想讓第三和第四個(gè)div在一行呈現(xiàn)，則需要清除浮動(dòng)。解決這個(gè)問(wèn)題，需要使用Bootstrap中提供的“.clearfix”樣式。添加樣式后的代碼如左下：A1，bootstrap柵格系統(tǒng)，當(dāng)文字過(guò)多時(shí)的頁(yè)面呈現(xiàn)效果。A1A1A1

18、只需要針對(duì)pad清除浮動(dòng)，所以還需要visible-sm樣式將其顯示，頁(yè)面效果如下圖3-8所示。圖3-8添加清除浮動(dòng)后的頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理響應(yīng)式實(shí)用工具 為了更快地實(shí)現(xiàn)對(duì)移動(dòng)設(shè)備的友好開(kāi)放，Bootstrap提供了一套輔助類(lèi)，使用這些工具類(lèi)可以通過(guò)媒體查詢(xún)相結(jié)合不同設(shè)備，實(shí)現(xiàn)內(nèi)容的在不同設(shè)備上的顯示與隱藏。 目前，提供的響應(yīng)式實(shí)用工具類(lèi)如表3-2所示。響應(yīng)式實(shí)用工具目前只適用于塊和表切換。超小屏幕 手機(jī) (768px)小屏幕 平板 (768px)中等屏幕 桌

19、面 (992px)大屏幕 桌面 (1200px).visible-xs-*可見(jiàn)隱藏隱藏隱藏.visible-sm-*隱藏可見(jiàn)隱藏隱藏.visible-md-*隱藏隱藏可見(jiàn)隱藏.visible-lg-*隱藏隱藏隱藏可見(jiàn).hidden-xs隱藏可見(jiàn)可見(jiàn)可見(jiàn).hidden-sm可見(jiàn)隱藏可見(jiàn)可見(jiàn).hidden-md可見(jiàn)可見(jiàn)隱藏可見(jiàn).hidden-lg可見(jiàn)可見(jiàn)可見(jiàn)隱藏表3-2 響應(yīng)式實(shí)用工具類(lèi)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理響應(yīng)式實(shí)用工具 divborder: 1px solid #000

20、000;特別小型 在超小屏幕上可見(jiàn)小型 在小屏幕平板上可見(jiàn)中型 在中屏幕上可見(jiàn)大型 在大屏幕上可見(jiàn)【實(shí)例3-4】中的HTML代碼【實(shí)例3-4】中的添加樣式Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理響應(yīng)式實(shí)用工具運(yùn)行【實(shí)例3-4】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果如圖3-9所示。a)b)c)d)圖3-9不同視口下呈現(xiàn)同樣的頁(yè)面效果a) 1200px以上PC呈現(xiàn) b）992px以上PC呈現(xiàn) c）768px以上平板呈現(xiàn) d）768px以下手機(jī)呈現(xiàn)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Boo

21、tstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理響應(yīng)式實(shí)用工具運(yùn)行【實(shí)例3-4】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果如圖3-9所示。a)b)c)d)圖3-9不同視口下呈現(xiàn)同樣的頁(yè)面效果a) 1200px以上PC呈現(xiàn) b）992px以上PC呈現(xiàn) c）768px以上平板呈現(xiàn) d）768px以下手機(jī)呈現(xiàn)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系柵格系統(tǒng)的常用方法2柵格系統(tǒng)的常用方法2Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法移動(dòng)與調(diào)整列的位置col-md-offset-12 ma

22、rgin-left: 100%;.col-md-offset-11 margin-left: 91.66666667%;.col-md-offset-10 margin-left: 83.33333333%;.col-md-offset-9 margin-left: 75%;.col-md-offset-8 margin-left: 66.66666667%;.col-md-offset-7 margin-left: 58.33333333%;.col-md-offset-6 margin-left: 50%;.col-md-offset-5 margin-left: 41.66666667%

23、;.col-md-offset-4 margin-left: 33.33333333%;.col-md-offset-3 margin-left: 25%;.col-md-offset-2 margin-left: 16.66666667%;.col-md-offset-1 margin-left: 8.33333333%;.col-md-offset-0 margin-left: 0;使用offset系列類(lèi)可以將列偏移到右側(cè)。這些Class通過(guò)使用“.col-md-offset-*”選擇器將所有列增加了列的左側(cè)margin。例如，.col-md-offset-4將.col-md設(shè)備下的列向右

24、移動(dòng)了4個(gè)列的寬度。Offset通過(guò)margin-left實(shí)現(xiàn)，因此會(huì)對(duì)右側(cè)列產(chǎn)生影響，以col-md設(shè)備為例，在Bootstrap3.3的CSS源碼中（bootstrap.css）可以看到如下樣式集，這些樣式集定義了col-md設(shè)備下offset的樣式代碼，如右所示：offset也會(huì)占據(jù)布局空間，因此使用設(shè)計(jì)列偏移時(shí)，必須把offset偏移寬度與col寬度進(jìn)行合并計(jì)算，確保每個(gè)row中的列寬和偏移寬度之和等于或小于12格。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法.row margin-top: 5p

25、x; margin-bottom: 5px; class*=col- border: 1px solid #000000; background-color: #D4D4D4;列寬3格col-md-7 col-md-offset-2列寬7 偏移2格列寬3格 偏移3格col-md-3 col-md-offset-3列寬3格 偏移3格col-md-3 col-md-offset-3【實(shí)例3-5】中的HTML代碼為了能讓元素呈現(xiàn)清晰【實(shí)例3-5】中的添加樣式【實(shí)例3-5】將在兩個(gè)row行中配合col和offset設(shè)計(jì)列寬和列偏移效果，其中第一行設(shè)計(jì)為第一列寬度為3，第二列寬度為7，偏移為2；第二行設(shè)

26、計(jì)為第一列和第二列寬度均為3，同時(shí)向右偏移3格。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法運(yùn)行【實(shí)例3-5】代碼，列偏移頁(yè)面呈現(xiàn)效果如圖3-10所示。圖3-10列偏移頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法.row margin-top: 5px; margin-bottom: 5px;div border: 1px solid #000000; background-color: #D4D4D4; 手

27、機(jī) ：列寬4，列偏移2 平板：列寬4，列偏移2 PC中屏： 列寬6，列偏移6 PC大屏： 列寬6，列偏移6 【實(shí)例3-6】中的HTML代碼為了能讓元素呈現(xiàn)清晰【實(shí)例3-5】中的添加樣式【實(shí)例3-6】將在一個(gè)row行中配合col和offset設(shè)計(jì)列寬和列偏移效果，其中在手機(jī)小屏與平板上時(shí)設(shè)計(jì)為“列寬4，列偏移2”，在PC上的中屏與大屏上時(shí)設(shè)計(jì)為 “列寬6，列偏移6”.Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系圖3-11列偏移頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法運(yùn)行【實(shí)例3-6】代碼，列偏移頁(yè)面呈現(xiàn)效果如圖3-11所示。a)b)a）手

28、機(jī)呈現(xiàn)效果b）上PC中屏呈現(xiàn)效果圖3-11列偏移頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法調(diào)整列的排序.col-md-pull-12 right: 100%.col-md-pull-11 right: 91.66666667%.col-md-pull-10 right: 83.33333333%.col-md-pull-9 right: 75%.col-md-pull-8 right: 66.66666667%.col-md-pull-7 right: 58.33333333%.col-md-pull-6 right:

29、 50%.col-md-pull-5 right: 41.66666667%.col-md-pull-4 right: 33.33333333%.col-md-pull-3 right: 25%.col-md-pull-2 right: 16.66666667%.col-md-pull-1 right: 8.33333333%.col-md-pull-0 right: auto 在Bootstrap中“col-xs”“col-sm”“col-md”“col-lg”所有的列元素都使用了“position: relative;”，列排序通過(guò)push和pull相關(guān)類(lèi)實(shí)現(xiàn)，利用這兩個(gè)系列類(lèi)可以調(diào)整列的

30、顯示位置，其中push向右偏移，通過(guò)left屬性定義列左側(cè)的偏移位置，而pull向左偏移，通過(guò)right屬性定義列右側(cè)的偏移位置。 push和pull排序方法實(shí)現(xiàn)很簡(jiǎn)單，以col-md-pull-*為例，在Bootstrap 3.3的CSS源碼中樣式如右所示：而在“col-md-push-*”與“col-md-pull-*”不同的是，使用“l(fā)eft屬性”控制右移的量。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法div height: 100px; border: 1px solid #000000; ba

31、ckground-color: #D4D4D4;左列中列右列左列，顯示在右側(cè)中列，顯示在左側(cè)右列，顯示在中間【實(shí)例3-7】中的HTML代碼【實(shí)例3-7】中的添加樣式【實(shí)例3-7】中在row行中放置三個(gè)div，在PC中屏?xí)r分別置于左列（col-md-3）、中列（col-md-6）、右列（col-md-3），當(dāng)視口縮小到平板大小時(shí)，調(diào)整其位置發(fā)生變化：“左列-顯示在右側(cè)”“中列-顯示在左側(cè)”“右列-顯示在中間”。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系圖3-12列順序調(diào)整頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法運(yùn)行【實(shí)例3-7】代碼，列

32、偏移頁(yè)面呈現(xiàn)效果如圖3-12所示。a）PC中屏呈現(xiàn)效果b）平板上呈現(xiàn)效果a)b)圖3-12列順序調(diào)整頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法列嵌套排版 網(wǎng)頁(yè)設(shè)計(jì)中會(huì)因?yàn)閮?nèi)容在排版顯示上需要一個(gè)DIV中再加入數(shù)個(gè)DIV。這樣將一組新的網(wǎng)格內(nèi)容加入到原來(lái)已有的網(wǎng)格系統(tǒng)中就被稱(chēng)為嵌套。Bootstrap支持列嵌套，對(duì)于柵格系統(tǒng)中多層布局提供了簡(jiǎn)單的實(shí)現(xiàn)方式。用戶(hù)只需在嵌套的列column內(nèi)部新加入一行row，在row內(nèi)繼續(xù)使用柵格系統(tǒng)即可。注意，內(nèi)部所嵌套的row的寬度為100%，就是當(dāng)前外部列的寬度。div height:

33、 100px; border: 1px solid #000000; background-color: #D4D4D4; 第1列 第二列：嵌套2-1 第二列：嵌套2-2 【實(shí)例3-8】中的HTML代碼【實(shí)例3-8 】實(shí)現(xiàn)列的嵌套排版，其中的添加樣式Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系圖3-13 列嵌套布局頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒng)的常用方法運(yùn)行【實(shí)例3-8】代碼，列偏移頁(yè)面呈現(xiàn)效果如圖3-13所示。a）PC中屏呈現(xiàn)效果b）平板上呈現(xiàn)效果a)b)實(shí)例3-8中在第二列“”中嵌套了一個(gè)“”元素，并在row內(nèi)部嵌套了兩個(gè)，從而實(shí)現(xiàn)

34、了圖3-13所示的頁(yè)面效果。圖3-13 列嵌套布局頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站案例：企業(yè)內(nèi)容展示頁(yè)面制作3案例：企業(yè)內(nèi)容展示頁(yè)面制作3Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁(yè)面制作 淮安優(yōu)博文化傳播有限公司需要在主頁(yè)上展示最新發(fā)布、合作伙伴和最新課程三個(gè)欄目?，F(xiàn)根據(jù)需求實(shí)現(xiàn)的頁(yè)面效果如圖3-14所示。案例展示（a）PC寬屏狀態(tài)下的頁(yè)面效果（b）Pad上的頁(yè)面效果圖3-14 網(wǎng)站整體頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁(yè)面制作 本案例基于基本的

35、Bootstrap基本框架，分析圖3-14可以看出“最新發(fā)布”部分在PC端為4欄，而在Pad上為2欄，所以可以使用4個(gè)“class=col-sm-6 col-md-3”來(lái)實(shí)現(xiàn)，在手機(jī)端頁(yè)面中4個(gè)欄目獨(dú)立成行，同時(shí)要求圖片為響應(yīng)式圖片展示。 在“合作伙伴”部分在PC端為6欄，而在Pad上為2欄，所以可以使用6個(gè)“class=col-sm-6 col-md-2”來(lái)實(shí)現(xiàn)，在手機(jī)端頁(yè)面中6個(gè)欄目獨(dú)立成行，同時(shí)要求圖片為響應(yīng)式圖片展示。而“最新課程”欄目與合作伙伴功能一樣，可以直接復(fù)制使用。案例分析具體分為四步：第一步：創(chuàng)建基本樣式表。第二步：編寫(xiě)“最新發(fā)布”部分的HTML結(jié)構(gòu)與CSS代碼。第三步：編寫(xiě)

36、“合作伙伴”部分的HTML結(jié)構(gòu)與CSS代碼。第四步：編寫(xiě)“最新課程”部分的HTML結(jié)構(gòu)與CSS代碼。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁(yè)面制作第一步：創(chuàng)建基本樣式表。案例實(shí)現(xiàn)bodyfont-family: 微軟雅黑;font-size: 16px;h2text-align: center;依據(jù)基于Bootstrap模板創(chuàng)建網(wǎng)頁(yè)，編寫(xiě)基本樣式表，代碼如下第二步：編寫(xiě)“最新發(fā)布”部分的HTML結(jié)構(gòu)與CSS代碼。根據(jù)頁(yè)面效果的需求，先完成基本的結(jié)構(gòu)設(shè)計(jì)，代碼如下： 最新發(fā)布 Bootstrap響應(yīng)式

37、網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁(yè)面制作案例實(shí)現(xiàn)第二步：編寫(xiě)“最新發(fā)布”部分的HTML結(jié)構(gòu)與CSS代碼。然后，根據(jù)頁(yè)面效果的需求，給外層的div編寫(xiě)CSS類(lèi).commodity-show樣式：.commodity-showpadding-top,padding-bottom: 20px;根據(jù)需要，使用 實(shí)現(xiàn)頁(yè)面PC、Pad與手機(jī)上的柵格布局，在PC上呈現(xiàn)4列，在pad上呈現(xiàn)2列，在手機(jī)上呈現(xiàn)單列。使用實(shí)現(xiàn)圖片的自適應(yīng)相應(yīng)展示。根據(jù)需要，在 中添加最新發(fā)布的具體內(nèi)容，代碼如右側(cè)所示： 電商款柑普茶包裝設(shè)計(jì)百鳥(niǎo)朝鳳 這款

38、包裝是2017年11月份開(kāi)始做的，最開(kāi)始的定位，“小金罐”定位為性?xún)r(jià)比 款引流，而產(chǎn)品口感上較小金罐也會(huì)友了明顯差異。百鳥(niǎo)朝鳳則更多的是禮品屬 性。 電商款柑普茶包裝設(shè)計(jì)-小鳥(niǎo)天堂 這款包裝是“小鳥(niǎo)天堂”小青柑就是其中之一。以新會(huì)地標(biāo)小鳥(niǎo)天堂為主題賣(mài) 點(diǎn)，推出了這一款夏日“清新”的柑普茶包裝。小鳥(niǎo)天堂的關(guān)鍵詞是年輕、清新、 現(xiàn)代、綠色。 電商款柑普茶包裝設(shè)計(jì)小金罐 這款一則電商款柑普茶包裝設(shè)計(jì)，采用兩罐一袋，每罐120克的小金罐包裝， 更適合電商平臺(tái)銷(xiāo)售。 電商界面特色設(shè)計(jì)年貨節(jié) 米米村年貨節(jié)頁(yè)面，2019祝大家升職加薪，這次的年貨節(jié)頁(yè)面 時(shí)間比較趕 做 的比較毛躁 從2018年做到2019的

39、頁(yè)面展示。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁(yè)面制作案例實(shí)現(xiàn)第二步：編寫(xiě)“最新發(fā)布”部分的HTML結(jié)構(gòu)與CSS代碼。完成“最新發(fā)布”的內(nèi)容，預(yù)覽頁(yè)面效果如圖3-15所示。 a）PC寬屏狀態(tài)下的頁(yè)面效果b）iphone6上的頁(yè)面效果圖3-15 “最新發(fā)布”頁(yè)面效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁(yè)面制作案例實(shí)現(xiàn)第三步：編寫(xiě)“合作伙伴”部分的HTML結(jié)構(gòu)與CSS代碼 有了“最新發(fā)布”欄目的制作，根據(jù)圖3-14的頁(yè)面效果，下面開(kāi)始編寫(xiě)“合作伙伴”的HTML和CSS代碼。 根據(jù)需要，使用 實(shí)現(xiàn)頁(yè)面PC、Pad與手機(jī)上的柵格布局，在pad上呈現(xiàn)2列，在手機(jī)上呈現(xiàn)單列，在PC上呈現(xiàn)6列。 使用實(shí)現(xiàn)圖片的自適應(yīng)相應(yīng)展示。 完成基本的結(jié)構(gòu)設(shè)計(jì)，代碼如右側(cè)所示： 合作伙伴 Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁(yè)面制作案例實(shí)現(xiàn)第三步：編寫(xiě)“合作伙伴”部分的HTML結(jié)構(gòu)與CSS代碼 然后，根據(jù)頁(yè)面效果的需求，給logo層的div編寫(xiě)CSS類(lèi). user-logo-container樣式和圖片的user-