<samp id="cs8kc"><wbr id="cs8kc"></wbr></samp><samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
<tr id="cs8kc"><xmp id="cs8kc"><samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
<samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
<rt id="cs8kc"></rt>
<tr id="cs8kc"><xmp id="cs8kc">
<tt id="cs8kc"></tt>
<samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
技術干貨 > 文章詳情

Web前端丨你應該知道的9個優秀的CSS框架

jack_li3年前 web前端

        前端開發是一項非常繁瑣的工作,你不僅需要擁有和別人不一樣的審美觀和設計觀,而且需要了解諸如HTML、CSS、JavaScript等錯綜復雜的技術,因此選擇一些優秀的CSS框架或許可以幫助你大大提高工作效率。本文向你推薦了9個還不錯的CSS框架,希望對你有所幫助。


u=941648250,1720115496&fm=21&gp=0.jpg


        1、Twitter開源杰作 – Bootstrap


        Bootstrap是一款由Twitter推出的開源CSS框架,它的核心是由一系列用于Web前端開發的工具包組成。Bootstrap基于HTML、CSS和JavaScript,是一款非常適合敏捷Web開發的CSS框架,Bootstrap同時也是Github上最熱門的開源項目之一。


        Bootstrap的特點


        強大的開發團隊:Bootstrap由Twitter的設計師Mark Otto和Jacob Thornton合作開發,Bootstrap開發團隊也是國際上公認最優秀的前端開發團隊之一。

        極簡的框架:Bootstrap的設計非常簡單,這就意味著,無論你是高級的前端設計師,還是普通的程序員,都能夠很快地掌握Bootstrap的開發流程和開發方式。跨設備、跨瀏覽器最初設想的Bootstrap只支持現代瀏覽器,不過新版本已經能支持所有主流瀏覽器,甚至包括IE7。從Bootstrap 2開始,提供對平板和智能手機的支持。

        完美的響應式設計:Bootstrap支持響應式布局,可以智能識別客戶端瀏覽器的類型,從而構造適應當前設備前端布局,這一切都是全自動的。
        支持HTML5和CSS3:Bootstrap支持所有的HTML5標簽和CSS3屬性。
        使用LESS構建動態樣式:當傳統的枯燥CSS寫法止步不前時,LESS技術橫空出世。LESS使用變量、嵌套、操作、混合編碼,幫助用戶花費很小的時間成本,編寫更快、更靈活的CSS。


        2、扁平化UI開發包 – Flat UI


        Flat UI是一款基于Bootstrap的扁平化前端UI工具包,Flat UI的組件外觀設計非常清新和漂亮,Flat UI的組件包含按鈕,輸入框,組合按鈕,復選框,單選按鈕,標簽,菜單,進度條和滑塊等精美的元素。


        Flat UI的特點


        包含很多基本的用戶界面,同時也可以靈活創建更多自定義的UI界面組件
        包含豐富的矢量圖標和符號
        自定義調色板
        基于HTML / CSS、JavaScript的布局


        3、語義化前端開發框架 – Semantic UI


        Semantic UI 是一款語義化的前端開發框架,Semantic是圍繞自然交流語言而架構的,這使得開發更加直觀(易于理解)。跟Bootstrap不同,Semantic在功能特性上、布局設計上、用戶體驗上更貼近自然語言。


        Semantic UI的特點


        文檔和演示非常完善
        易于學習和使用
        配備網格布局
        支持 Sass 和 LESS 動態樣式語言
        有一些非常實用的附加配置,例如inverted類。
        對于社區貢獻來說是比較開放的。
        有一個非常好的按鈕實現,情態動詞,和進度條。
        在許多功能上使用圖標字體。


        4、Metro風格的CSS框架 – BootMetro


        和Flat UI一樣,BootMetro同樣也是一款基于Bootstrap的CSS框架,BootMetro的最大特點在于它是一款Win 8 Metro風格的CSS框架。Metro風格的優勢在于界面簡潔平滑,UI元素簡單,加載速度快,并且有不錯的視覺效果。


        BootMetro的特點


        基于強大的Twitter Bootstrap,框架的靈感源于Metro UI CSS
