HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（慕課版）（第2版） 課件 范玉玲 第5-7章 CSS特效、響應(yīng)式設(shè)計(jì)與Bootstrap、網(wǎng)站建設(shè)流程

第5章CSS特效《HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（第2版）》目錄/Contents5.1濾鏡5.2過渡5.3動(dòng)畫5.4轉(zhuǎn)換5.45.5項(xiàng)目濾鏡5.15.1濾鏡CSS3的濾鏡（filter）屬性提供了模糊和改變元素顏色的功能，常用于調(diào)整圖像的渲染、背景或邊框顯示效果。多個(gè)濾鏡之間用空格隔開。

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();5.1濾鏡filter的屬性屬性值描述屬性值描述grayscale灰度opacity透明度sepia褐色brightness亮度saturate飽和度contrast對比度hue-rotate色相旋轉(zhuǎn)blur模糊invert反色drop-shadow陰影urlurl函數(shù)接收一個(gè)XML文件，該文件設(shè)置了一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來指定一個(gè)具體的濾鏡元素。例如：filter:url(svg-url#element-id)#romance

{

-webkit-filter:

grayscale(100%);

/*Chrome,Safari,Opera*/

filter:

grayscale(100%);}舉例（filter-grayscale）灰度grayscale()grayscale()用于將圖像轉(zhuǎn)換為灰度圖像。grayscale()參數(shù)值為0～1的小數(shù)，也支持0%～100%百分比的形式。如果沒有任何參數(shù)值，默認(rèn)將以“100%”渲染。#romance{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}舉例（filter-blur）模糊blur()blur()用于給圖像設(shè)置高斯模糊。參數(shù)值設(shè)置為高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，因此值越大越模糊。#romance{-webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);}舉例（filter-brightness）brightness()用于調(diào)整圖像的亮度，默認(rèn)值為100%或者1。如果其值超過100%，就意味著圖片擁有更高的亮度。如果值是0%，圖像會(huì)全黑。值是100%，則圖像無變化。亮度brightness()#romance{-webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filter:contrast(500%);}舉例（filter-contrast）調(diào)整圖像的對比度。值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。超過100％的值將提供更具對比度的結(jié)果。若沒有設(shè)置值，默認(rèn)是1。對比度contrast()drop-shadow()用于給圖像設(shè)置一個(gè)陰影效果。<offset-x><offset-y>（必選）：<offset-x>可設(shè)置水平方向的距離，負(fù)值會(huì)使陰影出現(xiàn)在元素的左邊；<offset-y>可設(shè)置垂直方向的距離，負(fù)值會(huì)使陰影出現(xiàn)在元素的上方。如果兩個(gè)值都是0,則陰影出現(xiàn)在元素正后方。<blur-radius>（可選）：值越大，越模糊，則陰影會(huì)變得更大更淡。不允許負(fù)值，若未設(shè)置，默認(rèn)值為0（陰影的邊界很銳利）。<spread-radius>（可選）：正值會(huì)使陰影擴(kuò)張或變大，負(fù)值會(huì)使陰影縮小。若未設(shè)置，默認(rèn)值為0（陰影會(huì)與元素一樣大?。?。<color>（可選）：若未設(shè)置該屬性，顏色值將根據(jù)瀏覽器的默認(rèn)設(shè)置來進(jìn)行顯示。舉例（drop-shadow）#romance{ filter:drop-shadow(15px15px8px#222);}陰影drop-shadow()filter:drop-shadow(30px10px4px#4444dd);filter:drop-shadow(0-6mm4mmrgb(160,0,210));filter:drop-shadow(000.75remcrimson);舉例（drop-shadow）陰影drop-shadow()這個(gè)函數(shù)有點(diǎn)類似于box-shadow屬性。box-shadow屬性在元素的整個(gè)框后面創(chuàng)建一個(gè)矩形陰影，而drop-shadow()過濾器則是創(chuàng)建一個(gè)符合圖像本身形狀(alpha通道)的陰影。Tipdrop-shadow和box-shadow相似，都是實(shí)現(xiàn)投影效果,它們有什么區(qū)別呢？box-shadow陰影可以任意疊加，drop-shadow不能陰影疊加，但是它是真正意義上的投影！而box-shadow只是盒陰影而已。舉例（box-shadow3）（box-shadow4）（區(qū)別1）（區(qū)別2）陰影drop-shadow()#romance90{-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);}#romance180{-webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);}#romance270{-webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);}舉例（filter-hue-rotate）hue-rotate()設(shè)置圖像應(yīng)用色相旋轉(zhuǎn)。取值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值為0deg。該值沒有最大值，超過360deg時(shí)相當(dāng)于又繞一圈。色相旋轉(zhuǎn)hue-rotate()#romance{-webkit-filter:invert(100%);/*Chrome,Safari,Opera*/filter:invert(100%);}舉例（filter-invert）invert反色會(huì)把圖片變成底片的感覺值為100%是完全反轉(zhuǎn)值為0%則圖像無變化反相invert()#romance{-webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);}舉例（filter-opacity）透明度opacity()opacity()用于定義透明度，默認(rèn)值為1。值為0%則圖像完全透明，值為100%則圖像不透明。該函數(shù)與已有的opacity屬性相似。

.opacity{

opacity:0.5;

filter:alpha(opacity=50);

}所有瀏覽器都支持opacity屬性，IE8及更早的版本支持替代的filter屬性。filter:alpha(opacity=number)，number取值[0~100],0完全透明，100不透明。所以為兼容可寫為：透明度opacity()舉例（filter-opacity）#romance{-webkit-filter:saturate(300%);/*Chrome,Safari,Opera*/filter:saturate(300%);}舉例（filter-saturate）定義圖像飽和度。值為0%是完全不飽和，值為100%則圖像無變化。超過100%的值是允許的，表示具有更高的飽和度。默認(rèn)值為1。飽和度saturate()#romance{-webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);}舉例（filter-sepia）將圖像轉(zhuǎn)換為深褐色。參數(shù)值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。默認(rèn)值為0.褐色sepia()filter可以整合多個(gè)濾鏡，濾鏡之間可使用空格分隔開。#romance{-webkit-filter:grayscale(50%)sepia(50%);/*Chrome,Safari,Opera*/filter:grayscale(50%)sepia(50%);}舉例（filter）符合函數(shù)filter()順序是非常重要的(例如使用grayscale()后再使用sepia()將產(chǎn)生一個(gè)完整的灰度圖片)。Tip過渡5.2transition簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。transition-property規(guī)定應(yīng)用過渡的CSS屬性的名稱。transition-duration定義過渡效果花費(fèi)的時(shí)間。transition-timing-function規(guī)定過渡效果的時(shí)間曲線。transition-delay規(guī)定過渡效果何時(shí)開始。CSS3過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：1、指定要添加效果的CSS屬性。2、指定效果的持續(xù)時(shí)間。Transition過渡把鼠標(biāo)指針放到div元素上，其高度會(huì)從100px逐漸變?yōu)?00px。舉例（transition）div{width:100px;background:blue;

height:100px; transition:height2sease-in-out1s; -moz-transition:height2sease-in-out1s; -webkit-transition:height2sease-in-out1s; -o-transition:height2sease-in-out1s;}div:hover{height:300px;}Transition過渡div{width:100px;}div:hover{width:300px;transition:width2s;-moz-transition:width2s;-webkit-transition:width2s;-o-transition:width2s;}把鼠標(biāo)指針放到div元素上，其寬度會(huì)從100px逐漸變?yōu)?00px。Transition過渡舉例（transition）transition-property

屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱?；菊Z法格式transition-property:none|all|property;屬性值描述none沒有屬性會(huì)獲得過渡效果。all所有屬性都將獲得過渡效果。property定義應(yīng)用過渡效果的CSS屬性名稱，多個(gè)名稱之間以逗號(hào)分隔。transition-property舉例(transition-property)transition-duration屬性用于定義過渡效果花費(fèi)的時(shí)間，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）?；菊Z法格式transition-duration:time;transition-duration舉例(transition-duration)transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease“?；菊Z法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);舉例(transition-timing-function)transition-timing-functiontransition-timing-function屬性的取值屬性值描述linear指定以相同速度開始至結(jié)束的過渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速開始，然后加快，最后慢慢結(jié)束的過渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-out指定以慢速結(jié)束（淡出效果）的過渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-out指定以慢速開始和結(jié)束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間。transition-timing-functiontransition-delay屬性規(guī)定過渡效果何時(shí)開始，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）?；菊Z法格式transition-delay:time;正數(shù):過渡動(dòng)作會(huì)延遲觸發(fā)。負(fù)數(shù)：過渡動(dòng)作會(huì)從該時(shí)間點(diǎn)開始，之前的動(dòng)作被截?cái)?。transition-delaytransition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過渡屬性。基本語法格式transition：propertydurationtiming-functiondelay;使用transition屬性設(shè)置多個(gè)過渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行定義，不能顛倒。

例如：transition:border-radius5sease-in-out2s;transition無論是單個(gè)屬性還是簡寫屬性，使用時(shí)都可以實(shí)現(xiàn)多個(gè)過渡效果。如果使用transition簡寫屬性設(shè)置多種過渡效果，需要為每個(gè)過渡屬性集中指定所有的值，并且使用逗號(hào)進(jìn)行分隔。transition隨堂練習(xí)（2）過渡舉例1舉例21、實(shí)現(xiàn)從左側(cè)圖片到右側(cè)圖片的過渡變化，過渡效果延時(shí)1s發(fā)生。2、上面例子只有一個(gè)過渡效果，如何同時(shí)有多個(gè)過渡效果應(yīng)該怎么處理呢？下面例子同時(shí)采用過渡效果改變width、height、opacity的樣式。動(dòng)畫5.3Animation動(dòng)畫@keyframes規(guī)定動(dòng)畫。animation所有動(dòng)畫屬性的簡寫屬性，除了animation-play-state屬性。animation-name規(guī)定@keyframes動(dòng)畫的名稱。animation-duration規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。animation相關(guān)的屬性CSS3的屬性中有若干能夠?qū)崿F(xiàn)動(dòng)畫效果，通過設(shè)置其子屬性，可以創(chuàng)造如移動(dòng)、淡入淡出、改變顏色的效果。其子屬性及功能描述如表所示：舉例Animation動(dòng)畫animation-timing-function規(guī)定動(dòng)畫的速度曲線。animation-delay規(guī)定動(dòng)畫何時(shí)開始。animation-iteration-count規(guī)定動(dòng)畫被播放的次數(shù)。animation-direction規(guī)定動(dòng)畫是否在下一周期逆向地播放。animation-play-state規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。animation-fill-mode規(guī)定對象動(dòng)畫時(shí)間之外的狀態(tài)。animation相關(guān)的屬性舉例屬性值描述animationname必需。定義動(dòng)畫的名稱。keyframes-selector必需。動(dòng)畫時(shí)長的百分比。合法的值：0-100%from（與0%相同）to（與100%相同）css-styles必需。一個(gè)或多個(gè)合法的CSS樣式屬性。@keyframes規(guī)則基本語法格式@keyframes

animationname{keyframes-selector{css-styles;}}舉例使div元素勻速向下移動(dòng)：舉例（

animation-@keyframes-fromto，animation-@keyframes-%）div{animation:mymove5sinfinite;}@keyframesmymove{from{top:0px;}to{top:200px;}}@-moz-keyframesmymove/*Firefox*/{from{top:0px;}to{top:200px;}}@-webkit-keyframesmymove/*Safari和Chrome*/{from{top:0px;}to{top:200px;}}@-o-keyframesmymove/*Opera*/{from{top:0px;}to{top:200px;}}"from"和"to"等價(jià)于0%和100%。0%是動(dòng)畫的開始時(shí)間，100%動(dòng)畫的結(jié)束時(shí)間。@keyframes規(guī)則案例演示為@keyframes動(dòng)畫規(guī)定名稱值描述keyframename規(guī)定需要綁定到選擇器的keyframe的名稱。none規(guī)定無動(dòng)畫效果（可用于覆蓋來自級(jí)聯(lián)的動(dòng)畫）。animation-name基本語法格式animation-name:keyframename|none;定義動(dòng)畫完成一個(gè)周期所需要的時(shí)間，以秒或毫秒計(jì)。說明：必須明確規(guī)定animation-duration屬性，否則時(shí)長為0，就不會(huì)播放動(dòng)畫。舉例（animation-duration）值描述time規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間。默認(rèn)值是0，意味著沒有動(dòng)畫效果。animation-duration基本語法格式animation-duration:time;animation-timing-function規(guī)定動(dòng)畫的速度曲線。速度曲線定義動(dòng)畫在每一動(dòng)畫周期中執(zhí)行的節(jié)奏。速度曲線用于使變化更為平滑。舉例（

