1 Bootstrap概述
作為Web前端開發(fā)框架，Bootstrap集成了HTML標記、CSS樣式以及JavaScript行為，使得開發(fā)人員、設(shè)計人員不再像過去周而復(fù)始地寫模板、樣式、交互效果，極大地節(jié)約了時間，提高了開發(fā)效率。它使用了最新的瀏覽器技術(shù)，可以提供精致的網(wǎng)頁排版方式以及表單、按鈕、表格、網(wǎng)格 柵格化、導航等諸多元素，輕松地創(chuàng)造令人愉快的設(shè)計效果。
2 下載Bootstrap
在下載Bootstrap文件前，我們簡短介紹下LESS。它是Bootstrap樣式定制的核心內(nèi)容，可以充分地發(fā)揮地設(shè)計人員與開發(fā)人員的創(chuàng)造力和想象力。因此，這里為對Bootstrap有更多的操作空間和提升開發(fā)效率，我們選用源代碼安裝。
最新版是
V3.3.5，所下載文件目錄如下：
下載文件里的
dist目錄是已編譯好的CSS文件、JavaScript文件、及fonts文件。因為，我們使用LESS文件生成所需要的樣式，這里dist目錄內(nèi)容暫不處置。3 下載html5樣板文件H5BP
H5BP實現(xiàn)的是一個web頁面的標準模板，尤其針對
html5進行了全面優(yōu)化，同時也對老瀏覽器向后兼容，深受開發(fā)人員喜愛。來看下Github數(shù)據(jù)：
Github
文件解壓后取出
src目錄，將名稱src修改為一個新名稱，如Template，包含內(nèi)容：
4 添加Bootstrap文件
- 以上文件準備就緒后，在
Template目錄中的js文件夾下新建Bootstrap文件夾，接著我們需要將Bootstrap的js插件復(fù)制到該目錄中。 - 在
Template目錄的與js、img目錄的同一級目錄下創(chuàng)建一個less目錄，并在此less文件夾下再新建一個bootstrap目錄，將Bootstrap中less文件夾下所有后綴名less的文件復(fù)制到bootstrap目錄里，同時，在less目錄下保留一份bootstrap.less文件，并改名為__main.less。
至此，整個文件存放結(jié)構(gòu)工作搞定了。
注意，__main.less文件是我們以后通過編譯它來基于所有導入LESS文件生成一個統(tǒng)一的樣式表，它需要導入的less全部存放在bootstrap目錄下，因此，我們必須將__main.less文件導入路徑替換為bootstrap下的各文件路徑。 - 在對需要自定義樣式的less操作時，我們最好把對應(yīng)文件復(fù)制到與
__main.less同一目錄下，以防在原文件上修改出現(xiàn)錯誤影響開發(fā)進度。如，我們需對variables.less變量進行修改，那么，將該文件復(fù)制到__main.less同一目錄下。為便于區(qū)分哪些為自定義文件，對variables.less重命名為_variables.less。 - 使用WinLess編譯器對LESS文件進行編譯，需要編譯的文件加載進WinLess編譯器后，在
__main.less文件上右擊選擇'Select output file'，定義一個編譯文件輸出目錄，如css目錄,最后編譯Compile即可。
5 總結(jié)
- 在這里，我們對JS、CSS文件的處置操作在實際生產(chǎn)環(huán)境中是不可取的，為方便講解bootstrap整體使用流程，我們沒有對JS文件進行做優(yōu)化，而是把所有JS插件都存放在
js/bootstrap目錄中。 - Bootstrap框架提供非常棒的視覺效果，而且使用Bootstrap可以確保整個web應(yīng)用程序的風格完全 一致，用戶體驗一致，操作習慣一致。
- 相信，它優(yōu)雅、簡潔的特性會讓你愛上它。
