Bootstrap每天必學(xué)之前端開發(fā)框架
BootStrap學(xué)習(xí)從現(xiàn)在開始,前端開發(fā)框架Bootstrap,可大大簡化網(wǎng)站開發(fā)過程,從而深受廣大開發(fā)者的喜歡。本文總結(jié)了Bootstrap之所以廣泛流傳的11大原因。如果你還沒有使用Twitter Bootstrap,建議你去了解一下。小編也是最近才有所發(fā)現(xiàn)的,不過有更好的消息,在前兩天微軟發(fā)布的VS2013正式版中,也已經(jīng)將BootStrap3.0的版本加入了額,連微軟都看到bootStrap的強(qiáng)大,而且它的確很不錯,所以我也不得不學(xué)習(xí)。
bootstrap深受廣大屌絲喜愛的原因到底是什么呢
1.節(jié)省時間
利用Bootstrap,你將有更多的時間用來掙錢。Bootstrap庫中包含很多現(xiàn)成的代碼片段,這些代碼可為你的網(wǎng)站增加更多活力。Web開發(fā)者不必再花費(fèi)時間、費(fèi)力地編碼,只需找到合適的代碼,插入到合適位置即可。此外,CSS利用LESS編寫,很多樣式和設(shè)計都已設(shè)計完成。
2.定制化
Bootstrap很重要的一方面就是你可以將它據(jù)為己有。你可以留取框架中需要的部分,拋棄不需要的。Bootstrap整體允許你根據(jù)自己的需要,裁剪自己開發(fā)的項(xiàng)目。
3.設(shè)計方面的因素
- 網(wǎng)格系統(tǒng)
對頁面進(jìn)行布局時,往往需要有一個合適的網(wǎng)格。你不一定使用該平臺的網(wǎng)格,但它確實(shí)能大大降低你工作的難度。默認(rèn)模式下,該平臺提供一個16列的網(wǎng)格(寬為960px)。每列寬40px,每列左右兩側(cè)具有10px的間隙,各網(wǎng)格最外側(cè)均留出20px的空白。你可以根據(jù)需要改變行數(shù)與間隔大小。樣式已開發(fā)完成,開發(fā)者只需要把合適的代碼放入HTML合適的位置即可。
- LESS
LESS在開發(fā)周期內(nèi)應(yīng)用很廣。它是一種基于CSS之上的高級語言,其目的是使得CSS開發(fā)更靈活和更強(qiáng)大。你可以利用LESS的Mixins及CSS操作定制內(nèi)嵌網(wǎng)格。Bootstrap采用了大量流行的CSS3功能,可以對所有的網(wǎng)站提供統(tǒng)一的瀏覽體驗(yàn)。
- JavaScript
Bootstrap提供JavaScript庫,該庫超越了基本的架構(gòu)與樣式。通過Bootstrap,開發(fā)者可輕易地操作窗口警告框、工具提示框、滾動條、按鈕等。Bootstrap最突出之處是,它可以讓你不必再費(fèi)神費(fèi)力地寫腳本。
4.一致性
Twitter當(dāng)初開發(fā)該工具的最主要原因是,開發(fā)者所開發(fā)項(xiàng)目在不同瀏覽器間的不一致性。這就導(dǎo)致了很多前端開發(fā)與最終用戶界面之間的問題。Bootstrap保證了界面在不同平臺上的統(tǒng)一性。在IE、Chrome及Firefox中,你可以看到統(tǒng)一的界面。
5.保持持續(xù)更新
以jQuery 的UI為例:每一年更新一次。而Bootstrap則在不停地改進(jìn),更具規(guī)律性與持續(xù)性。Web開發(fā)者一發(fā)現(xiàn)新問題, Bootstrap團(tuán)隊(duì)便立刻著手修復(fù)它。
6.易于集成
如果你想進(jìn)一步完善一個已完成的網(wǎng)站,Bootstrap可以幫助你。例如,如果你要統(tǒng)一使用自己編寫的表格樣式,你要做的是把你的樣式復(fù)制到CSS樣式文件中。Bootstrap將立即剔除它本身的樣式,在這里,你需要將該文件與Twitter進(jìn)行關(guān)聯(lián)。集成的過程十分簡單、方便、快捷。完成之后,你便可以把你的設(shè)計應(yīng)用到你的核心內(nèi)容上。
7.響應(yīng)式
Bootstrap為響應(yīng)式框架。無論你的開發(fā)工作從筆記本轉(zhuǎn)移到iPad,還是從iPad轉(zhuǎn)移到Mac上,你都不用為你的工作而苦惱。因?yàn)锽ootstrap能以超快的速遞與效率適應(yīng)不同平臺間的差異。
8.對未來技術(shù)具有兼容性
Bootstrap包含很多特殊元素,如HTML5和CSS3,這些元素被稱為設(shè)計的未來。因?yàn)樵摽蚣芸紤]到設(shè)計和開發(fā)的未來,它很有潛力成為未來幾年里Web開發(fā)者的參考標(biāo)準(zhǔn)。
9.競爭力
Bootstrap并不是唯一的前端開發(fā)框架,比如還有JQuery UI、HTML5 Boilerplate等等。但對于Bootstrap來說,真正的競爭對手是Zurb Foundation。Bootstrap 2新增加了一個工具集,F(xiàn)oundation經(jīng)過好長時間才填補(bǔ)上。Bootstrap包含大量的第三方插件、主題、功能特性、代碼等等,而Foundation并不具備這些。
10.詳盡的說明文檔
Bootstrap的文檔相當(dāng)精彩。大部分新平臺往往沒有合適的說明文檔,而Bootstrap的說明文檔大大幫助了我們的入門學(xué)習(xí)。通過文檔可以找到我們需要的所有信息。
11.讓老板們受益
學(xué)習(xí)Bootstrap,并不會花費(fèi)你太多時間,因?yàn)樗鼘⑺械哪K化方法與體系結(jié)構(gòu)封裝在了一起。從老板的角度來看,如果你為Web開發(fā)者提供了Bootstrap框架,那么他們會節(jié)省更多的學(xué)習(xí)時間,并快速投入到工作中,這會為老板們帶來更好的收益。
視覺體驗(yàn)
首先看到的這是中文官網(wǎng),如果細(xì)心看一下,其實(shí)它的講解很詳細(xì)。
繼續(xù)往下看這里許多已經(jīng)應(yīng)用的網(wǎng)站實(shí)例額。
看到這么多實(shí)例,這么優(yōu)秀的前端架構(gòu),是不是大家已經(jīng)迫不及待了,接下來的學(xué)習(xí)初步打算使用Sublime Text3進(jìn)行簡單的練習(xí),現(xiàn)在就開始我們學(xué)習(xí)Bootstrap之旅吧。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
- Bootstrap框架下下拉框select搜索功能
- 基于mvc5+ef6+Bootstrap框架實(shí)現(xiàn)身份驗(yàn)證和權(quán)限管理
- 使用Bootstrap框架制作查詢頁面的界面實(shí)例代碼
- 30分鐘快速掌握Bootstrap框架
- Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法
- Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
- 詳解基于Bootstrap扁平化的后臺框架Ace
- Bootstrap框架的學(xué)習(xí)教程詳解(二)
- 利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)
- 值得分享和收藏的Bootstrap學(xué)習(xí)教程
相關(guān)文章
Javascript實(shí)現(xiàn)簡易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)簡易導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06深入理解JavaScript系列(31):設(shè)計模式之代理模式詳解
這篇文章主要介紹了深入理解JavaScript系列(31):設(shè)計模式之代理模式詳解,代理模式使得代理對象控制具體對象的引用,代理幾乎可以是任何對象:文件,資源,內(nèi)存中的對象,或者是一些難以復(fù)制的東西,需要的朋友可以參考下2015-03-03JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01js實(shí)現(xiàn)動態(tài)增加文件域表單功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動態(tài)增加文件域表單功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-10-10JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果,涉及JavaScript結(jié)合時間函數(shù)遍歷字符串及動態(tài)改變狀態(tài)欄顯示效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10js實(shí)現(xiàn)無限級樹形導(dǎo)航列表效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)無限級樹形導(dǎo)航列表效果代碼,通過一個封裝的JS類實(shí)現(xiàn)無限樹形導(dǎo)航的效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09JavaScript空數(shù)組的every()方法實(shí)踐
every()方法用于檢測數(shù)組中的所有元素是否都滿足指定條件, 本文主要介紹了JavaScript空數(shù)組的every()方法實(shí)踐,具有一定的參考價值,感興趣的可以了解一下2024-03-03獲取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱實(shí)例(推薦)
下面小編就為大家?guī)硪黄@取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱實(shí)例(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06