animation-timing-function）值描述linear動(dòng)畫從頭到尾的速度是相同的。ease默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。ease-in動(dòng)畫以低速開始。ease-out動(dòng)畫以低速結(jié)束。ease-in-out動(dòng)畫以低速開始和結(jié)束。cubic-bezier(n,n,n,n)在cubic-bezier（貝塞爾曲線）函數(shù)中自己的值。可能的值是從0到1的數(shù)值。animation-timing-function基本語法格式animation-timing-function:value;隨堂練習(xí)（3）動(dòng)畫對比一下不同速度曲線的效果。演示示例：速度曲線animation-delay屬性定義動(dòng)畫何時(shí)開始。舉例（

animation-delay）animation-delay:-2s;/*W3C和Opera*/-moz-animation-delay:-2s;/*Firefox*/-webkit-animation-delay:-2s;/*Safari和Chrome*/animation-delay允許負(fù)值，-2s使動(dòng)畫馬上開始，但跳過前2秒進(jìn)入動(dòng)畫?；菊Z法格式animation-delay:time;animation-iteration-count屬性定義動(dòng)畫的播放次數(shù)值描述n定義動(dòng)畫播放次數(shù)的數(shù)值。infinite規(guī)定動(dòng)畫應(yīng)該無限次播放。animation-iteration-count基本語法格式animation-iteration-count:n|infinite;animation-direction屬性定義是否應(yīng)該輪流反向播放動(dòng)畫。如果animation-direction值是"alternate"，則動(dòng)畫會(huì)在奇數(shù)次數(shù)（1、3、5等等）正常播放，而在偶數(shù)次數(shù)（2、4、6等等）向后播放。注釋：如果把動(dòng)畫設(shè)置為只播放一次，則該屬性沒有效果。舉例（

animation-direction）animation-direction基本語法格式animation-direction:normal|alternate;animation-play-state屬性定義動(dòng)畫的狀態(tài)。舉例（

animation-play-state）Running表示運(yùn)動(dòng)Paused表示暫停animation-play-state基本語法格式animation-play-state:running|paused;舉例（animation-fill-mode）animation-fill-mode屬性定義動(dòng)畫結(jié)束后的狀態(tài)，none無forwards動(dòng)畫結(jié)束（to里面的所有樣式）時(shí)的狀態(tài)backwards動(dòng)畫開始（from里面的所有樣式）時(shí)的狀態(tài)both動(dòng)畫開始或者結(jié)束時(shí)的狀態(tài)。animation-fill-mode基本語法格式animation-fill-mode:none|forwards|backwards|both;animation屬性是一個(gè)簡寫屬性，用于在一個(gè)屬性中設(shè)置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六個(gè)動(dòng)畫屬性。注意：使用animation屬性時(shí)必須指定animation-name和animation-duration屬性，否則持續(xù)的時(shí)間為0，并且永遠(yuǎn)不會(huì)播放動(dòng)畫。完成animation練習(xí)animation基本語法格式animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;隨堂練習(xí)（4）動(dòng)畫實(shí)現(xiàn)動(dòng)畫，方塊從左上角開始左→右→下→左，順時(shí)針方向移動(dòng)。同時(shí)背景色不斷變化，red→yellow→blue→green→red。方向示意：→↑

↓←演示示例：動(dòng)畫轉(zhuǎn)換5.4轉(zhuǎn)換（transform）屬性用于元素的2D或3D轉(zhuǎn)換，這個(gè)屬性允許用戶對元素進(jìn)行旋轉(zhuǎn)、縮放、平移、傾斜等。這些效果在CSS3之前都需要依賴Flash或JavaScript才能完成?，F(xiàn)在，使用純CSS3就可以實(shí)現(xiàn)這些變形效果，而無須加載額外的文件，這樣極大地提高了網(wǎng)頁開發(fā)者的工作效率，提高了頁面的執(zhí)行速度。轉(zhuǎn)換transform屬性允許對元素應(yīng)用2D轉(zhuǎn)換，常見2D轉(zhuǎn)換：2D轉(zhuǎn)換平移傾斜縮放旋轉(zhuǎn)transform屬性的默認(rèn)值為none，適用于內(nèi)聯(lián)元素和塊元素r，表示不進(jìn)行變形。transform：none|transform-functionstansform-functions用于設(shè)置變形函數(shù)，可以是一個(gè)或多個(gè)變形函數(shù)列表。基本語法格式2D轉(zhuǎn)換2D轉(zhuǎn)換函數(shù)名描述參數(shù)說明rotate(angel)旋轉(zhuǎn)元素angel是度數(shù)值，代表旋轉(zhuǎn)角度skew(x-angel,y-angel)傾斜元素angel是度數(shù)值，代表傾斜角度skewX(angel)沿著x軸傾斜元素skewY(angel)沿著y軸傾斜元素2D轉(zhuǎn)換的常用函數(shù)2D轉(zhuǎn)換函數(shù)名描述參數(shù)說明scale(x,y)縮放元素，改變元素的高度和寬度代表縮放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)scaleX(x)改變元素的寬度scaleY(y)改變元素的高度2D轉(zhuǎn)換的常用函數(shù)2D轉(zhuǎn)換2D轉(zhuǎn)換的常用函數(shù)函數(shù)名描述參數(shù)說明translate(x,y)移動(dòng)元素對象，基于x和y坐標(biāo)重新定位元素元素移動(dòng)的數(shù)值，x代表左右方向，y代表上下方向，向左和向上使用負(fù)數(shù)，反之用正數(shù)translateX(x)沿著x軸移動(dòng)元素translateY(y)沿著y軸移動(dòng)元素matrix(n,n,n,n,n,n)2D轉(zhuǎn)換矩陣使用六個(gè)值的表示變形，所有變形的本質(zhì)都是由矩陣完成的舉例使用translate()函數(shù)能夠重新定義元素的坐標(biāo)，實(shí)現(xiàn)平移的效果。該函數(shù)包含兩個(gè)參數(shù)，分別用于定義X軸和Y軸的坐標(biāo)。x-value是元素在水平方向上向右移動(dòng)的距離；y-value是元素在垂直方向上向下移動(dòng)的距離。如果省略了第二個(gè)參數(shù)，則取默認(rèn)值0。當(dāng)值為負(fù)數(shù)時(shí)，表示反方向移動(dòng)元素。平移基本語法格式transform:translate(x-value,y-value);

