HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁本項(xiàng)目通過使用Bootstrap開源框架完成D清單網(wǎng)頁的宣傳單頁的制作來學(xué)習(xí)Bootstrap前端開源框架。Bootstrap一種可以高效完成頁面制作的前端開源工具，雖然它會(huì)在一定程度上限制網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)，但其移動(dòng)優(yōu)先的響應(yīng)式設(shè)計(jì)框架可以大幅提高制作效率，為設(shè)計(jì)者節(jié)省大量的時(shí)間。項(xiàng)目目標(biāo)項(xiàng)目情境與項(xiàng)目1一致，唯一的區(qū)別是要求你在當(dāng)天就要完成并上線。由于時(shí)間緊迫，公司明確可以使用Bootstrap等免費(fèi)的前端開源框架輔助開發(fā)。D清單頁面效果圖可查看項(xiàng)目1的項(xiàng)目情境。項(xiàng)目情境網(wǎng)頁制作的一般流程如下：項(xiàng)目開發(fā)的基本流程都是一致的。在本次項(xiàng)目中，你唯一不同的是使用了Bootstrap框架作為網(wǎng)頁開發(fā)的技術(shù)，以達(dá)到快速開發(fā)的目的。與前面的開發(fā)不一樣的是，HTML標(biāo)簽（網(wǎng)頁內(nèi)容）和CSS樣式設(shè)置是同步進(jìn)行的。其實(shí)在實(shí)際的開發(fā)中，兩種開發(fā)流程互有優(yōu)劣，你可以選擇你需要的方式進(jìn)行。為避免知識(shí)的重復(fù)講解，分析需求和選用并配置開發(fā)環(huán)境在本項(xiàng)目中默認(rèn)你已經(jīng)完成了。我們將直接從學(xué)習(xí)并使用Bootstrap開始，逐步完成D清單網(wǎng)頁的制作！項(xiàng)目分析項(xiàng)目發(fā)布需求分析規(guī)劃設(shè)計(jì)實(shí)施測試交付根據(jù)“移動(dòng)優(yōu)先”原則，我們需要制定項(xiàng)目完成的計(jì)劃：項(xiàng)目分析時(shí)間段1時(shí)間段2時(shí)間段3時(shí)間段4時(shí)間段5分析規(guī)劃實(shí)施階段1移動(dòng)端內(nèi)容制作階段2移動(dòng)端格式制作階段3響應(yīng)式制作測試與交付D清單前端開發(fā)甘特圖時(shí)間進(jìn)度任務(wù)能夠在學(xué)習(xí)Bootstrap幫助文檔的基礎(chǔ)上，下載Bootstrap文件并配置Bootstrap開發(fā)環(huán)境能夠編寫基本的Bootstrap模板頁面，為D清單頁面后續(xù)開發(fā)做準(zhǔn)備。任務(wù)目標(biāo)任務(wù)1配置Bootstrap開發(fā)環(huán)境本次任務(wù)要求通過學(xué)習(xí)Bootstrap的文檔和模板知識(shí)，下載并配置用于生產(chǎn)環(huán)境的Bootstrap，并編寫B(tài)ootstrap模板，為后續(xù)的開發(fā)做準(zhǔn)備。任務(wù)描述圖2-1Bootstrap開發(fā)環(huán)境配置后的模板代碼和測試頁面任務(wù)1配置Bootstrap開發(fā)環(huán)境任務(wù)要求下載并配置好用于生產(chǎn)環(huán)境的Bootstrap文件，編寫B(tài)ootstrap模板并進(jìn)行測試，需要：學(xué)習(xí)Bootstrap的由來和作用；學(xué)習(xí)Bootstrap的文檔結(jié)構(gòu)和模板知識(shí)；下載Bootstrap文檔；編寫模板頁面，同時(shí)使用該頁面測試配置效果。任務(wù)分析任務(wù)1配置Bootstrap開發(fā)環(huán)境知識(shí)與技能準(zhǔn)備Bootstrap是由Twitter工程師推出的前端開發(fā)框架，是一款強(qiáng)大的開源前端開發(fā)工具包，具有強(qiáng)大的自定義功能，Bootstrap一經(jīng)推出大受歡迎，國內(nèi)也有不少網(wǎng)站開始使用Bootstrap開發(fā)。Bootstrap全部托管于Github（一個(gè)代碼托管平臺(tái)和開發(fā)者社區(qū)，開發(fā)者可以在Github上創(chuàng)建自己的開源項(xiàng)目并與其他開發(fā)者協(xié)作編碼。創(chuàng)業(yè)公司可以用它來托管軟件項(xiàng)目。開源項(xiàng)目可以免費(fèi)托管，私有項(xiàng)目需付費(fèi)），用戶可以直接訪問Github項(xiàng)目。Bootstrap在Github托管地地址：

