隨着CSS3和HTML5的流行,我們的WEB頁面不僅需要更人性化的設計理念,而且需要更酷的頁面特效和用戶體驗。作為開發者,我們需要了解一些寶貴的CSS UI開源框架資源,它們可以幫助我們更快更好地實現一些現代化的界面,包括一些移動設備的網頁界面風格設計。接下來就是要詳解Bootstrap框架:
首先,我們要知道為什么使用框架的原理。CSS框架是一系列CSS文件的集合體,包含了基本的元素重置,頁面排版,網絡布局,表單樣式,通用規則等代碼塊。使用CSS框架,可以簡化工作,提高工作效率。
然后,我們為什么要使用Bootstrap框架,而不使用其他CSS框架?
原因大概如下:
隨着H5,CSS3的快速火起來,用戶體驗尤為重要,移動設備用戶的龐大,不容小視,而恰恰,Bootstrap就是為移動設備而開發的框架。他雖然是以移動設備優先,傾向於Mobile,但不是移動設備框架。
它由規范的CSS,JavaScript插件構成,其最大的優勢是響應式布局,CSS媒體查詢(Media Query)的功勞,使得開發者可以方便的讓網頁無論在台式機,手機上都獲得最佳的體驗。
1.抽象出常用的css樣式,高再可用性,高移植性
2.有固有的定義,詳細的文檔及開發特點
3.高兼容性,可以兼容流行的瀏覽器
4.以css為主,但不一定全部是css,可能有一些js(或者其他)腳本用於兼容瀏覽器
Bootstrap框架可以分為三類:
第一:預處理腳本:
Bootstrap的源碼是基於最流行的CSS預處理腳本-Less和Sass開發的。你可以采用預編譯的CSS文件快速開發,也可以從源碼定制自己需要的樣式。例如。如果你頁面上有很多同樣的效果。只需要寫一個效果類。然后讓用到的地方去繼承他。就不需要再寫了。
第二:一個框架,多種設備
你的網站和應用能在Bootstrap的幫助下通過同一個代碼快速,有效設配手機,平板、PC設備,這都是CSS媒體查詢的功勞。
第三:特效齊全
Bootstrap提供了全面、美觀的文檔、可以找到關於HTML元素,HTML和CSS組件、jQuery插件方面的所有詳細文檔。
Bootstrap組件: Bootstrap中包含了豐富的Web組件,根據這些組件,可以快速的搭建一個漂亮、功能完備的網站。比如:下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。
JavaScript插件Bootstrap自帶了13個jQuery插件,這些插件為Bootstrap中的組件賦予了“生命”。其中包括:模式對話框、標簽頁、滾動條、彈出框等。 還有更重要的一點是,Bootstrap是完全開源的。它的代碼托管,開發,維護都依賴GITHub平台。
其次:
我們看下使用Bootstrap的利弊:
優點:
a) 提高開發效率。
b) 規范名稱定義,便於維護。
c) 規范項目開發流程 d)css代碼更清晰、簡單。html代碼更合理。
e) 大規模項目中可以減少用戶下載
缺點:
a) 學習成本提高。你需要了解整個框架,需要閱讀框架的文檔。
b)css框架對於一個小項目等頁面來說很臃腫。框架中可能有大部分你用不到的代碼。
c)可能會無法幫助你的技術提高。太依賴框架,以至於很難排除bug。包括框架中本身就帶的bug。
d) 選擇自己需要的框架與開發框架都很痛苦。寫到后面發現越來越不靈活,越來越臃腫。
1、頁面外部引用樣式過多。譬如關於ul的margin定義,在格式化的css中會聲明為0,而在基本樣式的css中又可能會聲明margin:5px 10px;所以在Yslow中會出現多次定義。
2、組件復用性的考量。譬如表單定義的css中定義了所有表單的修飾,而假定在注冊這個頁面中只是需要這個css的百分之三十。那是否應切割出去那不要的百分之七十?綜合以上的二個問題,個人認為解決的方式便是封裝,讓該有的有,不該有的沒有。盡量減少http連接數和css的大小。但如果徹底是這樣做的話,css的復用性又會變得很差,后期手工的封裝會很痛苦。
3、到底該不該支持em?可見如要支持em,最大的目的是為了在瀏覽器中可以根據用戶的分辨率大小自由縮放,對於擁有超大顯示器的用戶與小顯示器的用戶是非常有用的。可是在采集我們用戶的瀏覽器數據后,發現分辨處於這二端的用戶非常少,可想而知,為這部分的用戶多花比正常開發一倍以上的時間顯然是件不划算的事情,當然這是個建議,我們也希望能使用em帶給用戶最好的感受。
PS:博主認為,如果有前端技術的博友們,應該都不是問題。初學者是有點難度的。
基於Bootstrap版本的使用:
目前使用較廣的是版本2和3,其中2的最新版本是2.3.2,3的最新版本3.3.5。
版本4最主要變化是:
1.從Less遷移到Sass
(為什么?因為那么Sass和LESS是一樣的,只是CSS預處理器中的一種而以。但是Less相對來說,語法太過嚴格,所以使用的人也就少了。)
2.改進網格系統
3.缺省彈性框
4.支持 Dropped wells,thumbnails,and panels for cards
5.合並所有HTML resets到一個新的模塊中:Reboot 全新自定義選項
6.不再支持IE8
7.重寫所有的JavaScript插件
8.改進工具提示和popovers的自動定位
9.改進文檔
10.其他大量改進
ps:寫博的原因,首先是想讓自己的思維有一個系統的順序,其次想通過博文與各位博友們溝通交流,大家有的問題提出來可以互相溝通交流下~