響應(yīng)式布局與Bootstrap框架響應(yīng)式布局與bootstrap框架

第11章響應(yīng)式布局與Bootstrap框架隨著移動(dòng)終端用戶越來越多，為解決如今各式各樣的瀏覽器分辨率以及不同移動(dòng)設(shè)備的顯示效果，設(shè)計(jì)師提出了響應(yīng)式布局的設(shè)計(jì)方案。本章首先介紹了基于媒體查詢的響應(yīng)式布局的實(shí)現(xiàn)機(jī)制，然后學(xué)習(xí)Bootstrap響應(yīng)式柵格系統(tǒng)，并進(jìn)一步學(xué)習(xí)Bootstrap框架下的常用組件與插件。了解響應(yīng)式布局的類型和作用理解基于媒體查詢的響應(yīng)式布局的實(shí)現(xiàn)機(jī)制掌握Bootstrap響應(yīng)式框架下的柵格系統(tǒng)能運(yùn)用Bootstrap框架下的常用響應(yīng)式組件與插件進(jìn)行頁面重構(gòu)內(nèi)容安排響應(yīng)式網(wǎng)頁11.1Bootstrap柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式11.2Bootstrap響應(yīng)式組件與插件11.3小試牛刀11.411.1響應(yīng)式網(wǎng)頁響應(yīng)式布局這一概念最初是由EthanMarcotte提出的一個(gè)概念，這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。這一概念回應(yīng)了用戶及其所用設(shè)備的需求，版式會根據(jù)設(shè)備的大小和功能而變化。響應(yīng)式網(wǎng)頁能夠兼容多個(gè)終端，而不必為每個(gè)終端做一個(gè)特定的版本。例如，手機(jī)可能會以單列視圖的形式呈現(xiàn)內(nèi)容，而同樣的內(nèi)容可能會以雙列的形式呈現(xiàn)在平板電腦上。響應(yīng)式網(wǎng)頁11.111.1.1視口viewport在移動(dòng)設(shè)備上進(jìn)行網(wǎng)頁的重構(gòu)或開發(fā)，首先需要理解移動(dòng)設(shè)備上的視口viewport。移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示網(wǎng)頁的那一塊區(qū)域。視口viewport不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)橐苿?dòng)設(shè)備的分辨率相對于桌面電腦來說都比較小。為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站，移動(dòng)端會以桌面端的屏幕寬度來呈現(xiàn)頁面，然后再調(diào)整字體大小將整體內(nèi)容調(diào)整為適合屏幕的大小。一般情況下，移動(dòng)設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動(dòng)條。為了解決這一問題，需要在HTML文檔頭部加入meta標(biāo)簽，使用viewport屬性指示瀏覽器如何對網(wǎng)頁尺寸和縮放比例進(jìn)行控制。代碼如下：<metaname="viewport"content="width=device-width,initial-scale=1.0">meta標(biāo)簽viewport屬性首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來安卓以及其它各大瀏覽器廠商也都紛紛效仿。在蘋果的規(guī)范中，metaviewport有6個(gè)屬性參數(shù)，見表11-1屬性屬性值及功能width設(shè)置layoutviewport的寬度，為一個(gè)正整數(shù)，或字符串"device-width"initial-scale設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)minimum-scale允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)maximum-scale允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)height設(shè)置layoutviewport的高度，這個(gè)屬性對我們并不重要，很少使用user-scalable是否允許用戶進(jìn)行縮放，值為"no"或"yes",no代表不允許，yes代表允許響應(yīng)式網(wǎng)頁11.111.1.2媒體查詢MediaQuery媒體查詢能在不同的條件下使用不同的樣式，使頁面在不同在終端設(shè)備下達(dá)到不同的渲染效果。媒體查詢有以下兩種使用途徑：1.使用@media格式:@media媒體類型and（媒體特性）{樣式列表}媒體查詢使用“@media”開頭，然后指定媒體類型（也可以稱為設(shè)備類型），隨后是指定媒體特性（也可以稱之為設(shè)備特性）。常用的媒體類型見表11-2所列。值描述all用于所有設(shè)備，如果沒有明確指定媒體類型，那么其默認(rèn)為allprint用于打印機(jī)和打印預(yù)覽screen用于電腦屏幕，平板電腦，智能手機(jī)等。speech應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備not使用關(guān)鍵詞“not”是用來排除某種制定的媒體類型onlyonly用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器響應(yīng)式網(wǎng)頁11.1媒體特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個(gè)部分，第一個(gè)部分是特性名稱，第二部分為特性值，兩個(gè)部分之間使用冒號分隔，常用的媒體特性見表11-3特性特性值描述device-height定義輸出設(shè)備的屏幕分辨率高度。device-width定義輸出設(shè)備的屏幕分辨率寬度。max-device-height定義輸出設(shè)備的屏幕分辨率的最大高度。max-device-width定義輸出設(shè)備的屏幕分辨率最大寬度。min-device-width定義輸出設(shè)備的屏幕分辨率最小寬度。min-device-height定義輸出設(shè)備的屏幕分辨率的最小高度。max-height定義輸出設(shè)備中的瀏覽器頁面最大可見區(qū)域高度。max-width定義輸出設(shè)備中的瀏覽器頁面最大可見區(qū)域?qū)挾取in-height定義輸出設(shè)備中的瀏覽器頁面最小可見區(qū)域高度。min-width定義輸出設(shè)備中的瀏覽器頁面最小可見區(qū)域?qū)挾?。height定義輸出設(shè)備中的瀏覽器頁面可見區(qū)域高度。width定義輸出設(shè)備中的瀏覽器頁面可見區(qū)域?qū)挾取Ｃ襟w查詢可以使用關(guān)鍵詞"and"將多個(gè)媒體特性結(jié)合在一起。也就是說，一個(gè)MediaQuery中可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種媒體類型。例如，當(dāng)屏幕在600px~900px之間時(shí)，body的背景色渲染為“#f5f5f5”，代碼如下：@mediascreenand(min-width:600px)and(max-width:900px){body{background-color:#f5f5f5;}}響應(yīng)式網(wǎng)頁11.12.在樣式表鏈接中使用media屬性媒體查詢除了使用@media之外還可以在樣式表鏈接中使用media屬性，例如：<linkrel="stylesheet"media="onlyscreenand(max-device-width:480px)"href="iphone.css">上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px的設(shè)備，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。在樣式表鏈接中使用media屬性可以用來實(shí)現(xiàn)動(dòng)態(tài)加載樣式表，例如：<linkrel="stylesheet"type="text/css"href="style1.css"media="screenand(min-width:980px)"><linkrel="stylesheet"type="text/css"href="style2.css"media="screenand(max-width:750px)"><linkrel="stylesheet"type="text/css"href="style3.css"media="(min-width:750px)and(max-width:980px)">響應(yīng)式網(wǎng)頁11.111.1.3自適應(yīng)的尺寸單位媒體查詢主要解決響應(yīng)式網(wǎng)頁在布局方面整體寬度和高度的尺寸問題。在響應(yīng)式網(wǎng)頁中還需要處理字體大小，以及各種元素的尺寸（包括圖形、視頻的尺寸）能否自適應(yīng)整體尺寸的問題。元素設(shè)置CSS尺寸的時(shí)候，要想實(shí)現(xiàn)尺寸自適應(yīng)整體尺寸，就不要使用px為單位。1.vw與vhvw與vh的全稱是ViewportWidth和ViewportHeight，即視口的寬度和高度。vw是視口寬度的1/100，vh是視口高度的1/100。vw最大值為100vw，超過100vw按100vw計(jì)，vh最大值為100vh，超過100vh按100vh計(jì)。與vw與vh相關(guān)的還有兩個(gè)尺寸單位是vmin與vmax。vmin是當(dāng)前vw和vh中較小的一個(gè)值，vmax是當(dāng)前vw和vh中較大的一個(gè)值。在做移動(dòng)頁面開發(fā)時(shí)，如果使用vw、wh設(shè)置字體大小，豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。這里就可以用到vmin和vmax。使得文字大小在橫豎屏下保持一致。2.使用百分比的流式布局在頁面中使用百分比為尺寸單位也稱為流式布局，百分比是相對于父元素的大小設(shè)定的比率。通過盒子的寬度設(shè)置成百分比是根據(jù)屏幕的寬度來進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。這樣的布局方式是移動(dòng)web開發(fā)使用的常用布局方式。這樣的布局可以適配移動(dòng)端不同的分辨率設(shè)備，特別適合于電商網(wǎng)站的布局。響應(yīng)式網(wǎng)頁11.13.em與remem尺寸單位在1.3.1字體屬性中已作詳細(xì)介紹。雖然em是一個(gè)相對值，但em是相對于父元素大小的變化而變化，是父元素的倍數(shù)。面對多層元素嵌套，使用em會變得混亂。rem則解決了這一問題。rem是rootem，它是相對于根元素html元素的font-size的相對值。例如，設(shè)置根元素html{font-size:20px;}，那么1rem就等于20px，不受父元素及元素嵌套的影響。如果根元素html也使用rem為單位，即rem作用于根元素，其大小是相對于根元素的默認(rèn)值。4.calc()函數(shù)設(shè)置響應(yīng)式字體大小CSS的calc()函數(shù)用于動(dòng)態(tài)計(jì)算長度值，運(yùn)算符前后都需要保留一個(gè)空格。例如要將div元素的寬度設(shè)置為父元素寬度減去10px，可以用下面的代碼：div{width:calc(100%-10px);}使用calc()函數(shù)結(jié)合rem和vw，通過媒體查詢可以實(shí)現(xiàn)響應(yīng)式字體大小的設(shè)置。最簡單是在根元素中設(shè)置字體大小使用calc()函數(shù)，代碼如下：html{font-size:calc(1rem+1vw);}11.1.4橫屏豎屏響應(yīng)式頁面案例11.1案例11-1：制作橫屏豎屏自適應(yīng)響應(yīng)式頁面，當(dāng)瀏覽器寬度超過750px時(shí)，為圖11-1所示的橫向布局，當(dāng)瀏覽器寬度小于750px時(shí)，為圖11-2所示的縱向布局。1.響應(yīng)式頁面布局整體布局采用上中下結(jié)構(gòu)，最外層#container為縱向彈性盒子，里頭的彈性項(xiàng)目包括header層、#content層和footer層。布局的變化主要體現(xiàn)在#content層。設(shè)置#content層為彈性盒子，當(dāng)瀏覽器寬度超過750px時(shí)，#content層內(nèi)的項(xiàng)目橫向排列；當(dāng)瀏覽器寬度小于750px時(shí)，#content層內(nèi)的項(xiàng)目縱向排列。2.插入圖片的大小自適應(yīng)插入圖片的大小為394px*221px，在HTML文檔中插入時(shí)不要在標(biāo)簽屬性中設(shè)置寬度和高度。當(dāng)瀏覽器寬度超過750px時(shí)，#container的寬度為100vw，此時(shí)圖片寬度設(shè)置為39.4vw；當(dāng)瀏覽器寬度小于750px時(shí)，#container的寬度為80vw，此時(shí)圖片寬度設(shè)置為39.4*08=31.52vw。3.背景圖的大小自適應(yīng)header元素背景圖大小為1000px*167px，設(shè)置背景圖的大小為：background-size:100%100%。為了讓header元素與背景圖的大小與保持一致，還要在媒體查詢里頭設(shè)置header元素的高度，header元素的寬度為100%，當(dāng)#container的寬度為100vw時(shí)，header元素的寬度也為100vw，此時(shí)按照背景圖的長寬比，header元素的高度應(yīng)設(shè)置為16.7vw；當(dāng)#container的寬度為80vw時(shí)，header元素的寬度也為80vw，此時(shí)按照背景圖的長寬比，header元素的高度應(yīng)設(shè)置為16.7*0.8=13.36vw4.文字大小自適應(yīng)文字大小尺寸采用rem為單位，當(dāng)瀏覽器寬度超過750px時(shí)，文字大小設(shè)置為1.2rem；當(dāng)瀏覽器寬度小于750px時(shí)，文字大小設(shè)置為2.5rem。11.1.5任務(wù)11-1：通過媒體查詢實(shí)現(xiàn)響應(yīng)式頁面11.11.任務(wù)描述通過媒體查詢實(shí)現(xiàn)當(dāng)瀏覽器寬度大于980px時(shí)，詩歌“黃鶴樓”分四欄顯示，如圖11-3所示；當(dāng)瀏覽器寬度在750px到980px之間時(shí)，詩歌“黃鶴樓”分三欄顯示，如圖11-4所示；當(dāng)瀏覽器寬度小于750px時(shí)，詩歌“黃鶴樓”分兩欄顯示，如圖11-5所示。2.任務(wù)要求要結(jié)合分欄布局與媒體查詢實(shí)現(xiàn)響應(yīng)式頁面的布局；頁面所有尺寸包括寬度、高度、字體大小、圖像大小、背景圖大小都要符合響應(yīng)式的要求；能夠自適應(yīng)屏幕大小的改變；要在實(shí)踐中綜合運(yùn)用各種CSS樣式，完成頁面的制作。11.1.5任務(wù)11-1：通過媒體查詢實(shí)現(xiàn)響應(yīng)式頁面11.13.任務(wù)分析本任務(wù)將根元素html字體大小為1vw，整體采用rem尺寸單位。在頭元素中設(shè)置metaviewport使頁面在移動(dòng)端橫向和豎向自適應(yīng)。metaviewport屬性的content參數(shù)為"width=device-width,initial-scale=1.0"。在CSS樣式表中用媒體查詢設(shè)置瀏覽器大于980px時(shí)分4欄顯示，媒體查詢的樣式代碼為：@mediascreenand(min-width:980px){}用媒體查詢設(shè)置瀏覽器小于980px大于750px時(shí)分3欄顯示，媒體查詢的樣式代碼為：@mediascreenand(min-width:750px)and(max-width:980px){}用媒體查詢設(shè)置瀏覽器小于750px時(shí)分兩欄顯示，媒體查詢的樣式代碼為：@mediascreenand(max-width:750px){}11.1.5任務(wù)11-1：通過媒體查詢實(shí)現(xiàn)響應(yīng)式頁面11.14.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)11-1”，將網(wǎng)頁命名為task11-1.html，并保存在站點(diǎn)所在的目錄；步驟2建立頁面基本結(jié)構(gòu)輸入詩歌、注解、韻譯、評析四部分內(nèi)容，并在詩歌部分插入圖片。參考代碼如下：<body><header><imgsrc="images/banner.jpg"></header><divid="container"> <divid="title">黃鶴樓<br/><span>崔顥</span></div> <divid="zw1"class="left">昔人已乘黃鶴去，<br/>…煙波江上使人愁。 </div> <imgsrc="images/pic1.jpg"class="pic"> <pclass="br1">【注解】<br/>…</p> <pclass="br2">【韻譯】<br/>…</p> <pclass="br3">【評析】這首詩是吊古懷鄉(xiāng)之佳作?！?lt;/p></div></body>11.1.5任務(wù)11-1：通過媒體查詢實(shí)現(xiàn)響應(yīng)式頁面11.1步驟3設(shè)置基本樣式。（1）設(shè)置根元素html字體大小為1vw，整體采用rem尺寸單位；（2）在header元素中插入橫幅圖像，圖像高度與header相同。header背景用一個(gè)小豎條橫向平鋪。該小豎條是用Photoshop從橫幅圖像中截取高度與橫幅圖像相同的一小部分；（3）設(shè)置div#container的寬度為80vw，加上圓角邊框，水平居中，上下邊界3rem；（4）設(shè)置在詩歌部分插入圖片的寬度為15rem；（5）設(shè)置詩歌標(biāo)題、作者的樣式。完成設(shè)置后的效果如圖11-6所示11.1.5任務(wù)11-1：通過媒體查詢實(shí)現(xiàn)響應(yīng)式頁面11.1步驟4使用metaviewport和媒體查詢設(shè)置瀏覽器大于980px時(shí)分4欄顯示（1）在頭部加入metaviewport元素，代碼如下：<metaname="viewport"content="width=device-width,initial-scale=1">（2）使用媒體查詢設(shè)置瀏覽器大于980px時(shí)分4欄顯示，頁面所有內(nèi)容按先后次序分成4欄；（3）設(shè)置欄間距為50px，欄框線為灰色雙線；（4）分別在“注解”、“韻譯”、“評析”所在的段落設(shè)置段前總是斷行；（5）設(shè)置標(biāo)題、作者、詩歌正文以及“注解”、“韻譯”、“評析”的文字大小。完成設(shè)置后的效果如圖11-3所示。樣式代碼如下：#container{column-gap:4rem;column-rule:0.3remdouble#CCC; }@mediascreenand(min-width:980px){#container{column-count:4;font-size:1.3rem;}.br1,.br2,.br3{-webkit-column-break-before:always;column-break-before:always;}#zw1{font-size:2rem;}#title{font-size:3rem;}#titlespan{font-size:2rem;}}11.1.5任務(wù)11-1：通過媒體查詢實(shí)現(xiàn)響應(yīng)式頁面11.1步驟5使用媒體查詢設(shè)置瀏覽器小于980px大于750px時(shí)分3欄顯示（1）使用媒體查詢設(shè)置瀏覽器小于980px大于750px時(shí)分3欄顯示，頁面所有內(nèi)容按先后次序分成3欄；（2）分別在“注解”和“評析”所在的段落設(shè)置段前總是斷行；（5）設(shè)置標(biāo)題、作者、詩歌正文以及“注解”、“韻譯”、“評析”的文字大小。完成設(shè)置后的效果如圖11-4所示。樣式代碼如下：@mediascreenand(min-width:750px)and(max-width:980px){#container{column-count:3; font-size:1.8rem;}.br1,.br3{-webkit-column-break-before:always;column-break-before:always;}#zw1{font-size:3rem;}#title{font-size:4rem;}#titlespan{font-size:3rem;}}11.1.5任務(wù)11-1：通過媒體查詢實(shí)現(xiàn)響應(yīng)式頁面11.1步驟6使用媒體查詢設(shè)置瀏覽器小于750px時(shí)分兩欄顯示（1）使用媒體查詢設(shè)置瀏覽器小于750px時(shí)分兩欄顯示，頁面所有內(nèi)容按先后次序分成兩欄；（2）在“注解”所在的段落設(shè)置段前總是斷行；（5）設(shè)置標(biāo)題、作者、詩歌正文以及“注解”、“韻譯”、“評析”的文字大小。完成設(shè)置后的效果如圖11-5所示。樣式代碼如下：@mediascreenand(max-width:750px){#container{column-count:2;font-size:2.8rem;}.br1{-webkit-column-break-before:always;column-break-before:always;}#zw1{font-size:4rem;}#title{font-size:6rem;}#titlespan{font-size:4rem;}}步驟7保存文件，完成制作11.2Bootstrap柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式Bootstrap框架不但提供了全局的CSS設(shè)置、定義基本的HTML元素樣式、可擴(kuò)展的class類，還提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)。Bootstrap柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式11.211.2.1Bootstrap柵格系統(tǒng)使用Bootstrap柵格系統(tǒng)制作響應(yīng)式布局的時(shí)候，不需要通過媒體查詢來控制頁面的寬度，而是通過.container類或.container-fluid類來控制。這兩個(gè)類都是預(yù)定義類。.container用于固定寬度并支持響應(yīng)式布局；.container-fluid類用于100%寬度，是占據(jù)全部視口（viewport）的容器。柵格系統(tǒng)通過div.container內(nèi)的一系列行（row）與列（column）的組合來創(chuàng)建頁面布局。針對手機(jī)、平板、桌面電腦、大屏幕顯示器、特大桌面顯示器、超大桌面顯示器等現(xiàn)有的終端設(shè)備，柵格系統(tǒng)的列元素引入.col-、.col-sm-、.col-md-、.col-lg-、.col-xl-、.col-xxl-等預(yù)定義類，使系統(tǒng)隨屏幕或視口（viewport）尺寸的增加自動(dòng)分為最多12列。整個(gè)柵格布局就是圍繞這12列的柵格進(jìn)行組合。表11-4列出了柵格系統(tǒng)的使用參數(shù)。屏幕設(shè)備所有設(shè)備小屏幕平板中等屏幕桌面大屏幕特大桌面顯示器超大桌面顯示器屏幕尺寸