transform:translate(200px,100px);-ms-transform:translate(200px,100px);/*IE9*/-moz-transform:translate(200px,100px);/*Firefox*/-webkit-transform:translate(200px,100px);/*Safari和Chrome*/-o-transform:translate(200px,100px);/*Opera*/舉例平移舉例scale()函數(shù)用于縮放元素。該函數(shù)包含兩個(gè)參數(shù)，分別用來定義寬度和高度的縮放比例。x-axis和y-axis參數(shù)值可以是正數(shù)或負(fù)數(shù)。正數(shù)值表示基于指定的寬度和高度縮放元素；負(fù)數(shù)值是先翻轉(zhuǎn)元素，再縮放元素（如文字被翻轉(zhuǎn)）縮放基本語法格式transform:scale(x-axis,y-axis);transform:scale(0.9,-2);-ms-transform:scale(0.9,-2);/*IE9*/-moz-transform:scale(0.9,-2);/*Firefox*/-webkit-transform:scale(0.9,-2);/*Safari和Chrome*/-o-transform:scale(0.9,-2);/*Opera*/舉例縮放虛框是div的原始大小，利用scale()函數(shù)將div的長寬縮放為長0.9倍、寬2倍，-2實(shí)現(xiàn)div在Y軸翻轉(zhuǎn)，轉(zhuǎn)換為灰色的div。為了便于比較，設(shè)置灰色的div外邊距為100px。如圖所示，新的div變?yōu)閷挾?80px、高度200px的翻轉(zhuǎn)樣式舉例skew()函數(shù)能夠讓元素傾斜顯示。該函數(shù)包含兩個(gè)參數(shù)，分別用來定義X軸和Y軸坐標(biāo)傾斜的角度。skew()函數(shù)可以將一個(gè)對象圍繞著X軸和X軸按照一定的角度傾斜。參數(shù)x-angle表示相對于X軸傾斜的角度值；參數(shù)y-angle表示相對于Y軸傾斜的角度值。如果省略了第二個(gè)參數(shù)，則取默認(rèn)值0。傾斜基本語法格式transform:skew(x-angle,y-angle);舉例rotate()函數(shù)能夠旋轉(zhuǎn)指定的元素對象，主要在二維空間內(nèi)進(jìn)行操作參數(shù)angle表示要旋轉(zhuǎn)的角度值。如果角度為正數(shù)值，則按照順時(shí)針旋轉(zhuǎn)；否則，按照逆時(shí)針旋轉(zhuǎn)旋轉(zhuǎn)基本語法格式transform:rotate(angle);編程實(shí)現(xiàn)2D轉(zhuǎn)換，鼠標(biāo)放在方塊上，方塊旋轉(zhuǎn)一圈并縮小為原來的一半。演示示例：2D轉(zhuǎn)換隨堂練習(xí)（5）2D轉(zhuǎn)換<style>div{width:150px;height:150px;background-color:#eee;transition:all1s;}div:hover{transform:rotate(360deg)scale(0.5)}</style>設(shè)置盒子順時(shí)針旋轉(zhuǎn)360度，縮小一半的效果。STEP01定義<img>標(biāo)簽新建demo05.html文件，編寫HTML代碼。<imgsrc="./images/fengche.png">動(dòng)手實(shí)踐-風(fēng)車引入本地圖片<style>img{width:150px}@keyframesrotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

img:hover

{animation:

rotate

0.5s

linear

infinite}</style>定義<img>標(biāo)簽的樣式在demo05.html文件中，編寫CSS代碼。STEP02定義rotate動(dòng)畫讓圖片從0到100%順時(shí)針旋轉(zhuǎn)360度動(dòng)手實(shí)踐-風(fēng)車

先定一個(gè)小目標(biāo)！熟悉3D轉(zhuǎn)換，能夠定義3D旋轉(zhuǎn)、3D縮放、3D轉(zhuǎn)換元素的透視視圖等3D轉(zhuǎn)換3D變形是指某個(gè)元素圍繞指定的坐標(biāo)軸旋轉(zhuǎn)，如：3D轉(zhuǎn)換繞x軸旋轉(zhuǎn)繞y軸旋轉(zhuǎn)繞z軸旋轉(zhuǎn)3D轉(zhuǎn)換函數(shù)名描述參數(shù)說明rotate3d(x,y,z,angel)定義3D旋轉(zhuǎn)前三個(gè)值用于判斷需要旋轉(zhuǎn)的軸，旋轉(zhuǎn)軸的值設(shè)置為1，否則為0，angel代表元素旋轉(zhuǎn)的角度rotateX(angel)沿著x軸3D旋轉(zhuǎn)rotateY(angel)沿著y軸3D旋轉(zhuǎn)rotateZ(angel)沿著z軸3D旋轉(zhuǎn)3D轉(zhuǎn)換的常用函數(shù)3D轉(zhuǎn)換函數(shù)名描述參數(shù)說明scale3d(x,y,z)定義3D縮放代表縮放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)scaleX(x)沿著x軸縮放scaleY(y)沿著y軸縮放scaleZ(z)沿著z軸縮放3D轉(zhuǎn)換的常用函數(shù)3D轉(zhuǎn)換函數(shù)名描述參數(shù)說明translate3d(x,y,z)定義3D轉(zhuǎn)化元素移動(dòng)的數(shù)值translateX(x)僅用于x軸的值translateY(y)僅用于y軸的值translateY(z)僅用于z軸的值3D轉(zhuǎn)換的常用函數(shù)3D轉(zhuǎn)換函數(shù)名描述參數(shù)說明matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)3D轉(zhuǎn)換矩陣使用16個(gè)值的4x4矩陣，所有變形的本質(zhì)都是由矩陣完成的perspective(n)定義3D轉(zhuǎn)換元素的透視視圖一個(gè)代表透視深度的數(shù)值3D轉(zhuǎn)換的常用函數(shù)第6章響應(yīng)式設(shè)計(jì)與BootstrapWeb前端技術(shù)學(xué)習(xí)目標(biāo)/Target了解Bootstrap的概念掌握Bootstrap的下載和環(huán)境安裝掌握使用媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)的方法學(xué)習(xí)目標(biāo)/Target掌握Bootstrap表單、按鈕和其它組件的使用熟悉Bootstrap輔助樣式的使用掌握Bootstrap布局容器的使用章節(jié)概述/Summary在本章將會(huì)使用一個(gè)工具來讓響應(yīng)式變得容易實(shí)現(xiàn)，它就是Bootstrap。Bootstrap為大多數(shù)標(biāo)準(zhǔn)的UI設(shè)計(jì)場景提供了用戶友好、跨瀏覽器的解決方案，提高了前端開發(fā)的工作效率。本章將針對如何使用Bootstrap進(jìn)行響應(yīng)式Web設(shè)計(jì)進(jìn)行詳細(xì)講解。目錄/Contents030402Bootstrap框架概述Bootstrap的下載和環(huán)境安裝媒體查詢01響應(yīng)式設(shè)計(jì)概述目錄/Contents0607Bootstrap樣式Bootstrap常用組件08【項(xiàng)目】輪播圖/PC端登錄05Bootstrap布局容器響應(yīng)式設(shè)計(jì)概述6.1開發(fā)者在搭建網(wǎng)站時(shí)，需要兼顧電腦端和移動(dòng)端用戶。臺(tái)式機(jī)或筆記本電腦的顯示器寬度大于或等于1024px。處理方案：制作一個(gè)寬度固定為960px的頁面。弊端：移動(dòng)設(shè)備得到的是按比例縮小的屏幕，通過放大、縮小和左右滾動(dòng)才能完全瀏覽頁面。常用的響應(yīng)式布局框架：Bootstrap，foundation,MaterialDesignforBootstrap(MDB)…15個(gè)優(yōu)秀的響應(yīng)式CSS框架-騰訊云開發(fā)者社區(qū)-騰訊云()必要性響應(yīng)式網(wǎng)站設(shè)計(jì)是一種網(wǎng)絡(luò)頁面設(shè)計(jì)布局，其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對應(yīng)的布局。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSSmediaquery的使用等。定義視口，即viewport，是指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具欄、標(biāo)簽欄等區(qū)域，也就是網(wǎng)頁實(shí)際顯示的區(qū)域。問題：設(shè)備不同，如臺(tái)式機(jī)、平板電腦、手機(jī)方案：1024px對應(yīng)桌面768px對應(yīng)pad480px對應(yīng)手機(jī)問題：屏幕尺寸多種多樣方案：需要確定一個(gè)區(qū)間值，設(shè)計(jì)師需要尋找一個(gè)臨界點(diǎn)—即當(dāng)視覺效果開始不符合人們的審美或影響了內(nèi)容獲取時(shí)對應(yīng)的值，這個(gè)臨界點(diǎn)才是響應(yīng)式設(shè)計(jì)中的斷點(diǎn)。定義視口可以通過一個(gè)名稱為viewport的元（meta）標(biāo)簽來進(jìn)行控制，其基本規(guī)則如下：其中，視口設(shè)置中幾個(gè)常用關(guān)鍵詞的含義如下：width:控制viewport的大小，可以指定一個(gè)值或字符串“device-width”。device-width為設(shè)備的實(shí)際寬度。height:和width相對應(yīng)，指定高度。initial-scale:初始縮放比例。<metaname="viewport"content="width=device-width,initial-scale=1">視口響應(yīng)式網(wǎng)站要針對各種不同屏幕尺寸的設(shè)備進(jìn)行測試，大多數(shù)測試可以通過改變?yōu)g覽器窗口的大小來完成。也可以通過第三方插件和瀏覽器擴(kuò)展功能將瀏覽器窗口或視口設(shè)定為指定像素來測試。下圖所示網(wǎng)頁為例，當(dāng)瀏覽器寬度大于768像素時(shí)，網(wǎng)頁中菜單項(xiàng)完整顯示，圖片呈四列并排顯示。設(shè)計(jì)案例演示示例：設(shè)計(jì)案例當(dāng)瀏覽器寬度小于768像素時(shí)，菜單項(xiàng)被隱藏，顯示菜單圖標(biāo)。左圖所示，網(wǎng)頁布局中圖片呈兩列并排顯示。右圖為模擬手機(jī)端測試結(jié)果。設(shè)計(jì)案例媒體查詢6.2CSS3引入了媒體查詢。媒體查詢打破了獨(dú)立樣式表，通過一些條件查詢語句來確定目標(biāo)樣式，從而控制同一個(gè)頁面在不同尺寸的設(shè)備瀏覽器中呈現(xiàn)出與之適配的樣式，使瀏覽者在不同的設(shè)備下都能得到理想的體驗(yàn)。目前媒體查詢已經(jīng)被瀏覽器廣泛支持。媒體查詢1.媒介查詢的一般結(jié)構(gòu)：媒體查詢以@media開頭，利用and|not|only這些邏輯關(guān)鍵字把媒介類型和條件表達(dá)式串聯(lián)起來形成布爾表達(dá)式，判斷是否滿足當(dāng)前瀏覽器的運(yùn)行環(huán)境。如果滿足，則上面的styles部分的樣式就會(huì)起作用，進(jìn)而改變頁面元素的樣式，否則，頁面效果不產(chǎn)生任何變化。@mediamediatypeand|not|only(mediafeature){ CSS-Code;}媒體查詢2.環(huán)境參數(shù)媒體類型只能識(shí)別顯示設(shè)備的類型，還需要針對運(yùn)行設(shè)備監(jiān)測環(huán)境參數(shù)，比如長寬或分辨率等，下面列舉了一些常用的參數(shù)：max-width:定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾萴in-width:定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾萶rientation:設(shè)備的方向，portrait和landscape分別表示豎直和水平resolution:設(shè)備的分辨率，以dpi(DotsPerInch)或者dpcm(DotsPerCentimeter)表示媒體查詢3.條件表達(dá)式條件表達(dá)式用來判斷設(shè)備環(huán)境參數(shù)，從而確定相應(yīng)的顯示方法，例如：表示當(dāng)屏幕設(shè)備寬度小于960px時(shí)，屏幕設(shè)備的背景色將被設(shè)為紅色，其中and關(guān)鍵字用來指定當(dāng)某種設(shè)備類型的某種特性的值滿足某個(gè)條件時(shí)所使用的樣式。@mediascreenand(max-width:960px){ body{background-color:red;}}媒體查詢將下面示例的這段代碼插入到css文件的后面，會(huì)使頁面背景色在改變?yōu)g覽器窗口大小時(shí)發(fā)生改變。

