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

bootstrap響應式網(wǎng)站開發(fā)第三章Bootstrap柵格系統(tǒng)bootstrap響應式網(wǎng)站開發(fā)第三章Bootstrap柵1Bootstrap柵格系統(tǒng)的原理1Bootstrap柵格系統(tǒng)的原理12《Bootstrap響應式網(wǎng)站開發(fā)》

柵格系統(tǒng)的實現(xiàn)原理非常簡單，僅僅是通過容器大小，平均分配12份，在調(diào)整內(nèi)外邊距，最后結合媒體查詢，從而實現(xiàn)強大的響應式柵格系統(tǒng)。柵格系統(tǒng)把網(wǎng)頁的總寬度平均分成12份，可以按份自由組合。有名的960GridSystem（網(wǎng)址https://960.gs/demo.html），它把960像素寬的區(qū)塊切分成12欄，在視覺設計與網(wǎng)頁排版時就按照所需要的大小對齊欄線，如圖3-1所示。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的實現(xiàn)原理圖3-1960Grid樣例《Bootstrap響應式網(wǎng)站開發(fā)》柵格系統(tǒng)的3《Bootstrap響應式網(wǎng)站開發(fā)》網(wǎng)站應用柵格系統(tǒng)后頁面效果如圖3-2所示。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的實現(xiàn)原理a)b）圖3-2應用柵格系統(tǒng)布局網(wǎng)站的效果a)網(wǎng)站頁面效果b）網(wǎng)站上的柵格呈現(xiàn)Bootstrap提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin用于生成更具語義的布局。柵格系統(tǒng)使用的總寬度可以不固定，Bootstrap會按百分比進行平分。12柵格系統(tǒng)是整個Bootstrap的核心功能，也是響應式設計核心理念的一個實現(xiàn)形式?！禕ootstrap響應式網(wǎng)站開發(fā)》網(wǎng)站應用柵格系統(tǒng)后頁面效4《Bootstrap響應式網(wǎng)站開發(fā)》柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，在內(nèi)容中就可以放入這些創(chuàng)建好的布局中。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理Bootstrap柵格系統(tǒng)的工作原理“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的對齊方式（aligment）和內(nèi)邊距（padding）。通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。頁面內(nèi)容應當放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。行使用樣式.row，列使用樣式“.col-*-*”，內(nèi)容應當放置于列（column）內(nèi)，這種預定義的類，可以用來快速創(chuàng)建柵格布局。例如：.col-md-4就表示占4列寬度。通過為“列（column）”設置padding屬性，從而創(chuàng)建列與列之間的間隔。通過包含.row類的元素設置負值margin從而抵消掉為.container元素設置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，四個等寬的列可以使用三個.col-xs-3來創(chuàng)建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列?！禕ootstrap響應式網(wǎng)站開發(fā)》柵格系統(tǒng)用于通過一系列的5《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap3使用了4種柵格選項來形成柵格系統(tǒng)，這4種柵格選項的區(qū)別在于適合不同尺寸的屏幕設備，官網(wǎng)上Bootstrap的柵格參數(shù)如表3-1所示。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理

超小設備手機（<768px）小型設備平板電腦（≥768px）中型設備臺式電腦（≥992px）大型設備臺式電腦（≥1200px）網(wǎng)格行為一直是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的.container最大容器寬度None(auto)750px970px1170pxClass前綴.col-xs-.col-sm-.col-md-.col-lg-列數(shù)量和12121212最大列寬Auto~60px~78px~95px間隙寬度30px列的兩側分別15px30px列的兩側分別15px30px列的兩側分別15px30px列的兩側分別15px可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes表3-1Bootstrap3的柵格參數(shù)《Bootstrap響應式網(wǎng)站開發(fā)》Bootstr6《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap3的柵格設置具體含義：手機（小于768px），class語句為：.col-xs-1~.col-xs-12。平板（大于768px），class語句為：.col-sm-1~.col-sm-12。一般計算計小型顯示器（大于992px），class語句為：.col-md-1~.col-md-12。一般計算計大型顯示器（大于1200px），class語句為：.col-lg-1~.col-lg-12。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap3的柵7《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理【實例3-1】Bootstrap柵格系統(tǒng)原理演示，代碼如下所示。<divclass="container"><divclass="row"> <divclass="col-md-1">第1列</div> <divclass="col-md-1">第2列</div> <divclass="col-md-1">第3列</div> <divclass="col-md-1">第4列</div> <divclass="col-md-1">第5列</div> <divclass="col-md-1">第6列</div> <divclass="col-md-1">第7列</div> <divclass="col-md-1">第8列</div> <divclass="col-md-1">第9列</div> <divclass="col-md-1">第10列</div> <divclass="col-md-1">第11列</div> <divclass="col-md-1">第12列</div></div>