。知識(shí)與技能準(zhǔn)備1、認(rèn)識(shí)BootstrapBootstrap是為所有開發(fā)者、所有應(yīng)用場景而設(shè)計(jì)的。Bootstrap讓前端開發(fā)更快速、簡單。所有開發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用。Bootstrap包括如下特點(diǎn)：1.1預(yù)處理腳本雖然可以直接使用Bootstrap提供的CSS樣式表，但是Bootstrap的源碼是基于最流行的CSS預(yù)處理腳本Less（Less是一門預(yù)處理語言，支持變量、mixin、函數(shù)等額外功能，本書不涉及此知識(shí)）和Sass開發(fā)的。你可以采用預(yù)編譯的CSS文件快速開發(fā)，也可以從源碼定制自己需要的樣式。1.2一個(gè)框架、多種設(shè)備通過Bootstrap已經(jīng)寫好的CSS媒體查詢（MediaQuery）樣式，所有的網(wǎng)站和應(yīng)用都能在Bootstrap的幫助下通過同一份代碼快速、有效適配手機(jī)、平板、PC設(shè)備。1.3特性齊全Bootstrap提供了全面、美觀的文檔。你能找到關(guān)于HTML元素、HTML和CSS組件、jQuery插件方面的所有詳細(xì)英文文檔（網(wǎng)址

）。由于語言的關(guān)系，可以查閱Bootstrap中文網(wǎng)（非官網(wǎng)）的V3版本幫助文檔（

）來詳細(xì)了解，我們?cè)诤罄^的學(xué)習(xí)中會(huì)基于這個(gè)版本來開展。知識(shí)與技能準(zhǔn)備2、Bootstrap文件Bootstrap提供以下幾種方式幫助我們快速上手，每一種方式針對(duì)具有不同技能等級(jí)的開發(fā)者和不同的使用場景。2.1用于生產(chǎn)環(huán)境的Bootstrap用于生產(chǎn)環(huán)境的Bootstrap是編譯好并壓縮后的CSS、JavaScript和字體文件，不包含文檔和源碼文件。下載Bootstrap文件壓縮包之后，將其解壓縮后查看bootstrap文件夾，即可看到以下目錄結(jié)構(gòu)如右圖所示：知識(shí)與技能準(zhǔn)備2、Bootstrap文件上面展示的就是Bootstrap用于生產(chǎn)環(huán)境的基本文件結(jié)構(gòu)，預(yù)編譯文件可以直接使用到任何web項(xiàng)目中。生產(chǎn)環(huán)境的Bootstrap提供了：編譯好的CSS和JS(bootstrap.*)文件；經(jīng)過壓縮的CSS和JS(bootstrap.min.*)文件；CSS源碼映射表(bootstrap.*.map)，可以在某些瀏覽器的開發(fā)工具中使用；含了來自Glyphicons的圖標(biāo)字體。2.2Bootstrap源碼和Sass項(xiàng)目Bootstrap源碼包括Less、JavaScript和字體文件的源碼，并且?guī)в形臋n。使用時(shí)需要Less編譯器和并做一些設(shè)置工作。Sass項(xiàng)目是Bootstrap從Less到Sass的源碼移植項(xiàng)目，用于快速地在Rails、Compass或只針對(duì)Sass的項(xiàng)目中引入。上述內(nèi)容超出了本項(xiàng)目的內(nèi)容范圍，故在此不做詳細(xì)敘述。（1）分析要下載Bootstrap文檔，最可靠的莫過于在GitHub上下載?？梢栽?/p>

（可下載任意版本）或者

（提供了直觀的web文檔）?？紤]到語言的關(guān)系，也可以在非官方授權(quán)的Bootstrap中文網(wǎng)（

）下載。（2）參考步驟如下：打開Bootstrap中文網(wǎng)（網(wǎng)址

，也可直接進(jìn)入Bootstrap3中文文檔(v3)，網(wǎng)址

