HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：使用Bootstrap和JS插件組件制作網(wǎng)頁(yè)內(nèi)容

HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作使用Bootstrap開(kāi)源框架快速搭建響應(yīng)式網(wǎng)頁(yè)能夠使用Bootstrap的縮略圖、巨幕、表單、表格等相關(guān)組件，完成D清單頁(yè)面元素的制作；測(cè)試D清單頁(yè)面響應(yīng)式效果，完善頁(yè)面細(xì)節(jié)。任務(wù)目標(biāo)

使用Bootstrap和JS插件組件制作網(wǎng)頁(yè)內(nèi)容本次任務(wù)要求在完成導(dǎo)航條制作的基礎(chǔ)上，繼續(xù)完成網(wǎng)頁(yè)內(nèi)容的制作。完成后的效果圖如圖2-4所示。任務(wù)描述圖2-4完成后的移動(dòng)端和電腦端頁(yè)面測(cè)試效果圖

使用Bootstrap和JS插件組件制作網(wǎng)頁(yè)內(nèi)容在上一任務(wù)完成效果的基礎(chǔ)上，完成D清單網(wǎng)頁(yè)各個(gè)欄目?jī)?nèi)容的制作。需要：學(xué)習(xí)Bootstrap的縮略圖、巨幕、表單、表格等相關(guān)組件；學(xué)習(xí)Bootstrap的輪播和模態(tài)框（彈出框）等相關(guān)JavaScript插件；綜合運(yùn)用Bootstrap相關(guān)組件，完成D清單頁(yè)面的制作并測(cè)試完成效果。任務(wù)分析