<divclass="row"> <divclass="col-md-8">占8列</div> <divclass="col-md-4">占4列</div></div><divclass="row"> <divclass="col-md-6">占6列一半</div> <divclass="col-md-6">占6列一半</div></div><divclass="row"> <divclass="col-md-3">占3列（四分之一）</div> <divclass="col-md-3">占3列（四分之一）</div> <divclass="col-md-3">占3列（四分之一）</div> <divclass="col-md-3">占3列（四分之一）</div></div><div>【實例3-1】Bootstrap柵格系統(tǒng)原理演示page1page2《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系8《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理【實例3-1】Bootstrap柵格系統(tǒng)原理演示，代碼如右所示。

<divclass="container"><divclass="row"> <divclass="col-md-1">第1列</div> <divclass="col-md-1">第2列</div> <divclass="col-md-1">第3列</div> <divclass="col-md-1">第4列</div> <divclass="col-md-1">第5列</div> <divclass="col-md-1">第6列</div> <divclass="col-md-1">第7列</div> <divclass="col-md-1">第8列</div> <divclass="col-md-1">第9列</div> <divclass="col-md-1">第10列</div> <divclass="col-md-1">第11列</div> <divclass="col-md-1">第12列</div></div><divclass="row"> <divclass="col-md-8">占8列</div> <divclass="col-md-4">占4列</div></div><divclass="row"> <divclass="col-md-6">占6列一半</div> <divclass="col-md-6">占6列一半</div></div><divclass="row"> <divclass="col-md-3">占3列（四分之一）</div> <divclass="col-md-3">占3列（四分之一）</div> <divclass="col-md-3">占3列（四分之一）</div> <divclass="col-md-3">占3列（四分之一）</div></div><div>【實例3-1】Bootstrap柵格系統(tǒng)原理演示《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系9《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理在柵格系統(tǒng)中使用的各個樣式類：.container左右各有15px的內(nèi)邊距，.row是column的容器，最多只能放入12個column。行左右各有-15px的外邊距，可以抵消.container的15px的內(nèi)邊距。.column左右各有15px的內(nèi)容邊距，可以保證內(nèi)容不挨著瀏覽器的邊緣。兩個相鄰的column的內(nèi)容之間則有30px的間距。通過圖3-3可以看出，本例的“<divclass="container">”在屏幕照中水平居中，左右兩側有同等留白，“.container”共包含了4個“<divclass="row">”。柵格類適用于與屏幕寬度大于或等于分界點大小的設備，例如，在元素上應用任何.col-md-*柵格類適用于與屏幕寬度大于或等于分界點大小的設備。圖3-3bootstrap柵格布局演示效果運行【實例3-1】代碼，頁面效果如下圖3-3所示?！禕ootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系10《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理響應式柵格當768px≤屏幕<992px時，.container的寬度為750px。當屏幕<768px時，.container使用最大寬度，效果和.container-fluid一樣。當992px≤屏幕<1200px時，.container的寬度為970px。當屏幕≥1200px時，.container的寬度為1170px。在柵格系統(tǒng)中，.container支持響應式設計，其在媒體查詢樣式進行了定義。針對不同的設備，container的寬度不同。運行“實例1”的頁面效果，拖動瀏覽器改變?yōu)g覽器的寬度，可以看到不同的效果。當屏幕<992px后，所有的列變成從上到下依次排列，在瀏覽器的寬度為800px和600px呈現(xiàn)的效果是一樣的，如圖3-4所示。a)b）圖3-4應用柵格系統(tǒng)布局網(wǎng)站的效果a)寬度為800px時的頁面效果b）寬度為600px時的頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系11《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理在使用.col-md-*為類名時，*號表示占了多少列的寬度，例如：col-md-3表示該列占了12列中三列的寬度。col-md-為中等屏幕列的前綴。依次類推，還有col-xs-為超小屏幕（手機）列的前綴，col-sm-為小屏幕（平板電腦）列的前綴，col-lg-為大屏幕（大桌面顯示器）列的前綴。柵格系統(tǒng)是向大兼容的，打開CSS文件夾下的“bootstrap.css”文件中的媒體查詢源碼如左下：@media(min-width:768px){.container{width:750px;}}@media(min-width:992px){.container{width:970px;}}@media(min-width:1200px){.container{width:1170px;}}所以，若想在不同設備上呈現(xiàn)一樣的效果，可以針對同一行代碼使用不同視口下的樣式。例如，將如下代碼：<divclass="col-md-1">第1列</div>修改為：