≥576px≥768px≥992px≥1200px≥1400px容器最大寬度自動(dòng)540px720px960px1140px1320px類前綴.col.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-Bootstrap柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式11.21.列組合列組合就是更改柵格數(shù)字來合并列，原則是一行柵格總和數(shù)不能超12。如果不指定柵格數(shù)字，那么將按平均寬度進(jìn)行分配。2.列偏移有的時(shí)候，我們不希望相鄰的兩個(gè)列緊靠在一起，這個(gè)時(shí)候就可以使用列偏移（offset）功能來實(shí)現(xiàn)。使用列偏移需要在列元素上添加類名“offset-md-*”(其中星號代表要偏移的列組合數(shù))，那么具有這個(gè)類名的列就會向右偏移。3.列嵌套柵格系統(tǒng)的結(jié)構(gòu)是行元素里面包含列元素，而列元素內(nèi)又可以嵌套行元素。Bootstrap柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式11.24.柵格系統(tǒng)下的內(nèi)外邊距邊距類名小屏幕平板中等屏幕桌面大屏幕特大桌面顯示器超大桌面顯示器內(nèi)邊距pp-sm-*p-md-*p-lg-*p-xl-*p-xxl-*上內(nèi)邊距ptpt-sm-*pt-md-*pt-lg-*pt-xl-*pt-xxl-*左右內(nèi)邊距pxpx-sm-*px-md-*px-lg-*px-xl-*px-xxl-*上下內(nèi)邊距pypy-sm-*py-md-*py-lg-*py-xl-*py-xxl-*左內(nèi)邊距plpl-sm-*pl-md-*pl-lg-*pl-xl-*pl-xxl-*右內(nèi)邊距prpr-sm-*pr-md-*pr-lg-*pr-xl-*pr-xxl-*外邊距mm-sm-*m-md-*m-lg-*m-xl-*m-xxl-*上外邊距mtmt-sm-*mt-md-*mt-lg-*mt-xl-*mt-xxl-*下外邊距mbmb-sm-*mb-md-*mb-lg-*mb-xl-*mb-xxl-*左外邊距mlml-sm-*ml-md-*ml-lg-*ml-xl-*ml-xxl-*右外邊距mrmr-sm-*mr-md-*mr-lg-*mr-xl-*mr-xxl-*左右外邊距mxmx-sm-*mx-md-*mx-lg-*mx-xl-*mx-xxl-*上下外邊距mymy-sm-*my-md-*my-lg-*my-xl-*my-xxl-*Bootstrap柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式11.211.2.2響應(yīng)式隱藏、響應(yīng)式顯示、響應(yīng)式圖片1.響應(yīng)式隱藏在Bootstrap中，為了更好地適配移動(dòng)設(shè)備，需要對頁面中不重要的內(nèi)容設(shè)置元素的顯示與隱藏。當(dāng)在大屏幕中，可以將那些并不重要的組件進(jìn)行顯示，而在小屏幕中，為了節(jié)省空間，需要對一些元素進(jìn)行隱藏。為元素添加.d-none類，將在所有設(shè)備中隱藏該元素，為元素添加類d-*-none，將為特定尺寸的屏幕進(jìn)行隱藏元素。例如：d-sm-none，將在小屏幕中隱藏該元素。2.響應(yīng)式顯示Bootstrap默認(rèn)移動(dòng)端優(yōu)先，也就是會從最小的設(shè)備開始適配，然后將所有寬度大于該設(shè)備的設(shè)備也進(jìn)行適配，當(dāng)設(shè)置了小屏幕隱藏之后，默認(rèn)小屏幕以及之上的所有屏幕都會默認(rèn)隱藏。所以需要進(jìn)行顯示操作。為元素添加.d-block類，將在所有設(shè)備中顯示該元素。為元素添加.d-*-block類，將在特定尺寸的屏幕設(shè)備中顯示該元素。類功能描述.d-none全部隱藏.d-none.d-sm-block僅在小屏幕移動(dòng)端上隱藏.d-sm-none.d-md-block僅在sm上隱藏.d-md-none.d-lg-block僅在md上隱藏.d-lg-none.d-xl-block僅在lg上隱藏.d-xl-none僅隱藏在xl上.d-block對所有人可見.d-block.d-sm-none僅在小屏幕移動(dòng)端上可見.d-none.d-sm-block.d-md-none僅在sm上可見.d-none.d-md-block.d-lg-none僅在md上可見.d-none.d-lg-block.d-xl-none僅在lg上可見.d-none.d-xl-block僅在xl上可見3.響應(yīng)式圖片圖像有各種各樣的尺寸，需要根據(jù)屏幕的大小自動(dòng)適應(yīng)。在<img>標(biāo)簽中添加.img-fluid類可以設(shè)置響應(yīng)式圖片。11.2.3Bootstrap柵格系統(tǒng)案例11.2案例11-2：使用Bootstrap柵格系統(tǒng)制作響應(yīng)式布局，制作效果在不同的屏幕寬度下分別如圖11-7、圖11-8、圖11-9和圖11-10所示。圖11-7圖11-8圖11-9圖11-1011.2.3Bootstrap柵格系統(tǒng)案例11.2最外層div.container-fluid包含5個(gè)div.row行元素。第一行有12個(gè)div列元素，每個(gè)div列元素使用的最小屏幕尺寸col-sm-1，當(dāng)屏幕寬度小于576px時(shí)，第一行12列橫向排列，如圖11-10所示，當(dāng)屏幕放大到其它尺寸，第一行保持一行12列擺放。第二行4個(gè)列設(shè)置為響應(yīng)式布局。在屏幕大于992px時(shí)，由于4個(gè)列元素都設(shè)置了類.col-lg-3，故呈1排4列擺放，如圖11-7所示；當(dāng)屏幕在768px到992px之間時(shí)，前3個(gè)列元素都設(shè)置了類.col-md-4，故一行顯示3個(gè)列元素，第4個(gè)div所在的元素將被作為一個(gè)整體另起一行排列，設(shè)置第4個(gè)div的類.col-md-12，占據(jù)另起的整行，如圖11-8所示；當(dāng)屏幕寬度在576px到768px之間時(shí)，由于4個(gè)列元素都設(shè)置了類.col-sm-6，故呈兩排兩列擺放，如圖11-9所示；當(dāng)屏幕小于576px時(shí)，4個(gè)列元素呈4排1列縱向擺放，如圖11-10所示。第三行4個(gè)列采用預(yù)定義類.col-md，列的跨越值總和為12。當(dāng)屏幕大于768px時(shí)，呈現(xiàn)1行4列擺放，如圖11-7、圖11-8所示；當(dāng)屏幕小于768px時(shí)，呈現(xiàn)4行1列擺放，如圖11-9、圖11-10所示。第四行4個(gè)列采用預(yù)定義類col-sm-2、col-sm-2、col-sm-5。列的跨越值總和為9，由于第3列使用列偏移col-md-offset-3，故第3列在屏幕大于768px時(shí)向右偏移了3個(gè)列位置，如圖11-7、圖11-8所示；在屏幕小于768px時(shí)不偏移，如圖11-9所示；在屏幕小于576px時(shí)，3個(gè)列元素呈3排1列縱向擺放，如圖11-10所示。11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.21.任務(wù)描述使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局。頁面在電腦桌面端的效果如圖11-11所示；頁面在移動(dòng)端，導(dǎo)航和logo圖標(biāo)消失，效果如圖11-12所示。2.任務(wù)要求要綜合運(yùn)用所學(xué)的Bootstrap知識完成頁面的制作；要能在實(shí)踐中運(yùn)用Bootstrap柵格系統(tǒng)進(jìn)行布局；要掌握響應(yīng)式顯示和隱藏的方法以及Bootstrap柵格嵌套的應(yīng)用。11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.23.任務(wù)分析本任務(wù)采用Bootstrap柵格系統(tǒng)進(jìn)行布局，頁面整體從上到下分為header元素、figure元素、article元素和footer元素。整體布局按桌面端設(shè)備預(yù)定義類“.col-md-*”進(jìn)行定義；需要在移動(dòng)端保持分列顯示的部分采用平板尺寸預(yù)定義類“.col-sm-*”進(jìn)行定義。導(dǎo)航使用預(yù)定義類組合“d-noned-md-block”，即在桌面端顯示導(dǎo)航，桌面端寬度以下的設(shè)備不顯示導(dǎo)航。logo圖標(biāo)所在的列元素使用預(yù)定義類組合“d-noned-lg-block”，僅在大屏幕顯示器下才顯示。頁面在“業(yè)界動(dòng)態(tài)”所在的列元素內(nèi)嵌套了3個(gè)行元素，每個(gè)行元素又包含了下一層列元素，進(jìn)行了柵格嵌套。嵌套內(nèi)的列元素的列數(shù)量總和仍然為12?！皹I(yè)界動(dòng)態(tài)”所在的元素的圖片設(shè)置為響應(yīng)式圖片。標(biāo)題文字采用組合類“mx-md-5mx-lg-0”，設(shè)置水平方向的外邊距在桌面端的size為5，在大屏幕顯示器下設(shè)置為0。響應(yīng)式文字通過html{font-size:calc(1rem+1vw);}進(jìn)行設(shè)置11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.24.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，在站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）在站點(diǎn)內(nèi)將Bootstrap基本配置文件“bootstrap.min.css”放置在CSS文件夾中；（3）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)11-2”；將網(wǎng)頁命名為task11-2.html，保存在站點(diǎn)所在的目錄步驟2網(wǎng)頁的基本布局（1）使用Bootstrap柵格布局，在頭元素插入Bootstrap基本配置文件，代碼如下：<linkhref="css/bootstrap.min.css"rel="stylesheet"type="text/css"/>（2）網(wǎng)頁task1-2.html從上到下分為header元素、figure元素、article元素和footer元素，除figure第2個(gè)行元素按sm尺度分三列布局外，其余按桌面端進(jìn)行Bootstrap布局。（3）分別在導(dǎo)航和logo圖標(biāo)所在的列元素使用預(yù)定義類組合“d-noned-md-block”，使導(dǎo)航在桌面端寬度以下的設(shè)備不顯示；logo圖標(biāo)所在的列元素使用預(yù)定義類組合“d-noned-lg-block”僅在大屏幕顯示器下才顯示；（4）