@mediascreenand(max-width:960px){ body{background-color:red;} } @mediascreenand(max-width:768px){ body{background-color:orange;} } @mediascreenand(max-width:550px){ body{background-color:yellow;} } @mediascreenand(max-width:320px){ body{background-color:green;} }媒體查詢舉例（media-background-color.html）瀏覽該示例時(shí)，調(diào)整瀏覽器窗口寬度，頁面背景顏色就會(huì)根據(jù)當(dāng)前視口尺寸變化而變化。瀏覽器最大化時(shí)，如果寬度超過960px，背景為瀏覽器默認(rèn)色，一般為白色；嘗試更改視口寬度為768px到960px之間，背景變?yōu)榧t色；縮小視口寬度范圍550px到768px之間，背景為桔色；縮小視口寬度范圍550px到320px之間，背景為黃色，繼續(xù)縮小視口寬度范圍320px以內(nèi)，背景為綠色，如下圖所示：視口小于550px時(shí)背景黃色視口小于320px時(shí)背景綠色舉例（media-background-color.html）媒體查詢4.邏輯關(guān)鍵字（1）andand將多個(gè)媒體屬性連接成一條媒體查詢，只有當(dāng)每個(gè)屬性都為真時(shí)，結(jié)果才為真，等同邏輯運(yùn)算符中的“且”條件。（2）notnot用來對一條媒體查詢的結(jié)果進(jìn)行取反，等同邏輯運(yùn)算符中的“非”條件。上面代碼針對非手持且彩色設(shè)備應(yīng)用系列樣式。@medianothandheldand(color){…}媒體查詢（3）onlyonly僅在媒體查詢匹配成功的情況下被用于應(yīng)用一個(gè)樣式

