前言

　　當(dāng)下最流行的前端開(kāi)發(fā)框架Bootstrap，可大大簡(jiǎn)化網(wǎng)站開(kāi)發(fā)過(guò)程，從而深受廣大開(kāi)發(fā)者的喜歡。本文總結(jié)了Bootstrap之所以廣泛流傳的11大原因。如果你還沒(méi)有使用Twitter Bootstrap，建議你去了解一下。我也是最近才有所發(fā)現(xiàn)的，不過(guò)有更好的消息，在微軟發(fā)布的VS2013正式版中，也已經(jīng)將BootStrap3.0的版本加入了額，連微軟都看到bootStrap的強(qiáng)大，而且它的確很不錯(cuò)，所以我也不得不學(xué)習(xí)。這里有我對(duì)VS2013更新的簡(jiǎn)要介紹，有興趣的話你可以看一眼Visual Studio 2013更新內(nèi)容簡(jiǎn)介

bootstrap深受廣大屌絲喜愛(ài)的原因到底是什么呢　

1.節(jié)省時(shí)間

利用Bootstrap，你將有更多的時(shí)間用來(lái)掙錢。Bootstrap庫(kù)中包含很多現(xiàn)成的代碼片段，這些代碼可為你的網(wǎng)站增加更多活力。Web開(kāi)發(fā)者不必再花費(fèi)時(shí)間、費(fèi)力地編碼，只需找到合適的代碼，插入到合適位置即可。此外，CSS利用LESS編寫(xiě)，很多樣式和設(shè)計(jì)都已設(shè)計(jì)完成。

2.定制化

Bootstrap很重要的一方面就是你可以將它據(jù)為己有。你可以留取框架中需要的部分，拋棄不需要的。Bootstrap整體允許你根據(jù)自己的需要，裁剪自己開(kāi)發(fā)的項(xiàng)目。

3.設(shè)計(jì)方面的因素

網(wǎng)格系統(tǒng)

對(duì)頁(yè)面進(jìn)行布局時(shí)，往往需要有一個(gè)合適的網(wǎng)格。你不一定使用該平臺(tái)的網(wǎng)格，但它確實(shí)能大大降低你工作的難度。默認(rèn)模式下，該平臺(tái)提供一個(gè)16列的網(wǎng)格（寬為960px）。每列寬40px，每列左右兩側(cè)具有10px的間隙，各網(wǎng)格最外側(cè)均留出20px的空白。你可以根據(jù)需要改變行數(shù)與間隔大小。樣式已開(kāi)發(fā)完成，開(kāi)發(fā)者只需要把合適的代碼放入HTML合適的位置即可。

LESS

LESS在開(kāi)發(fā)周期內(nèi)應(yīng)用很廣。它是一種基于CSS之上的高級(jí)語(yǔ)言，其目的是使得CSS開(kāi)發(fā)更靈活和更強(qiáng)大。你可以利用LESS的Mixins及CSS操作定制內(nèi)嵌網(wǎng)格。Bootstrap采用了大量流行的CSS3功能，可以對(duì)所有的網(wǎng)站提供統(tǒng)一的瀏覽體驗(yàn)。

JavaScript

Bootstrap提供JavaScript庫(kù)，該庫(kù)超越了基本的架構(gòu)與樣式。通過(guò)Bootstrap，開(kāi)發(fā)者可輕易地操作窗口警告框、工具提示框、滾動(dòng)條、按鈕等。Bootstrap最突出之處是，它可以讓你不必再費(fèi)神費(fèi)力地寫(xiě)腳本。

4.一致性

Twitter當(dāng)初開(kāi)發(fā)該工具的最主要原因是，開(kāi)發(fā)者所開(kāi)發(fā)項(xiàng)目在不同瀏覽器間的不一致性。這就導(dǎo)致了很多前端開(kāi)發(fā)與最終用戶界面之間的問(wèn)題。Bootstrap保證了界面在不同平臺(tái)上的統(tǒng)一性。在IE、Chrome及Firefox中，你可以看到統(tǒng)一的界面。

5.保持持續(xù)更新

以jQuery的UI為例：每一年更新一次。而B(niǎo)ootstrap則在不停地改進(jìn)，更具規(guī)律性與持續(xù)性。Web開(kāi)發(fā)者一發(fā)現(xiàn)新問(wèn)題，Bootstrap團(tuán)隊(duì)便立刻著手修復(fù)它。