為方便布局，先預(yù)設(shè)每一個(gè)列元素加上框線11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.2步驟3header元素的制作（1）設(shè)置header元素的背景；（2）在header元素內(nèi)分別建立導(dǎo)航、標(biāo)題文字和圖像logo。標(biāo)題文字采用組合類“mx-md-5mx-lg-0”設(shè)置水平方向的外邊距在桌面端的size為5，在大屏幕顯示器下設(shè)置為0；（3）參照4.2.3使用雪碧圖技術(shù)制作導(dǎo)航的樣式；（4）設(shè)置標(biāo)題文字的樣式：在根元素設(shè)置文字大小為默認(rèn)大小加1vw進(jìn)行響應(yīng)式文字初始設(shè)置。桌面端大屏幕效果如圖11-15所示，移動(dòng)端手機(jī)效果，如圖11-16所示，代碼如下：html{font-size:calc(1rem+1vw);}.boxw{color:#FFF;text-align:center;padding-top:5vw;}.boxwh1{font-size:4vw;}.boxwh2{font-size:3vw;}.boxwstrong{color:#F90;}11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.2步驟4figure元素的制作（1）輸入figure元素的內(nèi)容，使用預(yù)定義類.text-secondary修飾標(biāo)題；使用預(yù)定義類.text-muted修飾內(nèi)容文字；（2）設(shè)置figure元素的背景；（3）修改預(yù)定義類.text-secondary和div.text-muted，設(shè)置figure元素的文字樣式，桌面端效果如圖11-17所示，在谷歌瀏覽器按下F12可見移動(dòng)端效果，如圖11-18所示。11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.2步驟5article元素“最新文章”的制作（1）輸入article元素“最新文章”的內(nèi)容。使用預(yù)定義類.text-secondary修飾標(biāo)題；使用預(yù)定義類.text-success修飾文章列表；（2）修改預(yù)定義類.text-success，設(shè)置article元素“最新文章”的樣式；.text-success{list-style-image:url(images/arrow1.gif);font-size:1rem;}.text-successa:link,.text-successa:visited{color:#690;}.text-successa:hover{color:#999;}11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.2步驟6article元素“業(yè)界動(dòng)態(tài)”的制作（1）在“業(yè)界動(dòng)態(tài)”所在的列元素內(nèi)嵌套3個(gè)行元素。輸入“業(yè)界動(dòng)態(tài)”的具體內(nèi)容。第一行顯示標(biāo)題“業(yè)界動(dòng)態(tài)”，采用預(yù)定義類.text-secondary；第二行和第三行分為兩列，第一列加上圖像，采用預(yù)定義類.img-fluid實(shí)現(xiàn)響應(yīng)式大??；第二列加上文字內(nèi)容，采用預(yù)定義類.text-light。（2）在“業(yè)界動(dòng)態(tài)”所在的列元素使用自定義類.news，設(shè)置其樣式，完成設(shè)置后桌面端效果如圖11-19所示，移動(dòng)端平板效果如圖11-20所示。11.2.4任務(wù)11-2：使用Bootstrap柵格系統(tǒng)進(jìn)行頁面布局11.2步驟7footer元素的制作（1）輸入footer元素的內(nèi)容；（2）設(shè)置footer元素的樣式。步驟8保存文件（1）去掉預(yù)設(shè)在每一個(gè)列元素上的框線；（2）保存文件，完成制作。11.3Bootstrap響應(yīng)式組件與插件Bootstrap中包含了豐富的Web組件，比如按鈕、按鈕組、導(dǎo)航等。根據(jù)這些組件，可以快速地搭建一個(gè)功能完備的網(wǎng)站。在前面各章，我們已經(jīng)分散介紹了其中一些組件的應(yīng)用。本節(jié)將對Bootstrap組件集中作進(jìn)一步的介紹。Bootstrap響應(yīng)式組件與插件11.3

11.3.1響應(yīng)式組件Bootstrap響應(yīng)式組件能根據(jù)屏幕的大小呈現(xiàn)出不同的效果。1.響應(yīng)式表格在“5.1.3Bootstrap表格預(yù)定義類”已對Bootstrap表格作了介紹，如果在table元素外用div包裹，該div元素使用.table-responsive-*類，則可以創(chuàng)建響應(yīng)式表格。.table-responsive-sm：在屏幕寬度小于576px時(shí)會創(chuàng)建水平滾動(dòng)條；.table-responsive-md：在屏幕寬度小于768px時(shí)會創(chuàng)建水平滾動(dòng)條；.table-responsive-lg：在屏幕寬度小于992px時(shí)會創(chuàng)建水平滾動(dòng)條；.table-responsive-xl：在屏幕寬度小于1200px時(shí)會創(chuàng)建水平滾動(dòng)條；.table-responsive-xxl：在屏幕寬度小于1400px時(shí)會創(chuàng)建水平滾動(dòng)條；2.響應(yīng)式表單輸入框在“5.2.5Bootstrap表單元素樣式”中已對Bootstrap表單作了介紹，其中.form-control類作用于表單元素，寬度設(shè)置為100%?？梢栽?form-control輸入框中通過添加.form-control-lg類或.form-control-sm類來設(shè)置響應(yīng)式輸入框的大小。還可以使用輸入框組，.input-group-sm類來設(shè)置小的輸入框組，.input-group-lg類設(shè)置大的輸入框組。Bootstrap響應(yīng)式組件與插件11.3

3.響應(yīng)式按鈕Bootstrap5可以設(shè)置響應(yīng)式按鈕的大小。使用.btn-lg類設(shè)置大按鈕，使用.btn-sm類設(shè)置小按鈕。此外，還可以使用.btn-group-lg|sm|類來設(shè)置按鈕組的大小。4.響應(yīng)式模態(tài)框尺寸在“5.3.2Bootstrap模態(tài)框”中已對Bootstrap模態(tài)框作了介紹。定義響應(yīng)式模態(tài)框尺寸可以通過在div.modal-dialog元素上添加.modal-sm類來創(chuàng)建一個(gè)小模態(tài)框，或在div.modal-dialog元素上添加.modal-lg類創(chuàng)建一個(gè)大模態(tài)框。5.響應(yīng)式flex類Bootstrap5通過flex類來控制頁面的布局?？梢愿鶕?jù)不同的設(shè)備，設(shè)置flex類，從而實(shí)現(xiàn)頁面的響應(yīng)式布局，表11-6列出了響應(yīng)式flex類。例如，下面的代碼創(chuàng)建了4個(gè)彈性盒子，在屏幕小于576px時(shí)效果如圖11-21所示，當(dāng)屏幕在576px~768px時(shí)效果如圖11-22所示，在屏幕768px~992px時(shí)效果如圖11-23所示，在屏幕大于992px時(shí)效果如圖11-24所示，代碼如下：<spanclass="d-flexbg-info">d-flex非響應(yīng)式彈性盒子</span><spanclass="d-sm-flexbg-success">d-sm-flex：小屏幕</span><spanclass="d-md-flexbg-danger">d-md-flex：中屏幕</span><spanclass="d-lg-flexbg-secondary">d-lg-flex：大屏幕</span>

