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

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

2、系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的實現(xiàn)原理圖3-1 960Grid 樣例Bootstrap響應式網(wǎng)站開發(fā) 柵格系統(tǒng)的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)使用的總寬度

3、可以不固定，Bootstrap會按百分比進行平分。12柵格系統(tǒng)是整個Bootstrap的核心功能，也是響應式設計核心理念的一個實現(xiàn)形式。Bootstrap響應式網(wǎng)站開發(fā)網(wǎng)站應用柵格系統(tǒng)后頁面效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% 寬度）中，以便為其賦予合適的對齊

4、方式（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，也就間

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

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

7、列的兩側分別 15px可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes表3-1 Bootstrap3的柵格參數(shù)Bootstrap響應式網(wǎng)站開發(fā) BootstrBootstrap響應式網(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語句為：.c

8、ol-lg-1.col- lg -12。Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理Bootstrap響應式網(wǎng)站開發(fā)Bootstrap3的柵Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理【實例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列（四分之一） 【實例3-1】Bootstrap柵格系統(tǒng)原理演示page1p

9、age2Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理柵格系統(tǒng)的工作原理【實例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列（四分之一） 【實例3-1】Bootstrap柵格系統(tǒng)原理演示Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-Boo

10、tstrap柵格系統(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可以看出，本例的“”在屏幕照中水平居中，左右兩側有同等留白，“.container”共包含了4個“”。柵格類適用于與屏幕寬度大于或等于分界點大小的設備，例如，在元素上應用任何 .col-md-* 柵格類適用于與屏幕寬度大

11、于或等于分界點大小的設備。圖3-3bootstrap柵格布局演示效果運行【實例3-1】代碼，頁面效果如下圖3-3所示。Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系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)中，.co

12、ntainer支持響應式設計，其在媒體查詢樣式進行了定義。針對不同的設備，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柵格系Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理在使用.col-md-*為類名時，*

13、號表示占了多少列的寬度，例如：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: 120

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

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

16、如圖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柵格系Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理注意，如果如下代碼中的文字多少不同時，頁面將會呈現(xiàn)出高度不一的情況。例如，將第一個如下代碼A1A1，bootstrap柵格系統(tǒng)，當文字過多時的頁面呈現(xiàn)效果。修改為:原本的設計應該是在平板狀態(tài)下，為兩行，每行呈現(xiàn)兩列，各占6個柵格，但在瀏覽時，頁面效果如圖3-7所示。圖3

17、-7在平板電腦上呈現(xiàn)的頁面效果Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系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”樣式。添加樣式后的代碼如左下：A1，bootstrap柵格系統(tǒng)，當文字過多時的頁面呈現(xiàn)效果。A1A1A1

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

19、面 (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柵格系Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-Bootstrap柵格系統(tǒng)的原理響應式實用工具 divborder: 1px solid #000

20、000;特別小型 在超小屏幕上可見小型 在小屏幕平板上可見中型 在中屏幕上可見大型 在大屏幕上可見【實例3-4】中的HTML代碼【實例3-4】中的添加樣式Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系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ā)Boo

21、tstrap柵格系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柵格系柵格系統(tǒng)的常用方法2柵格系統(tǒng)的常用方法2Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-柵格系統(tǒ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系列類可以將列偏移到右側。這些Class通過使用“.col-md-offset-*”選擇器將所有列增加了列的左側margin。例如，.col-md-offset-4將.col-md設備下的列向右

24、移動了4個列的寬度。Offset通過margin-left實現(xiàn)，因此會對右側列產(chǎn)生影響，以col-md設備為例，在Bootstrap3.3的CSS源碼中（bootstrap.css）可以看到如下樣式集，這些樣式集定義了col-md設備下offset的樣式代碼，如右所示：offset也會占據(jù)布局空間，因此使用設計列偏移時，必須把offset偏移寬度與col寬度進行合并計算，確保每個row中的列寬和偏移寬度之和等于或小于12格。Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系Bootstrap響應式網(wǎng)站開發(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【實例3-5】中的HTML代碼為了能讓元素呈現(xiàn)清晰【實例3-5】中的添加樣式【實例3-5】將在兩個row行中配合col和offset設計列寬和列偏移效果，其中第一行設計為第一列寬度為3，第二列寬度為7，偏移為2；第二行設

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

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

28、機呈現(xiàn)效果b）上PC中屏呈現(xiàn)效果圖3-11列偏移頁面效果Bootstrap響應式網(wǎng)站開發(fā)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:

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;”，列排序通過push和pull相關類實現(xiàn)，利用這兩個系列類可以調(diào)整列的

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

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

32、偏移頁面呈現(xiàn)效果如圖3-12所示。a）PC中屏呈現(xiàn)效果b）平板上呈現(xiàn)效果a)b)圖3-12列順序調(diào)整頁面效果Bootstrap響應式網(wǎng)站開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%，就是當前外部列的寬度。div height:

33、 100px; border: 1px solid #000000; background-color: #D4D4D4; 第1列 第二列：嵌套2-1 第二列：嵌套2-2 【實例3-8】中的HTML代碼【實例3-8 】實現(xiàn)列的嵌套排版，其中的添加樣式Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系圖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中在第二列“”中嵌套了一個“”元素，并在row內(nèi)部嵌套了兩個，從而實現(xiàn)

34、了圖3-13所示的頁面效果。圖3-13 列嵌套布局頁面效果Bootstrap響應式網(wǎng)站案例：企業(yè)內(nèi)容展示頁面制作3案例：企業(yè)內(nèi)容展示頁面制作3Bootstrap響應式網(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柵格系Bootstrap響應式網(wǎng)站開發(fā)Bootstrap柵格系統(tǒng)-案例：企業(yè)內(nèi)容展示頁面制作 本案例基于基本的

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

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

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

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

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