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

配置Bootstrap開發環境本次任務要求通過學習Bootstrap的文檔和模板知識，下載并配置用于生產環境的Bootstrap，并編寫Bootstrap模板，為后續的開發做準備。任務描述圖2-1Bootstrap開發環境配置后的模板代碼和測試頁面

配置Bootstrap開發環境任務要求下載并配置好用于生產環境的Bootstrap文件，編寫Bootstrap模板并進行測試，需要：學習Bootstrap的由來和作用；學習Bootstrap的文檔結構和模板知識；下載Bootstrap文檔；編寫模板頁面，同時使用該頁面測試配置效果。任務分析

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

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

）。由于語言的關系，可以查閱Bootstrap中文網（非官網）的V3版本幫助文檔（

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

（可下載任意版本）或者

（提供了直觀的web文檔）。考慮到語言的關系，也可以在非官方授權的Bootstrap中文網（

）下載。（2）參考步驟如下：打開Bootstrap中文網（網址

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

），單擊“Bootstrap3中文文檔(v3.3.7)”（注：版本會持續更新）按鈕，進入Bootstrap3中文文檔(v3.3.7)頁面，單擊“下載Bootstrap”按鈕，跳轉到下載頁面（如圖2-1-1）。課堂練習2-1-1下載用于生產環境的Bootstrap單擊“用于生產環境的Bootstrap”下方的“下載Bootstrap”按鈕，在彈出的打開對話框中（如圖2-1-2），選擇“保存文件”，并通過“瀏覽”按鈕選擇保存路徑，單擊“確定”按鈕，完成Bootstrap文件的下載。將下載的“bootstrap-3.3.7-dist.zip”文件解壓，在解壓的“dist”文件夾下有css、js、fonts文件夾，在文件夾中即可看到上文提到的目錄結構中的文件。課堂練習2-1-1下載用于生產環境的Bootstrap圖2-1-1Bootstrap下載頁面圖2-1-2打開文件對話框知識與技能準備3、Bootstrap模板Bootstrap模板是指使用Bootstrap框架的通用頁面，其有基礎的html代碼，并在此基礎上關聯好了Bootstrap的CSS、JavaScript文件。任務實施本次的任務主要是完成開發工作環境的部署，由于項目1中已經學習了開發環境的開發工具部署，所以這里就只考慮怎樣部署Bootstrap了。1、下載Bootstrap文件在課堂練習2-1-1中你已經下載好了，這里就不在敘述。2、創建首頁，并引用Bootstrap文件（1）在你的盤符（如D盤）新建文件夾，命名為“web_bootstrap”，將下載并解壓好的“dist”文件夾下的3個文件夾（包括css、fonts、js中的所有文件）復制到此。（2）用VisualStudioCode軟件打開上面創建的文件夾，并在文件夾根目錄新建一個網頁，命名為“index.html”。（3）在頁面中輸入如下代碼，完成一個基本的HTML5頁的編寫。（4）在頁