Bootstrap響應(yīng)式組件與插件11.3

6.Bootstrap5加載效果.spinner-border類可以創(chuàng)建加載中的效果，為一個(gè)旋轉(zhuǎn)的圓圈。使用.spinner-grow類可以創(chuàng)建圓圈閃爍的加載效果。使用.spinner-border-*類或.spinner-grow-*類可以創(chuàng)建加載效果的大小。例如，下面的代碼使用.spinner-border-sm和.spinner-grow-sm類來創(chuàng)建兩種加載效果，效果如圖11-25所示。圖11-257.卡片組件通過Bootstrap5的.card與.card-body類可以創(chuàng)建卡片?？ㄆ梢园^部、內(nèi)容、底部，效果如圖11-26所示，代碼如下：<divclass="card"> <divclass="card-header">頭部</div> <divclass="card-body">內(nèi)容</div> <divclass="card-footer">底部</div></div><divclass="spinner-borderspinner-border-sm"></div><divclass="spinner-growspinner-grow-sm"></div>在div.card-body內(nèi)可以使用.card-title類來設(shè)置卡片內(nèi)容的標(biāo)題；可以使用.card-text類用于設(shè)置卡片內(nèi)容的文本；可以使用.card-link類用于給卡片內(nèi)容的鏈接設(shè)置顏色?？梢越o<img>標(biāo)簽添加.card-img-top類（圖片在文字上方）或.card-img-bottom類（圖片在文字下方）來設(shè)置圖片卡片。Bootstrap響應(yīng)式組件與插件11.3