），單擊“Bootstrap3中文文檔(v3.3.7)”（注：版本會(huì)持續(xù)更新）按鈕，進(jìn)入Bootstrap3中文文檔(v3.3.7)頁面，單擊“下載Bootstrap”按鈕，跳轉(zhuǎn)到下載頁面（如圖2-1-1）。課堂練習(xí)2-1-1下載用于生產(chǎn)環(huán)境的Bootstrap單擊“用于生產(chǎn)環(huán)境的Bootstrap”下方的“下載Bootstrap”按鈕，在彈出的打開對(duì)話框中（如圖2-1-2），選擇“保存文件”，并通過“瀏覽”按鈕選擇保存路徑，單擊“確定”按鈕，完成Bootstrap文件的下載。將下載的“bootstrap-3.3.7-dist.zip”文件解壓，在解壓的“dist”文件夾下有css、js、fonts文件夾，在文件夾中即可看到上文提到的目錄結(jié)構(gòu)中的文件。課堂練習(xí)2-1-1下載用于生產(chǎn)環(huán)境的Bootstrap圖2-1-1Bootstrap下載頁面圖2-1-2打開文件對(duì)話框知識(shí)與技能準(zhǔn)備3、Bootstrap模板Bootstrap模板是指使用Bootstrap框架的通用頁面，其有基礎(chǔ)的html代碼，并在此基礎(chǔ)上關(guān)聯(lián)好了Bootstrap的CSS、JavaScript文件。任務(wù)實(shí)施本次的任務(wù)主要是完成開發(fā)工作環(huán)境的部署，由于項(xiàng)目1中已經(jīng)學(xué)習(xí)了開發(fā)環(huán)境的開發(fā)工具部署，所以這里就只考慮怎樣部署B(yǎng)ootstrap了。1、下載Bootstrap文件在課堂練習(xí)2-1-1中你已經(jīng)下載好了，這里就不在敘述。2、創(chuàng)建首頁，并引用Bootstrap文件（1）在你的盤符（如D盤）新建文件夾，命名為“web_bootstrap”，將下載并解壓好的“dist”文件夾下的3個(gè)文件夾（包括css、fonts、js中的所有文件）復(fù)制到此。（2）用VisualStudioCode軟件打開上面創(chuàng)建的文件夾，并在文件夾根目錄新建一個(gè)網(wǎng)頁，命名為“index.html”。（3）在頁面中輸入如下代碼，完成一個(gè)基本的HTML5頁的編寫。（4）在頁面中添加IE兼容性設(shè)置（5）在頁面中引入Bootstrap的CSS文件和JS文件（6）至此，Bootstrap的首頁創(chuàng)建完成。前面我們介紹了怎么下載和使用用于生產(chǎn)環(huán)境的Bootsrap，也提到了Bootstrap源碼和Sass項(xiàng)目。請(qǐng)網(wǎng)上了解Bootstrap、Less和Sass的補(bǔ)充知識(shí)。任務(wù)拓展任務(wù)1配置Bootstrap開發(fā)環(huán)境HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠使用Bootstrap的刪格系統(tǒng)完成頁面的流式布局；能夠根據(jù)網(wǎng)頁元素選擇合適的刪格系統(tǒng)樣式以響應(yīng)不同視口；能夠使用Bootstrap對(duì)D清單頁面進(jìn)行響應(yīng)式頁面布局。任務(wù)目標(biāo)任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局D清單頁面本次任務(wù)要求通過學(xué)習(xí)Bootstrap的刪格系統(tǒng)知識(shí)和流式布局知識(shí)，完成D清單頁面的整體布局。完成后的頁面測試效果圖如2-2所示。任務(wù)描述任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局頁面圖2-2移動(dòng)端和電腦端布局測試頁面截圖在學(xué)習(xí)以下知識(shí)技能的基礎(chǔ)上，完成頁面布局框架代碼的編寫，并對(duì)布局結(jié)果進(jìn)行測試。需要：Bootstrap的刪格系統(tǒng)知識(shí)；Bootstrap的布局容器、行和列等相關(guān)知識(shí)。根據(jù)D清單頁面效果圖使用Bootstrap完成頁面布局，并測試移動(dòng)端和電腦端的布局效果。任務(wù)分析任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局頁面知識(shí)與技能準(zhǔn)備Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列，即Bootstrap將頁面的每一行劃分為12列的方式進(jìn)行頁面布局。知識(shí)與技能準(zhǔn)備1、刪格系統(tǒng)Bootstrap的刪格參數(shù)如下表：表2-2-1Bootstrap刪格參數(shù)表知識(shí)與技能準(zhǔn)備2、布局容器Bootstrap為了保證刪格布局的正常應(yīng)用，需要使用布局容器（添加.container或.container-fluid類的標(biāo)簽）來完成頁面布局。其中.container類是用于固定寬度（各視口最大寬度可參考表2-2-1）并支持響應(yīng)式布局的容器。.container-fluid類是用于100%的寬度，可占據(jù)全部視口的容器。由于padding等css屬性的原因，.container和.container-fluid類的標(biāo)簽不能互相嵌套。知識(shí)與技能準(zhǔn)備3、rowBootstrap為刪格添加了一個(gè)獨(dú)立的類.row，以適用我們的先創(chuàng)建行（row），然后在行中創(chuàng)建列（.col-xs-*等Bootstrap刪格類預(yù)定的列）的布局，同時(shí)通過為.row元素設(shè)置負(fù)值margin從而抵消了布局容器（.container-fluid和.container類）設(shè)置的左右兩邊padding，也就間接保留了“行（row）”所包含的“列（column）”（刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）設(shè)置的padding值（左右各15px），.row類在Bootstrap的定義如下：“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding），通常我們會(huì)通過“行（row）”在水平方向創(chuàng)建一組“列（column）”，然后將內(nèi)容放置于“列（column，刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。1234.row{margin-right:-15px;margin-left:-15px;}打開2.2-1素材文件夾中的web_bootstrap文件夾，在已經(jīng)配置好Bootstrap的index.html頁面編寫一個(gè)布局框架頁面，要求如下：（1）采用100%寬度的容器（2）在行（row）中創(chuàng)建一個(gè)大桌面視口下是4列、桌面視口下是2列、平板是2列、手機(jī)是1列的布局框架。課堂練習(xí)的部分代碼可參考如下示例：課堂練習(xí)2-2-1創(chuàng)建一個(gè)響應(yīng)式的刪格頁面12345678<divclass="container-fluid"><divclass="row"><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>知識(shí)與技能準(zhǔn)備4、列偏移Bootstrap處理定義了刪格，還為刪格的左留白定義了一套“留白刪格”，我們把它叫做列偏移樣式。如使用.col-md-offset-*類可以將列向右側(cè)偏移。這些類實(shí)際是通過使用*選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。打開2.2-1完成的文件，在練習(xí)2.2-1的基礎(chǔ)上，在row內(nèi)的布局框架元素上方增加標(biāo)題和說明文字，要求如下：（1）標(biāo)題在任何顯示視口都是獨(dú)立的一行顯示（2）說明文字在大桌面視口、桌面視口占頁面的8等分，并居中對(duì)齊。課堂練習(xí)的部分代碼可參考如下示例：課堂練習(xí)2-2-2創(chuàng)建一個(gè)“居中”的刪格列12345678910<divclass="container-fluid"><divclass="row"><h2>標(biāo)題</h2><divclass="col-lg-8col-lg-offset-2col-md-8col-md-offset-2>說明文字</div><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>任務(wù)實(shí)施在任務(wù)1的基礎(chǔ)上，我們需要完成頁面的基本布局框架，以便在任務(wù)三中加入對(duì)應(yīng)內(nèi)容。通過分析效果圖片，我們不難發(fā)現(xiàn)，除了移動(dòng)視口，其它視口下左右兩邊的內(nèi)容與瀏覽器都保持著一定的邊界（padding），所以我們可以判斷頁面布局時(shí)應(yīng)該選用固定寬度容器.container。由于container是有左右留白的，針對(duì)非白色背景，為了保證有色背景是通欄，需要在其外圍添加一個(gè)標(biāo)簽來包含它，如功能介紹、下載應(yīng)用、高級(jí)會(huì)員、聯(lián)系我們，這幾個(gè)模塊都需要在container的外圍添加一個(gè)標(biāo)簽。由于本任務(wù)主要考慮布局，所以以下各步驟的參考代碼并沒有完全包含頁面的所有內(nèi)容，我們會(huì)在后續(xù)任務(wù)中再進(jìn)行完善。1、菜單欄因?yàn)椴藛螜诓糠质亲笥医Y(jié)構(gòu)，使用可以在<body>標(biāo)簽中編寫左右布局代碼。2、關(guān)于關(guān)于區(qū)域?yàn)橥冢]有分列），故只需要單獨(dú)創(chuàng)建一行就可以了。3、應(yīng)用特征此欄為“品”字形，標(biāo)題獨(dú)立一行，下方為左右結(jié)構(gòu)。在大桌面視口和桌面視口端采用左右5：7的結(jié)構(gòu)，平板和手機(jī)端為上下結(jié)構(gòu)（占12列），默認(rèn)即占12列，故不用編寫，只需要編寫大桌面視口和桌面視口端兩個(gè)端口的。任務(wù)實(shí)施4、下載此欄內(nèi)容在在大桌面視口和桌面視口端為也是“品”字結(jié)構(gòu)，上面為標(biāo)題+段落，下面是左中右結(jié)構(gòu)的布局，在平板和手機(jī)端不存在左右結(jié)構(gòu)，是垂直排列的標(biāo)題+段落+垂直的軟件特征介紹。5、會(huì)員功能該欄目標(biāo)題部分與上一欄目類似，下方是表格。6、幫助中心該欄目內(nèi)容為通欄標(biāo)題-三列內(nèi)容-通欄視頻的結(jié)構(gòu)。7、聯(lián)系我們欄目內(nèi)容為左右結(jié)構(gòu)，為了讓右邊的表單靠右，我們對(duì)其左右結(jié)構(gòu)的比例做了調(diào)整。8、版權(quán)欄目內(nèi)容為簡單的通欄結(jié)構(gòu)。9、測試在完成上述內(nèi)容后，我們需要對(duì)完成的結(jié)果進(jìn)行測試，重點(diǎn)測試在臨界值區(qū)域各刪格系統(tǒng)的變化。在網(wǎng)頁制作過程中，會(huì)出現(xiàn)同行相似元素不等高的現(xiàn)象，為此，Bootstrap提供了專門的換行解決方案來解決這一問題。Bootstrap還為列提供了排序樣式。任務(wù)拓展任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局頁面HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠?qū)W習(xí)Bootstrap的導(dǎo)航條組件，利用Bootstrap導(dǎo)航條組件相關(guān)內(nèi)容，完成不同樣式導(dǎo)航條的制作；能夠利用Bootstrap的JavaScript插件，對(duì)導(dǎo)航條進(jìn)行移動(dòng)化（響應(yīng)式）改造。任務(wù)目標(biāo)任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條本次任務(wù)要求通過學(xué)習(xí)Bootstrap的導(dǎo)航條及相關(guān)組件，完成項(xiàng)目網(wǎng)頁的導(dǎo)航條制作。完成后的導(dǎo)航條如圖2-3所示。任務(wù)描述圖2-3移動(dòng)端和電腦端導(dǎo)航條測試效果圖任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條在上一任務(wù)的基礎(chǔ)上，完成D清單頁面導(dǎo)航條制作。需要：學(xué)習(xí)Bootstrap的菜單框架、菜單樣式、字體圖標(biāo)等知識(shí)；學(xué)習(xí)Bootstrap的響應(yīng)式菜單、下拉菜單等JavaScript插件知識(shí)；綜合運(yùn)用Bootstrap相關(guān)知識(shí)，完成D清單頁面響應(yīng)式導(dǎo)航條制作。任務(wù)分析任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條知識(shí)與技能準(zhǔn)備網(wǎng)頁的組件，是指包括下拉菜單、導(dǎo)航、警告框、彈出框等可以在各個(gè)網(wǎng)頁上常見的一般可以復(fù)用的頁面元素。為了完成頁面導(dǎo)航條的制作，需要學(xué)習(xí)Bootstrap組件部分的相關(guān)知識(shí)，可以查閱Bootstrap框架中文網(wǎng)址

