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