<divclass=“col-xs-1”>第1列</div>，運行【實例3-2】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果如下所示。圖3-5不同視口下呈現(xiàn)同樣的頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系12《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理也可以針對同一元素，添加不同的類來控制頁面的呈現(xiàn)效果，實現(xiàn)響應式柵格。例如，編寫如下的代碼：<divclass="col-xs-12col-sm-6col-md-4col-lg-3">A1</div>依據(jù)規(guī)則，可以實現(xiàn)在手機屏幕上（小于768像素）為水平的100%顯示，在平板屏幕上（768px≤屏幕<992px）時呈現(xiàn)每行可放置2個元素，在PC屏幕上（992px≤屏幕<1200px）時呈現(xiàn)每行可放置3個元素，在PC大屏幕上（≥1200px）時呈現(xiàn)每行可放置4個元素。<styletype="text/css">div{border:1pxsolid#000000;background-color:#D4D4D4;}</style><divclass="container"><divclass="row"><divclass="col-xs-12col-sm-6col-md-4col-lg-3">A1</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">A1</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">A1</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">A1</div></div></div>【實例3-3】中的HTML代碼【實例3-3】中的添加樣式代碼《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系13《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理運行【實例3-3】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果如圖3-6所示。a)b)c)d)圖3-6不同視口下呈現(xiàn)同樣的頁面效果a)1200px以上PC呈現(xiàn)b）992px以上PC呈現(xiàn)c）768px以上平板呈現(xiàn)d）768px以下手機呈現(xiàn)《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系14《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理注意，如果如下代碼中的文字多少不同時，頁面將會呈現(xiàn)出高度不一的情況。例如，將第一個如下代碼<divclass="col-xs-12col-sm-6col-md-4col-lg-3">A1</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">A1，bootstrap柵格系統(tǒng)，當文字過多時的頁面呈現(xiàn)效果。</div>修改為:原本的設計應該是在平板狀態(tài)下，為兩行，每行呈現(xiàn)兩列，各占6個柵格，但在瀏覽時，頁面效果如圖3-7所示。圖3-7在平板電腦上呈現(xiàn)的頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系15《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理圖3-7在平板電腦上呈現(xiàn)的頁面效果這樣呈現(xiàn)出的結果是出乎意料的，這主要因為col都是采用的左浮動，第一個div的高度過高，所以第三個div直接漂浮到第一個div的右側，而第四個div進入第三行。如果想讓第三和第四個div在一行呈現(xiàn)，則需要清除浮動。解決這個問題，需要使用Bootstrap中提供的“.clearfix”樣式。添加樣式后的代碼如左下：<divclass="container"><divclass="row"><divclass="col-lg-3col-md-4col-sm-6col-xs-12">A1，bootstrap柵格系統(tǒng)，當文字過多時的頁面呈現(xiàn)效果。</div><divclass="col-lg-3col-md-4col-sm-6col-xs-12">A1</div><divclass="clearfixvisible-sm"></div><divclass="col-lg-3col-md-4col-sm-6col-xs-12">A1</div><divclass="col-lg-3col-md-4col-sm-6col-xs-12">A1</div></div></div>只需要針對pad清除浮動，所以還需要visible-sm樣式將其顯示，頁面效果如下圖3-8所示。圖3-8添加清除浮動后的頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系16《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理響應式實用工具

為了更快地實現(xiàn)對移動設備的友好開放，Bootstrap提供了一套輔助類，使用這些工具類可以通過媒體查詢相結合不同設備，實現(xiàn)內(nèi)容的在不同設備上的顯示與隱藏。

目前，提供的響應式實用工具類如表3-2所示。響應式實用工具目前只適用于塊和表切換。

超小屏幕

手機(<768px)小屏幕

平板(≥768px)中等屏幕

桌面(≥992px)大屏幕

桌面(≥1200px).visible-xs-*可見隱藏隱藏隱藏.visible-sm-*隱藏可見隱藏隱藏.visible-md-*隱藏隱藏可見隱藏.visible-lg-*隱藏隱藏隱藏可見.hidden-xs隱藏可見可見可見.hidden-sm可見隱藏可見可見.hidden-md可見可見隱藏可見.hidden-lg可見可見可見隱藏表3-2響應式實用工具類《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系17《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理響應式實用工具<styletype="text/css">div{border:1pxsolid#000000;}</style><divclass="container"style="padding:20px;"><divclass="row"><divclass="col-xs-6col-sm-3"><spanclass="hidden-xs">特別小型</span><spanclass="visible-xs">?在超小屏幕上可見</span></div><divclass="col-xs-6col-sm-3"><spanclass="hidden-sm">小型</span><spanclass="visible-sm">?在小屏幕平板上可見</span></div><divclass="col-xs-6col-sm-3"><spanclass="hidden-md">中型</span><spanclass="visible-md">?在中屏幕上可見</span></div><divclass="col-xs-6col-sm-3"><spanclass="hidden-lg">大型</span><spanclass="visible-lg">?在大屏幕上可見</span></div></div></div>【實例3-4】中的HTML代碼【實例3-4】中的添加樣式《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系18《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理響應式實用工具運行【實例3-4】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果如圖3-9所示。a)b)c)d)圖3-9不同視口下呈現(xiàn)同樣的頁面效果a)1200px以上PC呈現(xiàn)b）992px以上PC呈現(xiàn)c）768px以上平板呈現(xiàn)d）768px以下手機呈現(xiàn)《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系19《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理響應式實用工具運行【實例3-4】代碼，能夠在不同視口下可以呈現(xiàn)同樣的效果，效果如圖3-9所示。a)b)c)d)圖3-9不同視口下呈現(xiàn)同樣的頁面效果a)1200px以上PC呈現(xiàn)b）992px以上PC呈現(xiàn)c）768px以上平板呈現(xiàn)d）768px以下手機呈現(xiàn)《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系20柵格系統(tǒng)的常用方法2柵格系統(tǒng)的常用方法221《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法移動與調(diào)整列的位置col-md-offset-12{margin-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%;}.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系列類可以將列偏移到右側。這些Class通過使用“.col-md-offset-*”選擇器將所有列增加了列的左側margin。例如，.col-md-offset-4將.col-md設備下的列向右移動了4個列的寬度。Offset通過margin-left實現(xiàn)，因此會對右側列產(chǎn)生影響，以col-md設備為例，在Bootstrap3.3的CSS源碼中（bootstrap.css）可以看到如下樣式集，這些樣式集定義了col-md設備下offset的樣式代碼，如右所示：offset也會占據(jù)布局空間，因此使用設計列偏移時，必須把offset偏移寬度與col寬度進行合并計算，確保每個row中的列寬和偏移寬度之和等于或小于12格?！禕ootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系22《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法<styletype="text/css">.row{margin-top:5px;margin-bottom:5px;}[class*="col-"]{border:1pxsolid#000000;background-color:#D4D4D4;}</style><divclass="container"><divclass="row"><divclass="col-md-3">列寬3格</div><divclass="col-md-7col-md-offset-2">col-md-7col-md-offset-2列寬7偏移2格</div></div><divclass="row"><divclass="col-md-3col-md-offset-3">列寬3格偏移3格col-md-3col-md-offset-3</div><divclass="col-md-3col-md-offset-3">列寬3格偏移3格col-md-3col-md-offset-3</div></div></div>【實例3-5】中的HTML代碼為了能讓元素呈現(xiàn)清晰【實例3-5】中的添加樣式【實例3-5】將在兩個row行中配合col和offset設計列寬和列偏移效果，其中第一行設計為第一列寬度為3，第二列寬度為7，偏移為2；第二行設計為第一列和第二列寬度均為3，同時向右偏移3格?！禕ootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系23《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法運行【實例3-5】代碼，列偏移頁面呈現(xiàn)效果如圖3-10所示。圖3-10列偏移頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系24《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法<styletype="text/css">.row{margin-top:5px;margin-bottom:5px;}div{border:1pxsolid#000000;background-color:#D4D4D4;}</style><divclass="container"><divclass="row"><divclass="col-xs-4col-xs-offset-2col-md-6col-md-offset-6"><spanclass="visible-xs">手機：列寬4，列偏移2</span><spanclass="visible-sm">平板：列寬4，列偏移2</span><spanclass="visible-md">PC中屏：列寬6，列偏移6</span><spanclass="visible-lg">PC大屏：列寬6，列偏移6</span></div></div></div>【實例3-6】中的HTML代碼為了能讓元素呈現(xiàn)清晰【實例3-5】中的添加樣式【實例3-6】將在一個row行中配合col和offset設計列寬和列偏移效果，其中在手機小屏與平板上時設計為“列寬4，列偏移2”，在PC上的中屏與大屏上時設計為“列寬6，列偏移6”.《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系25圖3-11列偏移頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法運行【實例3-6】代碼，列偏移頁面呈現(xiàn)效果如圖3-11所示。a)b)a）手機呈現(xiàn)效果b）上PC中屏呈現(xiàn)效果圖3-11列偏移頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》26《Bootstrap響應式網(wǎng)站開發(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: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;”，列排序通過push和pull相關類實現(xiàn)，利用這兩個系列類可以調(diào)整列的顯示位置，其中push向右偏移，通過left屬性定義列左側的偏移位置，而pull向左偏移，通過right屬性定義列右側的偏移位置。push和pull排序方法實現(xiàn)很簡單，以col-md-pull-*為例，在Bootstrap3.3的CSS源碼中樣式如右所示：而在“col-md-push-*”與“col-md-pull-*”不同的是，使用“l(fā)eft屬性”控制右移的量?！禕ootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系27《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法<styletype="text/css">div{height:100px;border:1pxsolid#000000;background-color:#D4D4D4;}</style><divclass="container"> <divclass="rowvisible-md"> <divclass="col-md-3">左列</div> <divclass="col-md-6">中列</div> <divclass="col-md-3">右列</div> </div> <divclass="rowvisible-sm"> <divclass="col-sm-3col-sm-push-9">左列，顯示在右側</div> <divclass="col-sm-6col-sm-pull-3">中列，顯示在左側</div> <divclass="col-sm-3col-sm-pull-3">右列，顯示在中間</div> </div></div>【實例3-7】中的HTML代碼【實例3-7】中的添加樣式【實例3-7】中在row行中放置三個div，在PC中屏時分別置于左列（col-md-3）、中列（col-md-6）、右列（col-md-3），當視口縮小到平板大小時，調(diào)整其位置發(fā)生變化：“左列-顯示在右側”“中列-顯示在左側”“右列-顯示在中間”?！禕ootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系28圖3-12列順序調(diào)整頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法運行【實例3-7】代碼，列偏移頁面呈現(xiàn)效果如圖3-12所示。a）PC中屏呈現(xiàn)效果b）平板上呈現(xiàn)效果a)b)圖3-12列順序調(diào)整頁面效果《Bootstrap響應式網(wǎng)站開29《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法列嵌套排版

網(wǎng)頁設計中會因為內(nèi)容在排版顯示上需要一個DIV中再加入數(shù)個DIV。這樣將一組新的網(wǎng)格內(nèi)容加入到原來已有的網(wǎng)格系統(tǒng)中就被稱為嵌套。Bootstrap支持列嵌套，對于柵格系統(tǒng)中多層布局提供了簡單的實現(xiàn)方式。用戶只需在嵌套的列column內(nèi)部新加入一行row，在row內(nèi)繼續(xù)使用柵格系統(tǒng)即可。注意，內(nèi)部所嵌套的row的寬度為100%，就是當前外部列的寬度。<styletype="text/css">div{height:100px;border:1pxsolid#000000;background-color:#D4D4D4;}</style><divclass="container"><divclass="row"><divclass="col-md-3">第1列</div><divclass="col-md-9"><divclass="row"><divclass="col-xs-6">第二列：嵌套2-1</div><divclass="col-xs-6">第二列：嵌套2-2</div></div></div></div></div>【實例3-8】中的HTML代碼【實例3-8】實現(xiàn)列的嵌套排版，其中的添加樣式《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系30圖3-13列嵌套布局頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--柵格系統(tǒng)的常用方法運行【實例3-8】代碼，列偏移頁面呈現(xiàn)效果如圖3-13所示。a）PC中屏呈現(xiàn)效果b）平板上呈現(xiàn)效果a)b)實例3-8中在第二列“<divclass="col-md-9">”中嵌套了一個“<divclass="row">”元素，并在row內(nèi)部嵌套了兩個<divclass="col-md-6">，從而實現(xiàn)了圖3-13所示的頁面效果。圖3-13列嵌套布局頁面效果《Bootstrap響應式網(wǎng)站31案例：企業(yè)內(nèi)容展示頁面制作3案例：企業(yè)內(nèi)容展示頁面制作332《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作

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

本案例基于基本的Bootstrap基本框架，分析圖3-14可以看出“最新發(fā)布”部分在PC端為4欄，而在Pad上為2欄，所以可以使用4個“class="col-sm-6col-md-3"”來實現(xiàn)，在手機端頁面中4個欄目獨立成行，同時要求圖片為響應式圖片展示。

在“合作伙伴”部分在PC端為6欄，而在Pad上為2欄，所以可以使用6個“class="col-sm-6col-md-2"”來實現(xiàn)，在手機端頁面中6個欄目獨立成行，同時要求圖片為響應式圖片展示。而“最新課程”欄目與合作伙伴功能一樣，可以直接復制使用。案例分析具體分為四步：第一步：創(chuàng)建基本樣式表。第二步：編寫“最新發(fā)布”部分的HTML結構與CSS代碼。第三步：編寫“合作伙伴”部分的HTML結構與CSS代碼。第四步：編寫“最新課程”部分的HTML結構與CSS代碼?！禕ootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系34《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作第一步：創(chuàng)建基本樣式表。案例實現(xiàn)<styletype="text/css">body{font-family:"微軟雅黑";font-size:16px;}h2{text-align:center;}</style>依據(jù)基于Bootstrap模板創(chuàng)建網(wǎng)頁，編寫基本樣式表，代碼如下第二步：編寫“最新發(fā)布”部分的HTML結構與CSS代碼。根據(jù)頁面效果的需求，先完成基本的結構設計，代碼如下：<divclass="commodity-show"> <divclass="container"> <divclass="row"> <divclass="col-sm-12"> <h2>最新發(fā)布</h2> </div> </div> <divclass="row"> <divclass="col-sm-6col-md-3"></div> <divclass="col-sm-6col-md-3"></div> <divclass="col-sm-6col-md-3"></div> <divclass="col-sm-6col-md-3"></div> </div> </div> </div>《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系35《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例實現(xiàn)第二步：編寫“最新發(fā)布”部分的HTML結構與CSS代碼。然后，根據(jù)頁面效果的需求，給外層的div編寫CSS類.commodity-show樣式：.commodity-show{padding-top,padding-bottom:20px;}根據(jù)需要，使用<divclass="col-sm-6col-md-3"></div>實現(xiàn)頁面PC、Pad與手機上的柵格布局，在PC上呈現(xiàn)4列，在pad上呈現(xiàn)2列，在手機上呈現(xiàn)單列。使用<imgclass="img-responsive"src="圖片路徑"/>實現(xiàn)圖片的自適應相應展示。根據(jù)需要，在<divclass=“col-sm-6col-md-3”></div>中添加最新發(fā)布的具體內(nèi)容，代碼如右側所示：<divclass="col-sm-6col-md-3"><imgclass="img-responsive"src="images/shop1.jpg"alt="茶包裝設計"title="百鳥朝鳳"/><h3>電商款柑普茶包裝設計——百鳥朝鳳</h3><p>這款包裝是2017年11月份開始做的，最開始的定位，“小金罐”定位為性價比

款引流，而產(chǎn)品口感上較小金罐也會友了明顯差異。百鳥朝鳳則更多的是禮品屬

性。</p></div><divclass="col-sm-6col-md-3"><imgclass="img-responsive"src="images/shop2.jpg"alt="茶包裝設計"title="小鳥天堂"/><h3>電商款柑普茶包裝設計-小鳥天堂</h3><p>這款包裝是“小鳥天堂”小青柑就是其中之一。以新會地標小鳥天堂為主題賣

點，推出了這一款夏日“清新”的柑普茶包裝。小鳥天堂的關鍵詞是年輕、清新、

現(xiàn)代、綠色。</p></div><divclass="clearfixvisible-sm"></div><divclass="col-sm-6col-md-3"><imgclass="img-responsive"src="images/shop3.jpg"alt="茶包裝設計"title="小金罐"/><h3>電商款柑普茶包裝設計——小金罐</h3><p>這款一則電商款柑普茶包裝設計，采用兩罐一袋，每罐120克的小金罐包裝，

更適合電商平臺銷售。</p></div><divclass="col-sm-6col-md-3"><imgclass="img-responsive"src="images/shop4.jpg"alt="茶包裝設計"title="年貨節(jié)"/><h3>電商界面特色設計——年貨節(jié)</h3><p>米米村年貨節(jié)頁面，2019祝大家升職加薪，這次的年貨節(jié)頁面時間比較趕做

的比較毛躁從2018年做到2019的頁面展示。</p></div>《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系36《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例實現(xiàn)第二步：編寫“最新發(fā)布”部分的HTML結構與CSS代碼。完成“最新發(fā)布”的內(nèi)容，預覽頁面效果如圖3-15所示。a）PC寬屏狀態(tài)下的頁面效果b）iphone6上的頁面效果圖3-15“最新發(fā)布”頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系37《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例實現(xiàn)第三步：編寫“合作伙伴”部分的HTML結構與CSS代碼

有了“最新發(fā)布”欄目的制作，根據(jù)圖3-14的頁面效果，下面開始編寫“合作伙伴”的HTML和CSS代碼。

根據(jù)需要，使用<divclass="col-sm-6col-md-2"></div>實現(xiàn)頁面PC、Pad與手機上的柵格布局，在pad上呈現(xiàn)2列，在手機上呈現(xiàn)單列，在PC上呈現(xiàn)6列。

使用<imgclass="img-responsive"src="圖片路徑"/>實現(xiàn)圖片的自適應相應展示。

完成基本的結構設計，代碼如右側所示：<divclass="commodity-show"><divclass="container"><divclass="row"><divclass="col-sm-12"><h2>合作伙伴</h2></div></div><divclass="rowlogos"><divclass="col-sm-6col-md-2user-logo-container"><imgclass="user-logo"src="images/logo1.jpg"/></div><divclass="col-sm-6col-md-2user-logo-container"><imgclass="user-logo"src="images/logo2.jpg"/></div><divclass="col-sm-6col-md-2user-logo-container"><imgclass="user-logo"src="images/logo3.jpg"/></div><divclass="col-sm-6col-md-2user-logo-container"><imgclass="user-logo"src="images/logo4.jpg"/></div><divclass="col-sm-6col-md-2user-logo-container"><imgclass="user-logo"src="images/logo5.jpg"/></div><divclass="col-sm-6col-md-2user-logo-container"><imgclass="user-logo"src="images/logo6.jpg"/></div></div></div>《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系38《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例實現(xiàn)第三步：編寫“合作伙伴”部分的HTML結構與CSS代碼

然后，根據(jù)頁面效果的需求，給logo層的div編寫CSS類.user-logo-container樣式和圖片的user-logo樣式：.user-logo-container{height:80px;display:flex;justify-content:center;align-items:center;}.logos{padding-top,padding-bottom:40px;}.user-logo{width:150px;border:1pxsolid#C0C0C0;border-radius:5px;}完成“合作伙伴”的HTML和CSS代碼后，預覽頁面效果如圖3-16所示。a）Pad狀態(tài)下的頁面效果b）iphone6上的頁面效果圖3-16“合作伙伴”頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系39《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例實現(xiàn)第四步：編寫“最新課程”部分的HTML結構與CSS代碼。

有了“合作”欄目的制作，根據(jù)圖3-14的頁面效果，下面開始編寫“最新課程”的HTML和CSS代碼。

根據(jù)需要，使用<divclass="col-sm-6col-md-3"></div>實現(xiàn)頁面PC、Pad與手機上的柵格布局，在pad上呈現(xiàn)2列，在手機上呈現(xiàn)單列，在PC上呈現(xiàn)4列。

完成基本的結構設計，代碼如右側所示：<divclass="commodity-show"><divclass="container"><divclass="row"><divclass="col-sm-12"><h2>最新課程</h2></div></div><divclass="row"><divclass="col-sm-6col-md-3"><h3>Java</h3><p>歡迎進入<ahref="#">Java攻城獅教程</a></p></div><divclass="col-sm-6col-md-3"><h3>C++</h3><p>歡迎進入<ahref="#">BuildC++攻城獅教程</a></p></div><divclass="col-sm-6col-md-3"><h3>Android</h3><p>歡迎進入<ahref="#">mobileapp攻城獅教程</a></p></div><divclass="col-sm-6col-md-3"><h3>iOS</h3><p>歡迎進入<ahref="#">mobileapp攻城獅教程</a></p></div></div></div></div>《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系40《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例實現(xiàn)第四步：編寫“最新課程”部分的HTML結構與CSS代碼。完成“最新課程”的內(nèi)容，預覽頁面效果如圖3-17所示圖3-16網(wǎng)站響應式頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系41《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例拓展在此之上，還可以給網(wǎng)頁添加頂部的logo和底部的版權信息，頁面效果如圖3-17所示。a）pad下網(wǎng)頁頂部的logo頁面效果b）pad底部的foot頁面效果圖3-17網(wǎng)站響應式頁面效果《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系42《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--案例：企業(yè)內(nèi)容展示頁面制作案例拓展<divclass="commodity-show"><divclass="container"><divclass="row"><divclass="col-sm-12logo"><imgclass="img-responsive"src="images/logo.png"width="400"/></div></div></div></div><divclass="commodity-show"><divclass="container"><divclass="row"><divclass="col-sm-12footer"><pclass="footertext">©2018淮安優(yōu)博文化傳播有限公司</p></div></div></div></div>.logo,.footer{text-align:center;background-color:#333333;}.footertext{color:wheat;line-height:50px;height:50px;text-align:center;}頂部“l(fā)ogo”區(qū)域的HTML結構設計，代碼如下底部“footer”區(qū)域的HTML結構設計，代碼如下兩個部分所需的CSS樣式文件代碼如下《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系43bootstrap響應式網(wǎng)站開發(fā)第三章Bootstrap柵格系統(tǒng)bootstrap響應式網(wǎng)站開發(fā)第三章Bootstrap柵44bootstrap響應式網(wǎng)站開發(fā)第三章Bootstrap柵格系統(tǒng)bootstrap響應式網(wǎng)站開發(fā)第三章Bootstrap柵45Bootstrap柵格系統(tǒng)的原理1Bootstrap柵格系統(tǒng)的原理146《Bootstrap響應式網(wǎng)站開發(fā)》

柵格系統(tǒng)的實現(xiàn)原理非常簡單，僅僅是通過容器大小，平均分配12份，在調(diào)整內(nèi)外邊距，最后結合媒體查詢，從而實現(xiàn)強大的響應式柵格系統(tǒng)。柵格系統(tǒng)把網(wǎng)頁的總寬度平均分成12份，可以按份自由組合。有名的960GridSystem（網(wǎng)址https://960.gs/demo.html），它把960像素寬的區(qū)塊切分成12欄，在視覺設計與網(wǎng)頁排版時就按照所需要的大小對齊欄線，如圖3-1所示。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的實現(xiàn)原理圖3-1960Grid樣例《Bootstrap響應式網(wǎng)站開發(fā)》柵格系統(tǒng)的47《Bootstrap響應式網(wǎng)站開發(fā)》網(wǎng)站應用柵格系統(tǒng)后頁面效果如圖3-2所示。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的實現(xiàn)原理a)b）圖3-2應用柵格系統(tǒng)布局網(wǎng)站的效果a)網(wǎng)站頁面效果b）網(wǎng)站上的柵格呈現(xiàn)Bootstrap提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin用于生成更具語義的布局。柵格系統(tǒng)使用的總寬度可以不固定，Bootstrap會按百分比進行平分。12柵格系統(tǒng)是整個Bootstrap的核心功能，也是響應式設計核心理念的一個實現(xiàn)形式?！禕ootstrap響應式網(wǎng)站開發(fā)》網(wǎng)站應用柵格系統(tǒng)后頁面效48《Bootstrap響應式網(wǎng)站開發(fā)》柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，在內(nèi)容中就可以放入這些創(chuàng)建好的布局中。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理Bootstrap柵格系統(tǒng)的工作原理“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的對齊方式（aligment）和內(nèi)邊距（padding）。通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。頁面內(nèi)容應當放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。行使用樣式.row，列使用樣式“.col-*-*”，內(nèi)容應當放置于列（column）內(nèi)，這種預定義的類，可以用來快速創(chuàng)建柵格布局。例如：.col-md-4就表示占4列寬度。通過為“列（column）”設置padding屬性，從而創(chuàng)建列與列之間的間隔。通過包含.row類的元素設置負值margin從而抵消掉為.container元素設置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，四個等寬的列可以使用三個.col-xs-3來創(chuàng)建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列?！禕ootstrap響應式網(wǎng)站開發(fā)》柵格系統(tǒng)用于通過一系列的49《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap3使用了4種柵格選項來形成柵格系統(tǒng)，這4種柵格選項的區(qū)別在于適合不同尺寸的屏幕設備，官網(wǎng)上Bootstrap的柵格參數(shù)如表3-1所示。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理

超小設備手機（<768px）小型設備平板電腦（≥768px）中型設備臺式電腦（≥992px）大型設備臺式電腦（≥1200px）網(wǎng)格行為一直是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的.container最大容器寬度None(auto)750px970px1170pxClass前綴.col-xs-.col-sm-.col-md-.col-lg-列數(shù)量和12121212最大列寬Auto~60px~78px~95px間隙寬度30px列的兩側分別15px30px列的兩側分別15px30px列的兩側分別15px30px列的兩側分別15px可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes表3-1Bootstrap3的柵格參數(shù)《Bootstrap響應式網(wǎng)站開發(fā)》Bootstr50《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap3的柵格設置具體含義：手機（小于768px），class語句為：.col-xs-1~.col-xs-12。平板（大于768px），class語句為：.col-sm-1~.col-sm-12。一般計算計小型顯示器（大于992px），class語句為：.col-md-1~.col-md-12。一般計算計大型顯示器（大于1200px），class語句為：.col-lg-1~.col-lg-12。Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap3的柵51《Bootstrap響應式網(wǎng)站開發(fā)》Bootstrap柵格系統(tǒng)--Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理【實例3-1】Bootstrap柵格系統(tǒng)原理演示，代碼如下所示。<divclass="container"><divclass="row"> <divclass="col-md-1">第1列</div> <divclass="col-md-1">第2列</div> <divclass="col-md-1">第3列</div> <divclass="col-md-1">第4列</div> <divclass="col-md-1">第5列</div> <divclass="col-md-1">第6列</div> <divclass="col-md-1">第7列</div> <div