使用Bootstrap和JS插件組件制作網(wǎng)頁(yè)內(nèi)容知識(shí)與技能準(zhǔn)備如果你把我們要完成的網(wǎng)頁(yè)與Bootstrap的組件效果進(jìn)行對(duì)比，你會(huì)發(fā)現(xiàn)，為完成接下來(lái)的任務(wù)，我們需要學(xué)習(xí)如下Bootstrap知識(shí)：知識(shí)與技能準(zhǔn)備1、縮略圖組件Bootstrap的縮略圖是利用Bootstrap的刪格系統(tǒng)的一個(gè)圖片應(yīng)用場(chǎng)景，僅需要最少的標(biāo)簽就能展示帶鏈接的圖片。1.1圖片Bootstrap縮略圖默認(rèn)樣式如下圖：要實(shí)現(xiàn)上圖效果，可以參考代碼如下：圖2-4-1默認(rèn)縮略圖12345678<divclass="row"><divclass="col-xs-6col-md-3"><ahref="#"class="thumbnail"><imgsrc="..."alt="..."></a></div><!--此處重復(fù)4個(gè)col-xs-6col-md-3類的div--></div>知識(shí)與技能準(zhǔn)備1、縮略圖組件通過(guò)分析上述代碼，我們知道縮略圖因?yàn)閼?yīng)用了Bootstrap的刪格系統(tǒng)，所以是支持響應(yīng)式的，能夠在平板端只顯示2欄圖片，在手機(jī)端顯示1欄圖片，電腦及寬屏端顯示4欄圖片。Bootstrap對(duì)thumbnail類定義了如下樣式：該樣式代碼設(shè)置了圖片的邊框和對(duì)齊方式等格式，并設(shè)置了響應(yīng)式圖片。123456789101112.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1pxsolid#ddd;border-radius:4px;-webkit-transition:border.2sease-in-out;-o-transition:border.2sease-in-out;transition:border.2sease-in-out;}.thumbnail>img,.thumbnaila>img{display:block;max-width:100%;height:auto;margin-right:auto;margin-left:auto;}知識(shí)與技能準(zhǔn)備1、縮略圖組件1.2自定義縮略圖通過(guò)組合圖片、標(biāo)題、段落和按鈕，我們就可以實(shí)現(xiàn)比較常見(jiàn)的網(wǎng)頁(yè)布局形式了，如下圖：圖2-4-2自定義縮略圖知識(shí)與技能準(zhǔn)備1、縮略圖組件要實(shí)現(xiàn)上圖效果，可以參考代碼如下：圖2-4-2自定義縮略圖12345678910111213141516<divclass="row"><divclass="col-sm-6col-md-4"><divclass="thumbnail"><imgsrc="..."alt="..."><divclass="caption"><h3>Thumbnaillabel</h3><p>...</p><p><ahref="#"class="btnbtn-primary"role="button">Button</a><ahref="#"class="btnbtn-default"role="button">Button</a></p></div></div></div><!--此處重復(fù)2個(gè)col-sm-6col-md-4類的div--></div>效果圖如下：（1）分析：通過(guò)效果圖，我們可以做到，可以利用Bootstrap的自定義縮略圖來(lái)實(shí)現(xiàn)。在任務(wù)2的學(xué)習(xí)中，我們知道，row類是要與布局容器.container或.container-fluid結(jié)合使用才可以避免不對(duì)稱邊界的產(chǎn)生。另外，為了縮略圖圖片的排版美觀和適應(yīng)響應(yīng)式圖片寬度的變化，圖片應(yīng)該是等高和等寬的。課堂練習(xí)2-4-1使用Bootstrap縮略圖，完成某卡車網(wǎng)站縮略圖的效果圖制作圖2-4-3課堂練習(xí)2-4-1效果圖知識(shí)與技能準(zhǔn)備2、巨幕組件Bootstrap的巨幕是一個(gè)輕量的靈活組件，可以利用這個(gè)組件實(shí)現(xiàn)以布滿整個(gè)瀏覽器橫向視口的方式來(lái)展現(xiàn)重要關(guān)鍵內(nèi)容。參考代碼如下：圖2-4-4巨幕效果圖123456<divclass="jumbotron"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"href="#"role="button">Learnmore</a></p></div>知識(shí)與技能準(zhǔn)備2、巨幕組件如果不需要圓角，寬度與瀏覽器寬度一致，則可以把此組件放在所有.container元素（.container類用于固定寬度并支持響應(yīng)式布局的容器，詳見(jiàn)任務(wù)2）的外面，并在組件內(nèi)部添加一個(gè).container元素。12345678<divclass="jumbotron"><divclass="container"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"href="#"role="button">Learnmore</a></p></div></div>使用Bootstrap巨幕組件完成如下效果圖的制作。（1）分析：效果圖與Bootstrap默認(rèn)巨幕組件的區(qū)別在于添加了背景圖片，文本是居中的，文字的顏色也有變化，所以我們只需要使用不需要圓角的巨幕組件，并對(duì)樣式稍作修改即可。課堂練習(xí)2-4-2使用Bootstrap巨幕組件，完成某卡車網(wǎng)站巨幕效果圖的制作圖2-4-5課堂練習(xí)2-4-2巨幕效果圖知識(shí)與技能準(zhǔn)備3、表格Bootstrap的表格內(nèi)容屬于全局CSS樣式，Bootstrap表格基礎(chǔ)式樣只是為表格增加了少量的內(nèi)補(bǔ)（padding）和水平方向的分割線，效果如下圖：要實(shí)現(xiàn)上述效果，是需要在<table>標(biāo)簽中添加.table類：123<tableclass=”table”><!--此處表格代碼省略--><table>圖2-4-6表格效果圖知識(shí)與技能準(zhǔn)備4、表單Bootstrap對(duì)所用的表單控件都編寫(xiě)了全局樣式。所有設(shè)置了.form-control類的<input>、<textarea>和<select>元素都將被默認(rèn)設(shè)置寬度屬性為width:100%；將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列。效果如下圖：圖2-4-7表單效果圖知識(shí)與技能準(zhǔn)備4、表單Bootstrap還設(shè)置了水平排列的表單，通過(guò)為<form>添加.form-horizontal類，并結(jié)合Bootstrap刪格系統(tǒng)，就可以實(shí)現(xiàn)label與表單控件水平排列的布局。添加了.form-horizontal后會(huì)對(duì).form-group類進(jìn)行了修改，使其擁有.row類的格式，使用在使用時(shí)就可以實(shí)現(xiàn)獨(dú)立行顯示即.row的效果。效果如下：圖2-4-8水平排列表單效果圖知識(shí)與技能準(zhǔn)備5、使用FontAwesome字體圖標(biāo)是否發(fā)現(xiàn)，雖然GlyphiconHalflings免費(fèi)為Bootstrap提供了250多個(gè)Glyphicons字體圖標(biāo)，但即便如此，有時(shí)候也有一些圖標(biāo)是你非常想用的卻沒(méi)有的，如我們版權(quán)中的分享圖標(biāo)，專業(yè)介紹的電腦圖標(biāo)等等。除了Bootstrap中已有的250多個(gè)Glyphicons字體圖標(biāo)，在網(wǎng)頁(yè)設(shè)計(jì)制作中，還可以通過(guò)其他途徑獲取更多的字體圖標(biāo)應(yīng)用到網(wǎng)頁(yè)中。FontAwesome就是一個(gè)較為常用的免費(fèi)開(kāi)源的字體圖標(biāo)庫(kù)，其中文版地址為