11.3.2Bootstrap插件有些組件需要jQuery插件才能實(shí)現(xiàn)其功能，從而給頁面添加更多的互動(dòng)。這些插件包括：1.下拉菜單Bootstrap下拉菜單使用.dropdown類來指定?？梢允褂靡粋€(gè)按鈕button元素或超鏈接a元素來打開下拉菜單。button元素或a元素需要添加.dropdown-toggle類和data-toggle="dropdown"屬性。在div元素(或項(xiàng)目列表ul)上添加.dropdown-menu類來設(shè)置下拉菜單，然后在下拉菜單的選項(xiàng)中添加.dropdown-item類。例如，按下按鈕打開下拉菜單，效果如圖11-27所示，代碼如下：<divclass="dropdown"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-bs-toggle="dropdown">下拉菜單按鈕</button><divclass="dropdown-menu"> <aclass="dropdown-item"href="#">鏈接1</a> <aclass="dropdown-item"href="#">鏈接2</a> <aclass="dropdown-item"href="#">鏈接3</a></div></div>Bootstrap響應(yīng)式組件與插件11.3

2.折疊.collapse類用于指定一個(gè)折疊元素，點(diǎn)擊按鈕后會在隱藏與顯示之間切換，如圖11-28所示在a元素或button元素上添加data-bs-toggle="collapse"屬性和data-bs-target="#id"屬性可以控制內(nèi)容的隱藏與顯示。data-bs-target屬性是對應(yīng)折疊的內(nèi)容的id，a元素上可以使用