的“組件”

來學(xué)習(xí)Bootstrap的組件。根據(jù)本次任務(wù)的要求，為了能夠順利應(yīng)用Bootstrap組件來制作招生頁面的導(dǎo)航條，我們需要先學(xué)習(xí)Bootstrap的導(dǎo)航條組件和字體圖標(biāo)等相關(guān)知識(shí)。Bootstrap中的導(dǎo)航組件都共同使用一個(gè)已經(jīng)寫好了的nav類，狀態(tài)類也是共用的。通過修改nav類的樣式我們就可以得到我們想要的樣式。知識(shí)與技能準(zhǔn)備1、導(dǎo)航條的框架樣式導(dǎo)航條框架包括創(chuàng)建一個(gè)導(dǎo)航條欄底色和布局容器，Bootstrap為導(dǎo)航條設(shè)置了.navbar和.navbar-default類預(yù)定義樣式來設(shè)置導(dǎo)航條的高寬、邊框、邊距和導(dǎo)航項(xiàng)背景色等格式，.container布局容器則已經(jīng)在任務(wù)2中學(xué)習(xí)了。1234567891011121314.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1pxsolidtransparent;}/*在平板以上設(shè)備增加了border-radius:4px;*/.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7;}/*設(shè)置導(dǎo)航條底色，反色樣式為.navbar-inverse，你也可以自己設(shè)置*/.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px;}/*用于抵消.container和.container-fluid布局容器設(shè)置的兩個(gè)邊距，一般用于導(dǎo)航條的左右兩端*/知識(shí)與技能準(zhǔn)備1、導(dǎo)航條的框架樣式應(yīng)用時(shí)可以參考如下代碼：完成后的效果圖如下：12345<navclass="navbarnavbar-default"> <divclass="container"> <divclass="navbar-header">頭部</div> </div></nav>圖2-3-1導(dǎo)航條框架效果圖知識(shí)與技能準(zhǔn)備2、導(dǎo)航條內(nèi)容優(yōu)化樣式在搭建好框架后，我們需要在導(dǎo)航條中創(chuàng)建各種內(nèi)容。2.1列表導(dǎo)航使用<ul>列表來創(chuàng)建導(dǎo)航是行業(yè)的習(xí)慣，為此，Bootstrap也為使用<ul>創(chuàng)建導(dǎo)航條創(chuàng)建了各種樣式，主要以.nav和.navbar-bar類為主，且一般會(huì)同時(shí)使用。2.2常用格式優(yōu)化為了保證導(dǎo)航容器內(nèi)的相關(guān)內(nèi)容有正確的行距和顏色等格式，Bootstrap預(yù)設(shè)了一些常用的樣式格式。某網(wǎng)站導(dǎo)航條效果圖如圖2-3-3所示，請(qǐng)使用Bootstrap導(dǎo)航條組件完成其網(wǎng)頁效果的實(shí)現(xiàn)。可參考如下方式實(shí)現(xiàn)：（1）搭建導(dǎo)航框架；（2）創(chuàng)建列表，并輸入相應(yīng)內(nèi)容；（3）利用Bootstrap的導(dǎo)航條格式優(yōu)化樣式來設(shè)置內(nèi)容樣式。課堂練習(xí)2-3-1使用Bootstrap制作如下導(dǎo)航條圖2-3-3課堂練習(xí)2-3-1效果圖知識(shí)與技能準(zhǔn)備3、字體圖標(biāo)或品牌圖片3.1字體圖標(biāo)在配置環(huán)境的時(shí)候，也許你已經(jīng)留意到了Bootstrap存放字體的文件夾，Bootstrap提供了Glyphicons字體圖標(biāo)，包括250多個(gè)來自GlyphiconHalflings的字體圖標(biāo)。GlyphiconsHalflings一般是收費(fèi)的，但是他們的作者允許Bootstrap免費(fèi)使用。部分圖標(biāo)樣式可以看下圖，你也可以在