6.易于集成

如果你想進(jìn)一步完善一個(gè)已完成的網(wǎng)站，Bootstrap可以幫助你。例如，如果你要統(tǒng)一使用自己編寫(xiě)的表格樣式，你要做的是把你的樣式復(fù)制到CSS樣式文件中。Bootstrap將立即剔除它本身的樣式，在這里，你需要將該文件與Twitter進(jìn)行關(guān)聯(lián)。集成的過(guò)程十分簡(jiǎn)單、方便、快捷。完成之后，你便可以把你的設(shè)計(jì)應(yīng)用到你的核心內(nèi)容上。

7.響應(yīng)式

Bootstrap為響應(yīng)式框架。無(wú)論你的開(kāi)發(fā)工作從筆記本轉(zhuǎn)移到iPad，還是從iPad轉(zhuǎn)移到Mac上，你都不用為你的工作而苦惱。因?yàn)锽ootstrap能以超快的速遞與效率適應(yīng)不同平臺(tái)間的差異。

8.對(duì)未來(lái)技術(shù)具有兼容性

Bootstrap包含很多特殊元素，如HTML5和CSS3，這些元素被稱為設(shè)計(jì)的未來(lái)。因?yàn)樵摽蚣芸紤]到設(shè)計(jì)和開(kāi)發(fā)的未來(lái)，它很有潛力成為未來(lái)幾年里Web開(kāi)發(fā)者的參考標(biāo)準(zhǔn)。

9.競(jìng)爭(zhēng)力

Bootstrap并不是唯一的前端開(kāi)發(fā)框架，比如還有JQueryUI、HTML5Boilerplate等等。但對(duì)于Bootstrap來(lái)說(shuō)，真正的競(jìng)爭(zhēng)對(duì)手是ZurbFoundation。Bootstrap2新增加了一個(gè)工具集，F(xiàn)oundation經(jīng)過(guò)好長(zhǎng)時(shí)間才填補(bǔ)上。Bootstrap包含大量的第三方插件、主題、功能特性、代碼等等，而Foundation并不具備這些。

10.詳盡的說(shuō)明文檔

Bootstrap的文檔相當(dāng)精彩。大部分新平臺(tái)往往沒(méi)有合適的說(shuō)明文檔，而B(niǎo)ootstrap的說(shuō)明文檔大大幫助了我們的入門學(xué)習(xí)。通過(guò)文檔可以找到我們需要的所有信息。

11.讓老板們受益

學(xué)習(xí)Bootstrap，并不會(huì)花費(fèi)你太多時(shí)間，因?yàn)樗鼘⑺械哪K化方法與體系結(jié)構(gòu)封裝在了一起。從老板的角度來(lái)看，如果你為Web開(kāi)發(fā)者提供了Bootstrap框架，那么他們會(huì)節(jié)省更多的學(xué)習(xí)時(shí)間，并快速投入到工作中。這會(huì)為老板們帶來(lái)更好的收益。

如果你覺(jué)得Bootstrap確實(shí)對(duì)你有幫助，你可以訪問(wèn)twitter.github.com/bootstrap/查看該框架。你也可以下載編譯版本，或獲取包含CSS和JavaScript文檔的Bootstrap源文件。

視覺(jué)體驗(yàn)

首先看到的這是中文官網(wǎng)，如果細(xì)心看一下，其實(shí)它的講解很詳細(xì)。

接下來(lái)點(diǎn)進(jìn)http://v3.bootcss.com/bootstrap3中文文檔。

繼續(xù)往下看http://expo.bootcss.com/這里許多已經(jīng)應(yīng)用的網(wǎng)站實(shí)例額。

看到這么多實(shí)例，這么優(yōu)秀的前端架構(gòu)，我竟然才知道，而且有這么多的網(wǎng)站已經(jīng)使用了，我也迫不及待了，開(kāi)始我的學(xué)習(xí)之旅了。

總結(jié)

看了這么多，沒(méi)什么好說(shuō)的了，接下來(lái)就是要學(xué)習(xí)了，初步打算使用DreamWeaver6進(jìn)行簡(jiǎn)單的學(xué)習(xí)練習(xí)。后續(xù)我們將一步步的走進(jìn)這款神奇的前端開(kāi)發(fā)框架Bootstrap。

最新評(píng)論