href

屬性來代替

data-bs-target

屬性，代碼如下：<ahref="#demo"data-bs-toggle="collapse">折疊標(biāo)題</a><divid="demo"class="collapse">折疊內(nèi)容</div>Bootstrap響應(yīng)式組件與插件11.3

3.導(dǎo)航欄類名功能.navbar在nav元素中使用.navbar類就創(chuàng)建了一個(gè)導(dǎo)航欄。導(dǎo)航欄一般放在頁面的頂部。.navbar-expand-*在nav元素中使用，可以創(chuàng)建響應(yīng)式的導(dǎo)航欄(大屏幕水平鋪開，小屏幕垂直堆疊)。.navbar-brand在nav元素內(nèi)插入圖像中使用，常用于高亮顯示品牌Logo。.navbar-toggler在折疊導(dǎo)航欄按鈕元素中使用,與data-bs-toggle="collapse"屬性和data-target="#thetarget"屬性搭配.navbar-toggler-icon作用于折疊導(dǎo)航欄按鈕內(nèi)的元素.collapsenavbar-collapse折疊導(dǎo)航欄上作用于div，用來包裹導(dǎo)航內(nèi)容（鏈接）Bootstrap響應(yīng)式組件與插件11.3（1）響應(yīng)式導(dǎo)航欄nav元素使用.navbar類創(chuàng)建導(dǎo)航欄后，緊跟著添加.navbar-expand-xxl|xl|lg|md|sm類，可以創(chuàng)建響應(yīng)式的導(dǎo)航欄(大屏幕水平鋪開，小屏幕垂直堆疊)。例如，下面的代碼在小屏幕上水平導(dǎo)航欄會切換為垂直的（如圖11-30所示），當(dāng)屏幕比sm平板要大時(shí)則呈現(xiàn)水平效果（如圖11-29所示）。代碼如下：<navclass="navbarnavbar-expand-smbg-light"><ulclass="navbar-nav"> <liclass="nav-item"><aclass="nav-link"href="#">鏈接1</a></li> <liclass="nav-item"><aclass="nav-link"href="#">鏈接2</a></li> <liclass="nav-item"><aclass="nav-link"href="#">鏈接3</a></li></ul></nav>圖11-30圖11-29（2）圖片自適應(yīng)導(dǎo)航欄在nav元素內(nèi)插入圖像，使用.navbar-brand類來設(shè)置圖片自適應(yīng)導(dǎo)航欄，常用于高亮顯示品牌Logo。例如在上面的代碼中，在nav元素下插入a元素，設(shè)置a元素使用navbar-brand類，在a元素內(nèi)的圖像能自適應(yīng)導(dǎo)航欄進(jìn)行排列，效果如圖11-31所示。Bootstrap響應(yīng)式組件與插件11.3

