HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：配置Bootstrap開發(fā)環(huán)境

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

配置Bootstrap開發(fā)環(huán)境本次任務(wù)要求通過學(xué)習(xí)Bootstrap的文檔和模板知識，下載并配置用于生產(chǎn)環(huán)境的Bootstrap，并編寫B(tài)ootstrap模板，為后續(xù)的開發(fā)做準(zhǔn)備。任務(wù)描述圖2-1Bootstrap開發(fā)環(huán)境配置后的模板代碼和測試頁面

配置Bootstrap開發(fā)環(huán)境任務(wù)要求下載并配置好用于生產(chǎn)環(huán)境的Bootstrap文件，編寫B(tài)ootstrap模板并進行測試，需要：學(xué)習(xí)Bootstrap的由來和作用；學(xué)習(xí)Bootstrap的文檔結(jié)構(gòu)和模板知識；下載Bootstrap文檔；編寫模板頁面，同時使用該頁面測試配置效果。任務(wù)分析

配置Bootstrap開發(fā)環(huán)境知識與技能準(zhǔn)備Bootstrap是由Twitter工程師推出的前端開發(fā)框架，是一款強大的開源前端開發(fā)工具包，具有強大的自定義功能，Bootstrap一經(jīng)推出大受歡迎，國內(nèi)也有不少網(wǎng)站開始使用Bootstrap開發(fā)。Bootstrap全部托管于Github（一個代碼托管平臺和開發(fā)者社區(qū)，開發(fā)者可以在Github上創(chuàng)建自己的開源項目并與其他開發(fā)者協(xié)作編碼。創(chuàng)業(yè)公司可以用它來托管軟件項目。開源項目可以免費托管，私有項目需付費），用戶可以直接訪問Github項目。Bootstrap在Github托管地地址：

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

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

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

（可下載任意版本）或者

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

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

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

），單擊“Bootstrap3中文文檔(v3.3.7)”（注：版本會持續(xù)更新）按鈕，進入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”按鈕，在彈出的打開對話框中（如圖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打開文件對話框知識與技能準(zhǔn)備3、Bootstrap模板Bootstrap模板是指使用Bootstrap框架的通用頁面，其有基礎(chǔ)的html代碼，并在此基礎(chǔ)上關(guān)聯(lián)好了Bootstrap的CSS、JavaScript文件。任務(wù)實施本次的任務(wù)主要是完成開發(fā)工作環(huán)境的部署，由于項目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個文件夾（包括css、fonts、js中的所有文件）復(fù)制到此。（2）用VisualStudioCode軟件打開上面創(chuàng)建的文件夾，并在文件夾根目錄新建一個網(wǎng)頁，命名為“index.html”。（3）在頁面中輸入如下代碼，完成一個基本的HTML5頁的編寫。（4）在頁