當(dāng)視口寬在320px~350px范圍時(shí)，應(yīng)用系列樣式。

（4）逗號(hào)分隔列表邏輯媒體查詢中使用逗號(hào)分隔效果等同于or邏輯操作符。當(dāng)任何一個(gè)媒體查詢返回真，樣式就是有效的。逗號(hào)分隔的列表中每個(gè)查詢都是獨(dú)立的，一個(gè)查詢中的操作符并不影響其它的媒體查詢。這意味著逗號(hào)媒體查詢列表能夠作用于不同的媒體屬性、類型和狀態(tài)。@mediaonlyscreenand(min-width:320px)and(max-width:350px){…}媒體查詢例如，如果想在最小寬度為320px或是橫屏的手持設(shè)備上應(yīng)用樣式，代碼如下：其中，handheldand(orientation:landscape)橫屏手持設(shè)備，min-width:320px表示最小寬度值。如果是一個(gè)800像素寬的屏幕設(shè)備，媒體語句將會(huì)返回真，如果是500像素寬的橫屏手持設(shè)備，媒體查詢返回也會(huì)為真。@media(min-width:320px),handheldand(orientation:landscape){…}在媒體查詢中如果沒有明確指定MediaType，那么其默認(rèn)為all媒體查詢5.常用引用方式作為CSS的media屬性，其引用方式分為內(nèi)嵌方式和外聯(lián)方式。（1）內(nèi)嵌方式內(nèi)嵌方式是將媒介查詢的樣式和通用樣式寫在一起，比如我們要在寬度超過320px的情況下為鏈接加上下劃線，如下面代碼所示。注意：媒介查詢需要聲明在普通樣式后面，否則聲明將不會(huì)起作用。a{text-decoration:none;}@mediascreenand(min-width:320px){a{text-decoration:underline;}}媒體查詢（2）外聯(lián)方式CSS屬性外聯(lián)方式使用link標(biāo)記，帶有媒介查詢的外聯(lián)方式也不例外，如下面代碼所示。如果使用這種方式，那么在media-handheld.css中，我們就可以直接聲明CSS樣式了：外聯(lián)引入方式是源碼和屬性值分開寫，與內(nèi)嵌方式相比，代碼更加簡潔清晰。<linkhref="media-handheld.css"media="onlyscreenand(min-width:320px)"/>a{text-decoration:underline;}媒體查詢嘗試?yán)妹襟w查詢，結(jié)合本次動(dòng)手實(shí)驗(yàn)的素材，搭配合適的樣式屬性，設(shè)計(jì)出如下組圖片所示的簡易響應(yīng)式網(wǎng)頁。難點(diǎn)分析：正確使用媒體查詢參數(shù)與表達(dá)式。靈活運(yùn)用浮動(dòng)進(jìn)行網(wǎng)頁布局設(shè)計(jì)。隨堂練習(xí)（1）唐詩八首屏幕寬度在640px以內(nèi)的頁面效果屏幕寬度在960px以上的頁面效果屏幕寬度在640px~960之間的頁面效果演示示例：唐詩八首Bootstrap框架概述6.3Bootstrap來歷：它是由Twitter公司的設(shè)計(jì)師開發(fā)的一個(gè)前端開源框架，它于2011年8月在GitHub上發(fā)布。Bootstrap框架：它是基于HTML、CSS和JavaScript等前端技術(shù)實(shí)現(xiàn)的，它預(yù)定義了一套CSS樣式。Bootstrap框架應(yīng)用：我們只需提供固定的HTML結(jié)構(gòu)，并添加Bootstrap中提供的class名稱，即可達(dá)到指定的效果。課件中示例使用的是Bootstrap的4.6.x版本，目前最新版是5.3.0。6.3.1什么是BootstrapBootstrap框架中提供的內(nèi)容如下?；窘Y(jié)構(gòu)：Bootstrap提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。CSS：Bootstrap自帶全局的CSS設(shè)置、定義基本的HTML元素樣式、可擴(kuò)展的class，以及一個(gè)先進(jìn)的柵格系統(tǒng)。布局組件：創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框的組件等等。圖標(biāo)庫：開源的圖標(biāo)庫，格式為SVG，能夠輕松快捷地進(jìn)行縮放，并可以通過CSS設(shè)置樣式。JavaScript插件：例如，模態(tài)框（Model）插件、下拉菜單插件、滾動(dòng)監(jiān)聽插件等。定制：開發(fā)人員可以自由定制Bootstrap的組件、Sass變量和jQuery插件來得到一套自定義的版本，提高了開發(fā)的靈活性。6.3.1什么是BootstrapBootstrap的優(yōu)勢6.3.2Bootstrap的優(yōu)勢移動(dòng)設(shè)備優(yōu)先：移動(dòng)設(shè)備優(yōu)先的樣式貫穿于整個(gè)庫。瀏覽器支持：主流瀏覽器都支持Bootstrap。學(xué)習(xí)成本低，容易上手：具備HTML和CSS和JavaScript的基礎(chǔ)知識(shí)。響應(yīng)式設(shè)計(jì)：Bootstrap框架的柵格系統(tǒng)，能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)的屏幕大小。良好的代碼規(guī)范：Bootstrap為開發(fā)人員創(chuàng)建接口提供了一個(gè)簡潔統(tǒng)一的解決方案，減少了測試的工作量，使開發(fā)人員站在巨人的肩膀上，不重復(fù)造輪子。組件：Bootstrap包含了功能強(qiáng)大的內(nèi)置組件。Bootstrap的下載和環(huán)境安裝6.46.4.1Bootstrap的下載方式訪問Bootstrap的官方網(wǎng)站或者中文網(wǎng)站，單擊“Download”按鈕，進(jìn)入下載頁面。Bootstrap官網(wǎng)首頁進(jìn)入官網(wǎng)Bootstrap中文網(wǎng)V4版本首頁6.4.2下載Bootstrap預(yù)編譯文件Bootstrap中文網(wǎng)方式一：下載預(yù)編譯文件單擊下載6.4.2下載Bootstrap預(yù)編譯文件軟件包中的內(nèi)容解壓后6.4.2下載Bootstrap預(yù)編譯文件在HTML中引入預(yù)編譯的Bootstrap的核心CSS和JavaScript文件。<!--引入Bootstrap核心CSS文件--><linkrel="stylesheet"href="css/bootstrap.min.css"><!--JavaScript文件是可選的。從以下兩種建議中選擇一個(gè)即可！--><!--選項(xiàng)1：jQuery和Bootstrap集成包（集成了Popper）--><scriptsrc="js/jquery.slim.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script><!--選項(xiàng)2：Popper和Bootstrap的JS插件各自獨(dú)立--><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/popper.min.js"></script><scriptsrc="js/bootstrap.min.js"></script>因?yàn)锽ootstrap的一些插件需要用到JQuery的支持，因此我們也需要包含JQuery的相關(guān)內(nèi)容。CDN的全稱是ContentDeliveryNetwork，即內(nèi)容分發(fā)網(wǎng)絡(luò)。CDN是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺(tái)的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲(chǔ)和分發(fā)技術(shù)。Bootstrap中文網(wǎng)聯(lián)合國內(nèi)CDN服務(wù)商共同為Bootstrap專門構(gòu)建了免費(fèi)的CDN加速服務(wù)，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費(fèi)。BootstrapCDN還為大量的前端開源工具庫提供了CDN加速服務(wù)。直接在網(wǎng)頁中加入對CDN的引用即可。6.4.3使用CDN加載Bootstrap方式二：使用CDN6.4.3使用CDN加載Bootstrap方式二：使用CDN<!--Bootstrap4核心CSS文件--><linkrel="stylesheet"href="/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"crossorigin="anonymous"><!--Bootstrap4核心JavaScript文件--><scriptsrc="/npm/jquery@3.5.1/dist/jquery.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04"crossorigin="anonymous"></script>在使用CDN加載引用文件時(shí)，通常選擇帶有min的文件，這是因?yàn)閹в衜in的JavaScript和CSS文件是經(jīng)過壓縮之后的文件，體積比較小。6.4.3使用CDN加載Bootstrap小提示6.4.4建立第一個(gè)Bootstrap頁面1.添加HTML5DOCTYPEBootstrap要求使用HTML5文件類型，所以需要添加HTML5DOCTYPE聲明。如果在Bootstrap創(chuàng)建的網(wǎng)頁開頭不使用HTML5的文檔類型（DOCTYPE），可能會(huì)面臨一些瀏覽器顯示不一致的問題，或者一些特定情境下的不一致，導(dǎo)致代碼不能通過W3C標(biāo)準(zhǔn)的驗(yàn)證。<!DOCTYPEhtml><html>……</html>6.4.4建立第一個(gè)Bootstrap頁面2.移動(dòng)設(shè)備優(yōu)先為了讓Bootstrap開發(fā)的網(wǎng)站對移動(dòng)設(shè)備友好，確保適當(dāng)?shù)睦L制和觸屏縮放，需要在網(wǎng)頁的head之間添加viewportmeta標(biāo)簽，如下所示。其中，width屬性控制設(shè)備的寬度。當(dāng)網(wǎng)站被帶有不同屏幕分辨率的設(shè)備瀏覽，那么把它設(shè)置為device-width可以確保它能正確呈現(xiàn)在不同設(shè)備上。initial-scale=1.0確保網(wǎng)頁加載時(shí)，以1:1的比例呈現(xiàn)，不會(huì)有任何的縮放。<metaname="viewport"content="width=device-width,initial-scale=1">3.在頁面中引入編譯好的CSS和JavaScript文件<head><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于彈窗、提示、下拉菜單--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已編譯的插件--></head><body></body><scriptsrc="js/bootstrap.bundle.min.js"></script>6.4.4建立第一個(gè)Bootstrap頁面6.4.4建立第一個(gè)Bootstrap頁面4.容器類Bootstrap需要一個(gè)容器元素來包裹網(wǎng)站的內(nèi)容。我們可以使用以下兩個(gè)容器類：.container類用于固定寬度并支持響應(yīng)式布局的容器。.container-fluid類用于100%寬度，占據(jù)全部視口（viewport）的容器。例如：<divclass="container">...</div>演示示例：第一個(gè)Bootstrap頁面改變?yōu)g覽器窗口大小，我們會(huì)發(fā)現(xiàn)頁面顯示內(nèi)容隨窗口縮放發(fā)生了變化，以適應(yīng)不同瀏覽器視口尺寸。6.4.4建立第一個(gè)Bootstrap頁面