（3）折疊導(dǎo)航欄所謂折疊導(dǎo)航欄就是在小屏幕上通過點(diǎn)擊按鈕來顯示導(dǎo)航選項(xiàng)。這就需要額外添加一個(gè)按鈕。在按鈕上添加class="navbar-toggler"類以及data-bs-toggle="collapse"與data-target="#thetarget"屬性。然后在設(shè)置了class="collapsenavbar-collapse"類的div上包裹導(dǎo)航內(nèi)容（鏈接），div元素上的id匹配按鈕data-bs-target指定的id。例如，將以上代碼改為折疊導(dǎo)航欄，在小屏幕下導(dǎo)航欄收縮，效果如圖11-32所示。點(diǎn)擊按鈕，顯示垂直導(dǎo)航欄，效果如圖11-33所示，代碼如下:<navclass="navbarnavbar-expand-mdbg-lightnavbar-light"><aclass="navbar-brand"href="#"><imgsrc="南斗星.gif"alt="logo"style="width:20%;"></a><buttonclass="navbar-toggler"data-bs-toggle="collapse"data-bs-target="#tt"><spanclass="navbar-toggler-icon"></span></button><divclass="collapsenavbar-collapse"id="tt"><ulclass="navbar-nav"><!—導(dǎo)航鏈接-->…</ul></div></nav>（4）固定導(dǎo)航欄導(dǎo)航欄可以固定在頁面頂部或者底部。在nav元素中使用.fixed-top類來實(shí)現(xiàn)導(dǎo)航欄固定在頁面頂部；在nav元素中使用.fixed-bottom類將設(shè)置導(dǎo)航欄固定在頁面底部。Bootstrap響應(yīng)式組件與插件11.3

3.輪播輪播是循環(huán)的幻燈片，如圖11-34、圖11-35、圖11-36所示，頁面會在這三個(gè)圖片自動(dòng)循環(huán)播放。輪播組件包含指示符、輪播圖片和左右切換按鈕三部分。一個(gè)典型的輪播代碼如下：<divid="demo"class="carouselslide"data-bs-ride="carousel"><!--指示符--><divclass="carousel-indicators"><buttontype="button"data-bs-target="#demo"data-bs-slide-to="0"class="active"></button><buttontype="button"data-bs-target="#demo"data-bs-slide-to="1"></button><buttontype="button"data-bs-target="#demo"data-bs-slide-to="2"></button></div><!--輪播圖片--><divclass="carousel-inner"><divclass="carousel-itemactive"><imgsrc="images/16.jpg"class="d-block"style="width:100%"></div><divclass="carousel-item"><imgsrc="images/22.jpg"class="d-block"style="width:100%">是大學(xué)生</div><divclass="carousel-item"><imgsrc="images/23.jpg"class="d-block"style="width:100%"></div></div><!--左右切換按鈕--><buttonclass="carousel-control-prev"type="button"data-bs-target="#demo"data-bs-slide="prev"><spanclass="carousel-control-prev-icon"></span></button><buttonclass="carousel-control-next"type="button"data-bs-target="#demo"data-bs-slide="next"><spanclass="carousel-control-next-icon"></span></button></div>類名功能.carouse在div元素中使用.carousel類可以創(chuàng)建輪播，與.slide類搭配可添加切換圖片的過渡和動(dòng)畫效果.carousel-indicators為輪播添加一個(gè)指示符，就是輪播圖底下的一個(gè)個(gè)小點(diǎn)，輪播的過程可以顯示目前是第幾張圖。.carousel-inner添加要切換的圖片.carousel-item指定每個(gè)圖片的內(nèi)容.carousel-caption可以在每個(gè)div.carousel-item內(nèi)添加<divclass="carousel-caption">來設(shè)置輪播圖片的描述文本：.carousel-control-prev添加左側(cè)的按鈕，點(diǎn)擊會返回上一張.carousel-control-next添加右側(cè)按鈕，點(diǎn)擊會切換到下一張.carousel-control-prev-icon與.carousel-control-prev一起使用，設(shè)置左側(cè)的按鈕.carousel-control-next-icon與.carousel-control-next一起使用，設(shè)置右側(cè)的按鈕Bootstrap響應(yīng)式組件與插件11.3

4.滾動(dòng)監(jiān)聽滾動(dòng)監(jiān)聽（Scrollspy）插件會根據(jù)滾動(dòng)條的位置自動(dòng)更新對應(yīng)的導(dǎo)航目標(biāo)。下面為典型的滾動(dòng)監(jiān)聽實(shí)例：當(dāng)頁面滾動(dòng)到指定內(nèi)容時(shí)（例如內(nèi)容2），會將導(dǎo)航欄相應(yīng)的鏈接（標(biāo)題2）自動(dòng)加亮，代碼如下：<bodydata-bs-spy="scroll"data-bs-target=".navbar"data-bs-offset="50"><navclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-top"><ulclass="navbar-nav"><li><ahref="#section1">鏈接1</a></li><li><ahref="#section2">鏈接2</a></li>...</nav><divid="section1"><h1>內(nèi)容1</h1><p>…</p></div><divid="section2"><h1>內(nèi)容2</h1><p>…</p></div>...</body>監(jiān)聽的元素通常是body，需添加data-bs-spy="scroll"屬性和data-bs-target屬性，data-bs-target屬性的值為導(dǎo)航欄的id或class(.navbar)?？蓾L動(dòng)項(xiàng)元素上的id必須匹配導(dǎo)航欄上的鏈接選項(xiàng)?？蛇x項(xiàng)data-bs-offset屬性用于計(jì)算滾動(dòng)位置時(shí)，距離頂部的偏移像素。默認(rèn)為10px。此外，還要把使用data-spy="scroll"的元素設(shè)置為相對定位，即將其position屬性設(shè)置為"relative"才能起作用。Bootstrap響應(yīng)式組件與插件11.3