查看所有的圖標(biāo)樣式。圖2-3-4Bootstrap提供的字體圖標(biāo)知識(shí)與技能準(zhǔn)備3、字體圖標(biāo)或品牌圖片每一個(gè)圖標(biāo)都有一個(gè)獨(dú)立的類，圖標(biāo)類不能和其它組件直接聯(lián)合使用，它們不能在同一個(gè)元素上與其他類共同存在。所以，要使用圖標(biāo)必須創(chuàng)建一個(gè)嵌套的<span>標(biāo)簽，并將圖標(biāo)類應(yīng)用到這個(gè)<span>標(biāo)簽上。為了有正確的padding值，務(wù)必在圖標(biāo)和文本之間添加一個(gè)空格?？蓞⒖既缦麓a：aria-hidden=“true”為無障礙屬性，在項(xiàng)目5中會(huì)介紹。3.2品牌圖片將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方（頭部）替換為<img>元素即可展示自己的品牌圖標(biāo)。由于.navbar-brand已經(jīng)被設(shè)置了內(nèi)補(bǔ)（padding）和高度（height），所以在使用時(shí)需要設(shè)置自己的CSS代碼來替換默認(rèn)的樣式。可參考如下CSS樣式代碼：1<spanclass="glyphiconglyphicon-search"aria-hidden="true"></span>12.navbar-brand{padding:5px!important;}.navbar-brand>img{height:40px;}在上一個(gè)課堂練習(xí)的基礎(chǔ)上，完成如下效果圖：在Login前面添加字體圖標(biāo)，在OlimpiaTrucks前面添加品牌圖片?？蓞⒖既缦路绞綄?shí)現(xiàn)：（1）添加品牌圖片刪除原有的文字品牌標(biāo)志，添加<img>標(biāo)簽，圖片文件在4.3-2文件夾中；修改<img>的格式，讓其在導(dǎo)航條上有正確的大小和邊距，CSS代碼可參考上面品牌圖片內(nèi)容中涉及的代碼；（2）添加字體圖標(biāo)參考字體圖標(biāo)內(nèi)容中的<span>標(biāo)簽代碼，修改相應(yīng)的樣式即可。課堂練習(xí)2-3-2在導(dǎo)航條添加圖標(biāo)和品牌圖片圖2-3-5帶logo和圖標(biāo)的導(dǎo)航條知識(shí)與技能準(zhǔn)備4、為手機(jī)端創(chuàng)建菜單圖標(biāo)將課堂練習(xí)2-3-2中完成的導(dǎo)航條在手機(jī)端（<768px），我們會(huì)發(fā)現(xiàn)導(dǎo)航條全部垂直排列了，如下圖：很明顯，這個(gè)并不是我們要的效果。Bootstrap已經(jīng)為我們想好了一切，為此，你只需要添加適當(dāng)?shù)腍TML代碼即可得到你要的結(jié)果。圖2-3-6移動(dòng)端導(dǎo)航條初始化效果知識(shí)與技能準(zhǔn)備4、為手機(jī)端創(chuàng)建菜單圖標(biāo)（1）在navbar-header類的<div>標(biāo)簽中添加<button>按鈕，并為其添加navbar-toggle和collapsed類；（2）用<div>將要隱藏的列表包裹，并為其添加collapse和navbar-collapse類；（3）Bootstrap采用的是通過單擊鼠標(biāo)按鈕來顯示和隱藏的下拉菜單，所以其依賴于jquery.js和bootstrap.js文件。為此，我們需要在<button>中添加如下參數(shù)：data-toggle="collapse"：觸發(fā)事件data-target="#bs-example-navbar-collapse-1"：觸發(fā)事件的目標(biāo)aria-expanded="false"：用于無障礙設(shè)備檢查切換動(dòng)作的擴(kuò)張屬性data屬性是Bootstrap的API，是我們使用BootstrapJS的首選方式，你可以僅僅通過data屬性API就能使用所有Bootstrap中的插件，而不用寫一行JavaScript代碼，此處應(yīng)用了BootstrapJS的collapse插件。aria-expanded是W3CWAI-ARIA（無障礙）的一個(gè)擴(kuò)展屬性，目前還是草案，可查看W3C文檔