<!DOCTYPEhtml><html><head><title>第一個(gè)Bootstrap頁面</title><metacharset="utf-8">

<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于彈窗、提示、下拉菜單--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已編譯的插件--></head><body>演示示例：第一個(gè)Bootstrap頁面6.4.4建立第一個(gè)Bootstrap頁面<divclass="jumbotrontext-center"><h1>我的第一個(gè)Bootstrap頁面</h1><p>改變?yōu)g覽器大小查看效果!</p></div><divclass="container"><divclass="row"><divclass="col-sm-4"><h3>第一列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第二列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第三列</h3><p>bootstrap</p></div></div></div></body></html>演示示例：第一個(gè)Bootstrap頁面如何提高頁面的加載速度：在HTML代碼的末尾處引入JavaScript文件。Bootstrap的JavaScript插件依賴于jQuery，因此在加載這些插件前需要先行去加載jQuery。JavaScript文件的加載順序依次為jquery-3.5.1.slim.min.js、bootstrap.bundle.min.js。其中，jquery-3.5.1.slim.min.js是Bootstrap4官網(wǎng)使用的簡化版的jQuery文件，相比普通版本缺少了Ajax和特效模塊。6.4.4在HTML中引入Bootstrap小提示Bootstrap布局容器6.56.5.1初識(shí)布局容器布局容器：是Bootstrap中最基本的布局元素，在使用默認(rèn)網(wǎng)格系統(tǒng)時(shí)，布局容器是必需的。作用：它用于容納、填充一些內(nèi)容，以及有時(shí)需要使內(nèi)容居中。布局容器包含：.container類和.container-?uid類。在前面講解的內(nèi)容中，媒體查詢需要使用@media關(guān)鍵字檢測設(shè)備的寬度變化。在Bootstrap中，我們不需要編寫媒體查詢的代碼，而是使用一些內(nèi)置的類名，用來檢測不同的設(shè)備的寬度。6.5.1初識(shí)布局容器.container類和.container-?uid類布局容器區(qū)別：這兩種容器類最大的不同之處在于寬度的設(shè)定。.container類可以根據(jù)屏幕寬度的不同，利用媒體查詢設(shè)定固定的寬度，當(dāng)瀏覽器窗口大小改變時(shí)，頁面效果也會(huì)隨之發(fā)生改變。.container-?uid類在不同設(shè)備下始終保持寬度為100%，如果一個(gè)元素需要占據(jù)全部視口時(shí)可以使用.container-?uid類。1它在每個(gè)響應(yīng)斷點(diǎn)處設(shè)置了一個(gè)max-width最大寬度.container容器2它在每個(gè)響應(yīng)斷點(diǎn)處設(shè)置布局容器的寬度為100%.container-fluid容器STEP016.5.1初識(shí)布局容器.container類和.container-fluid類在不同設(shè)備寬度下頁面元素的顯示效果新建demo01.html文件，編寫HTML代碼。<!DOCTYPE