5.提示框提示框在鼠標(biāo)移動(dòng)到元素上顯示，鼠標(biāo)移到元素外就消失，效果如圖11-37所示。通過向元素添加data-bs-toggle="tooltip"來創(chuàng)建提示框。title屬性的內(nèi)容為提示框顯示的內(nèi)容。提示框要寫在JavaScript的初始化代碼里，然后在指定的元素上調(diào)用tooltip()方法，代碼如下：<buttontype="button"class="btnbtn-primary"data-bs-toggle="tooltip"title="顯示提示內(nèi)容!">

鼠標(biāo)經(jīng)過</button><script>vartooltipTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))vartooltipList=tooltipTriggerList.map(function(tooltipTriggerEl){returnnewbootstrap.Tooltip(tooltipTriggerEl)})</script>Bootstrap響應(yīng)式組件與插件11.3

6.彈出框彈出框在鼠標(biāo)點(diǎn)擊到元素后顯示，如圖11-38所示。通過向元素添加data-bs-toggle="popover"來創(chuàng)建彈出框。title屬性的內(nèi)容為彈出框的標(biāo)題，data-bs-content屬性顯示了彈出框的文本內(nèi)容。彈出框要寫在JavaScript的初始化代碼里，代碼如下：<buttontype="button"class="btnbtn-primary"data-bs-toggle="popover"title="彈出框標(biāo)題"data-bs-content="彈出框內(nèi)容">點(diǎn)擊</button><script>varpopoverTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))varpopoverList=popoverTriggerList.map(function(popoverTriggerEl){returnnewbootstrap.Popover(popoverTriggerEl)})</script>11.3.3Bootstrap插件應(yīng)用案例11.3

案例11-3：在頁面中插入三張圖片，對應(yīng)頂部導(dǎo)航欄上的標(biāo)題鏈接。三張圖片用div包裹，分別設(shè)置div的id為s1、s2、s3。在頂部導(dǎo)航欄的標(biāo)題鏈接分別鏈接到s1、s2、s3上，點(diǎn)擊頂部導(dǎo)航欄上的鏈接會相應(yīng)滾動(dòng)顯示的圖片。設(shè)置滾動(dòng)監(jiān)聽，在頁面<body>標(biāo)簽中添加data-bs-spy="scroll"屬性和data-bs-target屬性。data-bs-target屬性值與頂部導(dǎo)航欄的class值匹配，為".navbar"。當(dāng)頁面滾動(dòng)到第一張照片時(shí)，導(dǎo)航欄第一個(gè)標(biāo)題鏈接加亮顯示，在如圖11-39所示；、當(dāng)頁面滾動(dòng)到第二張照片時(shí)，導(dǎo)航欄第二個(gè)標(biāo)題鏈接加亮顯示，在如圖11-40所示；當(dāng)頁面滾動(dòng)到第二張照片時(shí)，導(dǎo)航欄第二個(gè)標(biāo)題鏈接加亮顯示，在如圖11-41所示。導(dǎo)航欄有兩個(gè)，分別在頂部位置和底部位置固定不動(dòng)。頂部導(dǎo)航欄nav元素添加.fixed-top類進(jìn)行頂部固定；底部導(dǎo)航欄nav元素添加.fixed-bottom類進(jìn)行底部固定。由于頂部和底部固定導(dǎo)航欄的存在，會遮擋頁面主體的部分空間，所以要樣式表中設(shè)置body的樣式為上下內(nèi)邊距padding為50px。代碼如下：11.3.3Bootstrap插件應(yīng)用案例11.3

案例11-3：在頁面中插入三張圖片，對應(yīng)頂部導(dǎo)航欄上的標(biāo)題鏈接。三張圖片用div包裹，分別設(shè)置div的id為s1、s2、s3。在頂部導(dǎo)航欄的標(biāo)題鏈接分別鏈接到s1、s2、s3上，點(diǎn)擊頂部導(dǎo)航欄上的鏈接會相應(yīng)滾動(dòng)顯示的圖片。設(shè)置滾動(dòng)監(jiān)聽，在頁面<body>標(biāo)簽中添加data-bs-spy="scroll"屬性和data-bs-target屬性。data-bs-target屬性值與頂部導(dǎo)航欄的class值匹配，為".navbar"。當(dāng)頁面滾動(dòng)到第一張照片時(shí)，導(dǎo)航欄第一個(gè)標(biāo)題鏈接加亮顯示，在如圖11-39所示；、當(dāng)頁面滾動(dòng)到第二張照片時(shí)，導(dǎo)航欄第二個(gè)標(biāo)題鏈接加亮顯示，在如圖11-40所示；當(dāng)頁面滾動(dòng)到第二張照片時(shí)，導(dǎo)航欄第二個(gè)標(biāo)題鏈接加亮顯示，在如圖11-41所示。導(dǎo)航欄有兩個(gè)，分別在頂部位置和底部位置固定不動(dòng)。頂部導(dǎo)航欄nav元素添加.fixed-top類進(jìn)行頂部固定；底部導(dǎo)航欄nav元素添加.fixed-bottom類進(jìn)行底部固定。由于頂部和底部固定導(dǎo)航欄的存在，會遮擋頁面主體的部分空間，所以要樣式表中設(shè)置body的樣式為上下內(nèi)邊距padding為50px。代碼如下：11.3.3Bootstrap插件應(yīng)用案例11.3

<bodydata-bs-spy="scroll"data-bs-target=".navbar"data-bs-offset="50"><navclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-top"><divclass="container-fluid"><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="#s1">梧桐山</a></li><liclass="nav-item"><aclass="nav-link"href="#s2">年保玉則</a></li><liclass="nav-item"><aclass="nav-link"href="#s3">青海湖</a></li></ul></div></nav><divid="s1"class="container-fluidbg-successtext-whitett"><imgsrc="任務(wù)/images/t1.jpg"width="100%"></div><divid="s2"class="container-fluidbg-warningtt"><imgsrc="任務(wù)/images/11.jpg"width="100%"></div><divid="s3"class="container-fluidbg-secondarytext-whitett"><imgsrc="任務(wù)/images/21.jpg"width="100%"></div><divclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-bottom"><divclass="container-fluid"><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="#">首頁</a></li><liclass="nav-item"><aclass="nav-link"href="#">行攝天涯</a></li></ul></div></div></body><head><title>案例11-3</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="css/bootstrap.min.css"rel="stylesheet"><style>body{padding-top:50px;padding-bottom:50px;}.tt{padding:80px30px;}</style><scriptsrc="js/bootstrap.bundle.min.js"></script></head>11.3.4任務(wù)11-3：使用Bootstrap插件制作輪播頁面11.3

1.任務(wù)描述使用Bootstrap插件制作輪播頁面，頁面主體的三張照片自動(dòng)循環(huán)播放，在小屏幕終端會將頭部導(dǎo)航隱藏，效果如圖11-42所示。點(diǎn)擊右上角的按鈕，可以展開導(dǎo)航，如圖11-43所示。導(dǎo)航有下拉菜單，展開下拉菜單，效果如圖4-44所示。頁面在電腦桌面端的效果如圖1