，共提供了675個(gè)圖標(biāo)。FontAwesome最初為Bootstrap而設(shè)計(jì)，現(xiàn)已適用于所有框架，兼容性良好。FontAwesome可以采用CDN加速的方式進(jìn)行部署而不需要下載，也可以下載后復(fù)制font-awesome目錄到自己的項(xiàng)目中，分別將字體文件放在根目錄，css文件放在在css文件夾，然后在<head>處加載font-awesome.min.css，通過(guò)<link>引入到網(wǎng)頁(yè)后就可以使用了。知識(shí)與技能準(zhǔn)備5、使用FontAwesome字體圖標(biāo)例如，本任務(wù)中使用了品牌圖片的方式來(lái)制作導(dǎo)航條的logo，實(shí)際上也可以利用font-awesome來(lái)制作：123<aclass="navbar-brand"href="#"><iclass="fafa-camera-retrofa-4x"></i>D清單</a>任務(wù)實(shí)施在任務(wù)2中，我們已經(jīng)對(duì)整個(gè)頁(yè)面進(jìn)行了布局，在任務(wù)3中，我們已經(jīng)完成了導(dǎo)航條的制作，接下來(lái)我們將完成剩下的內(nèi)容。通過(guò)觀察頁(yè)面效果圖，我們可以做如下分析：（1）“關(guān)于”廣告部分可以使用巨幕組件完成；（2）“高級(jí)會(huì)員”區(qū)域是左右布局，用到了表格；（3）“下載應(yīng)用”欄目如果我們把圖標(biāo)看做圖片的話，其都應(yīng)用了Bootstrap的縮略圖組件；（4）在“聯(lián)系我們”模塊用到了表單組件。另外，我們可以可以給導(dǎo)航條加入滾動(dòng)監(jiān)聽(tīng)效果，方便用戶瀏覽。通過(guò)對(duì)比Glyphicons字體圖標(biāo)、FontAwesome字體圖標(biāo)和頁(yè)面效果圖，為了達(dá)到比較好的效果，我們引入FontAwesome字體圖標(biāo)來(lái)完成本次任務(wù)。為此，我們可以按照如下順序來(lái)完成此任務(wù)：1、關(guān)于圖2-4-10關(guān)于部分的效果圖任務(wù)實(shí)施2、特征特征模塊的布局我們已經(jīng)在前面的任務(wù)中完成了，這里涉及到3個(gè)內(nèi)容：（1）標(biāo)題部分，涉及到下劃線，我們可以使用Bootstrap提供的頁(yè)頭組件來(lái)完成，主要樣式是“header”。頁(yè)頭組件能夠?yàn)閔1標(biāo)簽增加適當(dāng)?shù)目臻g，并且與頁(yè)面的其他部分形成一定的分隔。它支持h1標(biāo)簽內(nèi)內(nèi)嵌small元素的默認(rèn)效果，還支持大部分其他組件。（2）圖片部分，雖然Bootstrap已經(jīng)為圖片進(jìn)行了響應(yīng)式設(shè)計(jì)，但是針對(duì)左右結(jié)構(gòu)的圖片情況，還是要寫(xiě)一下圖片寬度為100%。（3）圖標(biāo)字體和文本部分，圖標(biāo)字體可以使用Bootstrap提供的圖標(biāo)字體組件。另外為了與設(shè)計(jì)稿一致，可以重新設(shè)計(jì)標(biāo)題文本樣式。圖2-4-10關(guān)于部分的效果圖任務(wù)實(shí)施3、下載下載部分包括“頁(yè)頭”組件和“縮略圖”組件上下兩部分?？s略圖組件部分使用到了FontAwesome字體圖標(biāo)。CSS樣式主要是在Bootstrap的基礎(chǔ)上增加背景和修改文字顏色，以及圖標(biāo)字體的相關(guān)屬性。圖2-4-12下載模塊效果圖任務(wù)實(shí)施4、高級(jí)會(huì)員下載部分包括“頁(yè)頭”組件和“表格”組件。CSS樣式主要是在Bootstrap的基礎(chǔ)上增加背