html><html><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0,shrink-to-fit=no">

<link

rel="stylesheet“

href="css/bootstrap.min.css">

<title>布局容器</title></head><body>

<div

class="container-fluid

bg-dark

text-light

mb-1">.container-fluid設(shè)置布局容器</div>

<div

class="container

bg-dark

text-light">.container設(shè)置布局容器</div></body></html>布局容器STEP02運(yùn)行程序在瀏覽器中查看demo01.html文件運(yùn)行效果。6.5.1初識(shí)布局容器演示示例：布局容器

先定一個(gè)小目標(biāo)！了解柵格系統(tǒng)，能夠說出柵格系統(tǒng)的作用，能夠列舉柵格系統(tǒng)的類前綴6.5.2柵格系統(tǒng)6.5.2柵格系統(tǒng)柵格系統(tǒng)：是一個(gè)基于12列的布局，它具有的5種響應(yīng)尺寸分別對應(yīng)不同的屏幕大小。柵格系統(tǒng)作用：通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局。建議：開發(fā)者可以將內(nèi)容放入這些創(chuàng)建好的布局中，并且會(huì)根據(jù)父元素盒子（布局容器）尺寸的大小進(jìn)行適當(dāng)?shù)卣{(diào)節(jié)，從而達(dá)到響應(yīng)式頁面布局的效果。響應(yīng)式柵格系統(tǒng)例如，在小屏幕設(shè)備上有某些模塊將按照不同的方式排列或者被隱藏。柵格系統(tǒng)基本使用步驟柵格系統(tǒng)基本使用步驟：Bootstrap柵格系統(tǒng)為不同屏幕寬度定義了不同的類，使用非常方便，直接為元素添加類名即可。行使用樣式

.row，列使用樣式

.col-*-*，可用于快速創(chuàng)建網(wǎng)格布局。每一行（row）必須包含在布局容器.container類或.container-?uid類中，這樣方便為其自動(dòng)設(shè)置外邊距（margin）和內(nèi)邊距（padding）。通過行可以創(chuàng)建水平方向的列組，并且只有列（column）可以作為行（row）的直接子元素。例如，可以使用3個(gè).col-xs-4來創(chuàng)建3個(gè)等寬的列。內(nèi)容只能放置于列內(nèi)，列大于12時(shí)，將會(huì)另起一行排列。6.5.3柵格基本使用網(wǎng)格系統(tǒng)通過指定橫跨的12個(gè)可用的列來創(chuàng)建，例如：要?jiǎng)?chuàng)建三個(gè)相等的列，則可使用三個(gè).col-*-4。我們也可以根據(jù)自己的需要，定義列數(shù)，如下所示：1111111111114444866126.5.3柵格基本使用6.5.2柵格系統(tǒng)超小屏幕(<576px)小屏幕(≥576px)中等屏幕(≥768px)大屏幕(≥992px)超大屏幕(≥1200px).container最大容器寬度自動(dòng)（100%）540px720px960px1140px類前綴.col-.col-sm-.col-md-.col-lg-.col-xl-柵格系統(tǒng)的類前綴柵格系統(tǒng)提供了基本的前綴，用于在不同寬度的屏幕中實(shí)現(xiàn)不同的排列方式，列的類名可以寫多個(gè)，也就是可以同時(shí)設(shè)置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*類名。當(dāng)同時(shí)使用這些類的時(shí)候，它會(huì)根據(jù)當(dāng)前屏幕的大小來使相應(yīng)的類生效，實(shí)現(xiàn)在不同屏幕下展示不同的頁面結(jié)構(gòu)。通過類前綴設(shè)置每列的寬度6.5.3柵格基本使用col-柵格的數(shù)量(設(shè)置超小設(shè)備);col-sm-柵格的數(shù)量(設(shè)置平板);col-md-柵格的數(shù)量(設(shè)置桌面顯示器);col-lg-柵格的數(shù)量(設(shè)置大桌面顯示器);col-xl-柵格的數(shù)量(設(shè)置超大桌面顯示器);由于柵格系統(tǒng)就是默認(rèn)將父元素分成12等份，所以可根據(jù)占據(jù)的份數(shù)來設(shè)置子元素的寬度，在設(shè)置列的寬度時(shí)，只需要在不同的類前綴后面加上柵格數(shù)量即可。如何利用上面的類來控制列的寬度以及在不同設(shè)備上的顯示呢？我們來看先創(chuàng)建一行（<d