了解詳細(xì)，如果你的網(wǎng)頁不針對(duì)網(wǎng)頁無障礙進(jìn)行設(shè)計(jì)的，則可省略此屬性。在navbar-collapse類的<div>標(biāo)簽中添加id屬性，并對(duì)應(yīng)data-target的值：id="bs-example-navbar-collapse-1"當(dāng)然你也可以自己定義屬性值，只需要與data-target的屬性對(duì)應(yīng)即可。將課堂練習(xí)2-3-2的導(dǎo)航條進(jìn)行響應(yīng)式處理，讓其在移動(dòng)端時(shí)按下圖效果顯示，且在單擊圖標(biāo)時(shí)能夠按下拉的方式顯示隱藏的導(dǎo)航條?？蓞⒖既缦麓a：課堂練習(xí)2-3-3導(dǎo)航條的移動(dòng)化1234567<!--在navbar-header類的<div>標(biāo)簽中添加--><buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button>1234<!--用此div包裹要隱藏的內(nèi)容--><divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"><!--隱藏的內(nèi)容--></div>圖2-3-7移動(dòng)端導(dǎo)航條知識(shí)與技能準(zhǔn)備5、滾動(dòng)監(jiān)聽滾動(dòng)監(jiān)聽插件是用來根據(jù)滾動(dòng)條所處的位置來自動(dòng)更新導(dǎo)航項(xiàng)的。當(dāng)滾動(dòng)導(dǎo)航條項(xiàng)對(duì)應(yīng)的內(nèi)容區(qū)域時(shí)該導(dǎo)航條項(xiàng)目會(huì)高亮顯示。該插件依賴于Bootstrap的scrollspy.js，該js文件已經(jīng)集成在了bootstrap.js中。在完成ID屬性來實(shí)現(xiàn)頁面內(nèi)鏈接的導(dǎo)航方式后，通過調(diào)用data屬性，即可完成對(duì)<body>內(nèi)相對(duì)定位元素的滾動(dòng)監(jiān)聽。為此，你需要將<body>設(shè)置為相對(duì)定位，同時(shí)為該標(biāo)簽添加data-spy="scroll"和data-target="#navbar-example"兩個(gè)屬性（#navbar-example可以根據(jù)具體情況修改，并與id值對(duì)應(yīng)）。（測試內(nèi)容部分可以只寫標(biāo)題，以添加高度的方式來占位）（1）添加樣式，將<body>設(shè)置為相對(duì)定位：（2）為<body>標(biāo)簽添加兩個(gè)data屬性：（3）將data-target="#navbar-example"屬性與滾動(dòng)監(jiān)聽對(duì)象——導(dǎo)航條組件進(jìn)行關(guān)聯(lián)，即在<nav>中加入id="navbar-example"，并將導(dǎo)航條固定在頂部（添加.navbar-fixed-top，并為body添加“padding-top:70px;”樣式屬性）。（4）為菜單列表添加高亮顯示樣式.nav-tabs，并設(shè)置列表的href屬性。課堂練習(xí)2-3-4在練習(xí)2.3-2的基礎(chǔ)上，為導(dǎo)航條制作滾動(dòng)監(jiān)聽效果1body{position:relative;}123456<ulclass="navnavbar-navnav-tabs"> <liclass="active"><ahref="#start">Start</a></li> <li><ahref="#trucks">OurTrucks</a></li> <li><ahref="#about">Aboutus</a></li> <li><ahref="#impressum">Impressum</a></li></ul>1<bodydata-spy="scroll"data-target="#navbar-example">1<navid="navbar-example"class="navbarnavbar-defaultnavbar-fixed-top">（5）在<nav>標(biāo)簽后添加測試代碼，為了效果明顯，建議為測試代碼添加邊框和高度。HTML測試代碼：為測試代碼添加CSS樣式：至此，滾動(dòng)監(jiān)聽練習(xí)完成。由于導(dǎo)航條固定在頂部的原因，我們會(huì)發(fā)現(xiàn)監(jiān)聽內(nèi)容與導(dǎo)航條項(xiàng)有70px的高度誤差。為解決此誤差，可以將body的“padding-top:70px;”樣式屬性添加到測試代碼各div的css樣式中。課堂練習(xí)2-3-4在練習(xí)2.3-2的基礎(chǔ)上，為導(dǎo)航條制作滾動(dòng)監(jiān)聽效果1234<divid="start">Start</div><divid="trucks">OurTrucks</div><divid="about">Aboutus</div><divid="impressum">Impressum</div>1234#start,#trucks,#about,#impressum{ border:1pxsolid#000; height:500px;}任務(wù)實(shí)施在任務(wù)2中，我們已經(jīng)對(duì)整個(gè)頁面進(jìn)行了布局，其中導(dǎo)航條的代碼如下：很明顯，這是利用Bootstrap的刪格系統(tǒng)進(jìn)行的左右布局，通過前面知識(shí)的學(xué)習(xí)，我們知道利用Bootstrap的導(dǎo)航條來完成任務(wù)，不需要進(jìn)行左右布局。為了快速完成任務(wù)，我們要使用用Bootstrap的導(dǎo)航條來完成本次任務(wù)，以提高開發(fā)速度，當(dāng)然代價(jià)是我要犧牲部分的設(shè)計(jì)功能，所以此任務(wù)完成的導(dǎo)航條與項(xiàng)目1完成的會(huì)有些許差別。我們發(fā)現(xiàn)，我們要做的導(dǎo)航條比較簡單，并不是Bootstrap提供的參考樣式。12345678<headerclass="header"> <navclass="container"> <divclass="row"> <divclass="col-lg-3col-md-3col-sm-4">logo</div> <divclass="col-lg-9col-md-9col-sm-8">nav</div> </div> </nav></header>任務(wù)實(shí)施1、搭建導(dǎo)航條框架由于任務(wù)中的導(dǎo)航條并沒有圓角邊框，所以要修改navbar-default樣式。另外導(dǎo)航條在1440px狀態(tài)下我們發(fā)現(xiàn)并不是占滿整行的，而是有一個(gè)最大的寬度，據(jù)此可以判斷采用的是container容器而不是container-fluid容器?？蓞⒖既缦麓a來搭建導(dǎo)航條框架：2、為導(dǎo)航條添加LOGO在navbar-henader中加入圖片即可。123456<headerclass="headernavbarnavbar-default"> <navclass="container"> <divclass="navbar-header">logo和圖標(biāo)</div> <ulclass="navnavbar-navnavbar-right">li</ul> </nav></header>123<aclass="navbar-brandmylogo"href="#"> <imgalt="D清單"src="img/logo.png"height="45px"></a>任務(wù)實(shí)施3、制作導(dǎo)航條列表列表信息根據(jù)內(nèi)容輸入即可，由于導(dǎo)航條是在右邊的，所以需要加入navbar-right樣式。4、修改樣式(1)我們需要去掉導(dǎo)航條的邊框，所以可以通過修改.navbar-default來實(shí)現(xiàn)。新建一個(gè)css樣式表，取名為mystyle.css，保存到css文件夾，并與index.html頁面建立關(guān)聯(lián)，即在該頁面<head>中加入<link>引入樣式文件：123456789<ulclass="navnavbar-navnavbar-right"> <liclass="active"><ahref="">首頁</a></li> <li><ahref="">關(guān)于</a></li> <li><ahref="">應(yīng)用特征</a></li> <li><ahref="">下載</a></li> <li><ahref="">幫助</a></li> <li><ahref="">高級(jí)會(huì)員</a></li> <li><ahref="">聯(lián)系我們</a></li></ul>1<linkhref="css/mystyle.css"rel="stylesheet">任務(wù)實(shí)施并在mystyle.css文件中添加如下樣式：(2)為了讓LOGO圖片與導(dǎo)航條有一定的留白，我們?cè)黾恿艘粋€(gè).mylogo的樣式：(3)增加導(dǎo)航條的留白1.navbar-default{

