摘要:規范名稱定義,便于維護。譬如關于的定義在格式化的中會聲明為,而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和,其中的最新版本是的最新版本。
隨著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的源碼是基于最流行的CSS預處理腳本-Less和Sass開發的。你可以采用預編譯的CSS文件快速開發,也可以從源碼定制自己需要的樣式。例如。如果你頁面上有很多同樣的效果。只需要寫一個效果類。然后讓用到的地方去繼承他。就不需要再寫了。
第二:一個框架,多種設備
你的網站和應用能在Bootstrap的幫助下通過同一個代碼快速,有效設配手機,平板、PC設備,這都是CSS媒體查詢的功勞。
第三:特效齊全
Bootstrap提供了全面、美觀的文檔、可以找到關于HTML元素,HTML和CSS組件、jQuery插件方面的所有詳細文檔。
Bootstrap組件:Bootstrap中包含了豐富的Web組件,根據這些組件,可以快速的搭建一個漂亮、功能完備的網站。比如:下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。
JavaScript插件Bootstrap自帶了13個jQuery插件,這些插件為Bootstrap中的組件賦予了“生命”。其中包括:模式對話框、標簽頁、滾動條、彈出框等。 還有更重要的一點是,Bootstrap是完全開源的。它的代碼托管,開發,維護都依賴GITHub平臺。
其次:
我們看下使用Bootstrap的利弊:
提高開發效率。
規范名稱定義,便于維護。
規范項目開發流程 d)css代碼更清晰、簡單。html代碼更合理。
大規模項目中可以減少用戶下載
缺點:學習成本提高。你需要了解整個框架,需要閱讀框架的文檔。
css框架對于一個小項目等頁面來說很臃腫。框架中可能有大部分你用不到的代碼。
可能會無法幫助你的技術提高。太依賴框架,以至于很難排除bug。包括框架中本身就帶的bug。
選擇自己需要的框架與開發框架都很痛苦。寫到后面發現越來越不靈活,越來越臃腫。
1、頁面外部引用樣式過多。譬如關于ul的margin定義,在格式化的css中會聲明為0,而在基本樣式的css中又可能會聲明margin:5px 10px;所以在Yslow中會出現多次定義。
2、組件復用性的考量。譬如表單定義的css中定義了所有表單的修飾,而假定在注冊這個頁面中只是需要這個css的百分之三十。那是否應切割出去那不要的百分之七十?綜合以上的二個問題,個人認為解決的方式便是封裝,讓該有的有,不該有的沒有。盡量減少http連接數和css的大小。但如果徹底是這樣做的話,css的復用性又會變得很差,后期手工的封裝會很痛苦。
3、到底該不該支持em?可見如要支持em,最大的目的是為了在瀏覽器中可以根據用戶的分辨率大小自由縮放,對于擁有超大顯示器的用戶與小顯示器的用戶是非常有用的。可是在采集我們用戶的瀏覽器數據后,發現分辨處于這二端的用戶非常少,可想而知,為這部分的用戶多花比正常開發一倍以上的時間顯然是件不劃算的事情,當然這是個建議,我們也希望能使用em帶給用戶最好的感受。
基于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.其他大量改進
總結:如果有前端技術的博友們,應該都不是問題。初學者是有點難度的。文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/29116.html
摘要:規范名稱定義,便于維護。譬如關于的定義在格式化的中會聲明為,而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和,其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行,我們的WEB頁面不僅需要更人性化的設計理念,而且需要更酷的頁面特效和用戶體驗。作為開發者,我們需要了解一些寶貴的CSS UI開源框架資源,它們可以幫助我...
摘要:規范名稱定義,便于維護。譬如關于的定義在格式化的中會聲明為,而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和,其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行,我們的WEB頁面不僅需要更人性化的設計理念,而且需要更酷的頁面特效和用戶體驗。作為開發者,我們需要了解一些寶貴的CSS UI開源框架資源,它們可以幫助我...
摘要:寫在前面金三銀四又到了一年一度的跳槽季相信大家都在準備自己面試筆記我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結方便自己復習詳細內容會在之后一一對應地補充上去有些在我的個人主頁筆記中也有相關記錄這里暫且放一個我的面試知識點目錄大家 寫在前面: 金三銀四, 又到了一年一度的跳槽季, 相信大家都在準備自己面試筆記, 我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結,方便自...
摘要:寫在前面金三銀四又到了一年一度的跳槽季相信大家都在準備自己面試筆記我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結方便自己復習詳細內容會在之后一一對應地補充上去有些在我的個人主頁筆記中也有相關記錄這里暫且放一個我的面試知識點目錄大家 寫在前面: 金三銀四, 又到了一年一度的跳槽季, 相信大家都在準備自己面試筆記, 我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結,方便自...
摘要:平凡之路前端發展了十幾年,現在幾乎到達頂峰的速度了,近兩年推出的框架層出不窮,早已不是一統江湖了。模板和數據分離也好,狀態和表現分離也好,我越來越體會到分是為了合這條平凡之路,還會頻繁的發展和融合下去。 一直想總結下自己摸打滾爬的前端經歷,3年,從一個極討厭前端的人,變成一個吃前端飯碗的人。沒有人帶過我,跌跌撞撞的緩慢前進,但我很喜歡分享,喜歡一起進步,這會是我以后一直樂意做的事情。 ...
閱讀 2473·2021-11-16 11:45
閱讀 2443·2021-10-11 10:59
閱讀 2251·2021-10-08 10:05
閱讀 3813·2021-09-23 11:30
閱讀 2369·2021-09-07 09:58
閱讀 789·2019-08-30 15:55
閱讀 772·2019-08-30 15:53
閱讀 1922·2019-08-29 17:00