讓用戶更專注于網站的內容,因為Metro風格可以更加突出網頁的主要內容。
完全免費,和Bootstrap一樣,BootMetro的使用也是非常簡單。


        5、雅虎開源杰作 – Pure


        Pure也是一款很出色的CSS框架,之前分享的Bootstrap是由Twitter出品的,而Pure是來自雅虎的。盡管從UI界面效果上來說,Pure沒有Bootstrap那樣精美,但Pure是純CSS實現的,因此非常小巧,整個框架壓縮后只有5.7k左右。


        Pure的特點


        最大的特點就是框架基于純CSS,無任何JavaScript代碼,渲染速度比較快。
        由Yahoo出品,技術上應該不存在太大問題。
        框架十分小巧,壓縮后僅5.7k。
        組件也很豐富,包括表格、表單、按鈕、表、導航等。
        CSS類的標識十分簡單,因此在使用Pure的過程中代碼會比較友好。


        6、Win 8 Metro風格的CSS框架 – Metro UI CSS


        Metro UI CSS 是一款Win 8 Metro風格的CSS框架,同時,之前介紹過的那款BootMetro也是基于Metro UI CSS的,我們可以利用Metro UI CSS構建很棒的Metro風格應用。


        Metro UI CSS 的特點


        Win 8 Metro風格,界面清爽平滑
        學習非常簡單
        源代碼很小巧
        基于MIT開源協議


        7、免費的Bootstrap主題包 – Bootswatch


        Bootswatch 是一款基于 Bootstrap 的免費主題包,其中包含了豐富的 Bootstrap 主題,你可以下載安裝這些主題的 CSS 文件,實現各種各樣漂亮的 Bootstrap 主題風格。


        Bootswatch 的特點


        安裝非常方便:只需要下載對應主題的CSS文件,替換原來的文件即可,無需安裝二進制文件。
        完全開源:基于MIT開源協議,你也可以前往Bootswatch的開源社區進行問題討論。
        模塊化:可以更加靈活地控制和改變樣式。
        插件化:已經為各個平臺提供了API,如果你在使用BootSnap,那么就更加方便了。
        持續更新中:更新和維護是一款優秀開源軟件的標志。


        8、集成在jQuery UI上的Bootstrap – jQuery UI Bootstrap


        jQuery UI Bootstrap是一個將jQuery UI集成到Bootstrap上的CSS框架,jQuery UI Bootstrap不僅可以利用jQuery UI強大的控件庫,同時還可以享受Bootstrap那種清新自然的主題風格,所以越來越多的前端開發者都在使用jQuery UI Bootstrap。


        jQuery UI Bootstrap的特點


        基于jQuery UI,因此控件功能非常強大,可以使用全部的jQuery UI控件。
        基于Bootstrap,不同控件有了統一的外觀。
        免費開源,你可以很方便地下載和使用。


        9、輕量級CSS布局排版框架 – EZ-CSS


        EZ-CSS是一款輕量級的CSS布局排版框架,EZ-CSS和其他的CSS框架有很大的不同,因為它很小,才1kb。而且EZ-CSS的擴展性很強,對瀏覽器兼容性較為友好,利用EZ-CSS,你可以快速的實現較為復雜的網頁布局排版。


        EZ-CSS的特點


        最大的特點就是框架很小,才1K,因此可以將其集成到任何相應的樣式表中。
簡化排版,原先需要很復雜的CSS代碼才實現的排版布局,EZ-CSS可以分分鐘搞定。
輕松實現多列布局,并且可以指定任意的寬度。


原文來自i7758

推薦閱讀:4個web前端職業發展路徑 

            你必知的10個web前端面試題

推薦學習:Web企業直通班帶你玩轉Web前端

——————

版權保護聲明:本文僅代表作者觀點,麥子學院可能會進行刪節修改,但不代表麥子學院的官方立場。我們極其尊重并保護原創作品的版權,若原作者有任何疑問,請聯系微信號:chengxuyuan8。 

3

登錄 后參與討論

沒有更多評論了

免費領取價值1888元求職寶典!

客服熱線 400-862-8862

回到頂部

天天撸一撸