border:none;}12345678910/*擴(kuò)大導(dǎo)航條的上下留白*//*為了確保導(dǎo)航條在隱藏和顯示時(shí)不會(huì)出現(xiàn)留白錯(cuò)位，此樣式選擇應(yīng)用到導(dǎo)航條左右兩個(gè)容器而不是導(dǎo)航條容器中*/.mynav{ margin:1.25rem0;}.mynav_bottommargin{ margin-bottom:0; font-weight:600; background-color:#FFFFFF; box-shadow:01px2pxrgba(43,48,51,.08);/*導(dǎo)航條底部加陰影*/}123/*如果logo圖片高度超過25px,則需要根據(jù)圖片大小重新設(shè)置.navbar-brand的內(nèi)補(bǔ)，超過50px還需要修改圖片高度，避免不能垂直居中對(duì)齊*/.mylogo{ padding:0.625rem20px;}任務(wù)實(shí)施5、為導(dǎo)航條創(chuàng)建響應(yīng)式按鈕以適應(yīng)手機(jī)端參考知識(shí)與技能準(zhǔn)備第4部分的知識(shí)。6、為導(dǎo)航條增加滾動(dòng)監(jiān)聽參考知識(shí)與技能準(zhǔn)備2.3-4。全部導(dǎo)航條完成后，可參考代碼請(qǐng)看書。自此，導(dǎo)航條已經(jīng)完成。了解下拉菜單的制作方法，和將導(dǎo)航條固定在頂部和底部的方法。任務(wù)拓展任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠使用Bootstrap的縮略圖、巨幕、表單、表格等相關(guān)組件，完成D清單頁面元素的制作；測試D清單頁面響應(yīng)式效果，完善頁面細(xì)節(jié)。任務(wù)目標(biāo)任務(wù)4使用Bootstrap和JS插件組件制作網(wǎng)頁內(nèi)容本次任務(wù)要求在完成導(dǎo)航條制作的基礎(chǔ)上，繼續(xù)完成網(wǎng)頁內(nèi)容的制作。完成后的效果圖如圖2-4所示。任務(wù)描述圖2-4完成后的移動(dòng)端和電腦端頁面測試效果圖任務(wù)4使用Bootstrap和JS插件組件制作網(wǎng)頁內(nèi)容在上一任務(wù)完成效果的基礎(chǔ)上，完成D清單網(wǎng)頁各個(gè)欄目內(nèi)容的制作。需要：學(xué)習(xí)Bootstrap的縮略圖、巨幕、表單、表格等相關(guān)組件；學(xué)習(xí)Bootstrap的輪播和模態(tài)框（彈出框）等相關(guān)JavaScript插件；綜合運(yùn)用Bootstrap相關(guān)組件，完成D清單頁面的制作并測試完成效果。任務(wù)分析任務(wù)4使用Bootstrap和JS插件組件制作網(wǎng)頁內(nèi)容知識(shí)與技能準(zhǔn)備如果你把我們要完成的網(wǎng)頁與Bootstrap的組件效果進(jìn)行對(duì)比，你會(huì)發(fā)現(xiàn)，為完成接下來的任務(wù)，我們需要學(xué)習(xí)如下Bootstrap知識(shí)：知識(shí)與技能準(zhǔn)備1、縮略圖組件Bootstrap的縮略圖是利用Bootstrap的刪格系統(tǒng)的一個(gè)圖片應(yī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、縮略圖組件通過分析上述代碼，我們知道縮略圖因?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自定義縮略圖通過組合圖片、標(biāo)題、段落和按鈕，我們就可以實(shí)現(xiàn)比較常見的網(wǎng)頁布局形式了，如下圖：圖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）分析：通過效果圖，我們可以做到，可以利用Bootstrap的自定義縮略圖來實(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è)瀏覽器橫向視口的方式來展現(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)式布局的容器，詳見任務(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ì)所用的表單控件都編寫了全局樣式。所有設(shè)置了.form-control類的<input>、<textarea>和<select>元素都將被默認(rèn)設(shè)置寬度屬性為width:100%；將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列。效果如下圖：圖2-4-7表單效果圖知識(shí)與技能準(zhǔn)備4、表單Bootstrap還設(shè)置了水平排列的表單，通過為<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水平排列表單