你應該知道的9個優秀的CSS框架

2021-02-20 程序猿

來自：碼農網

本文連結：http://www.codeceo.com/article/9-css-framework.html
本文作者：碼農網 – 小峰

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

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，如果你在使用NodeBB, 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可以分分鐘搞定。

●輕鬆實現多列布局，並且可以指定任意的寬度

還有很多優秀的CSS框架，我們正在為大家努力收集，希望這些CSS框架資源對你有所幫助。

來自：碼農網

本文連結：http://www.codeceo.com/article/9-css-framework.html
本文作者：碼農網 – 小峰

網際網路創業的時代，創業更具人文氣息。聚最經典的IT創業技巧，最頂尖的商界精英交流平臺。

●本文編號864，以後想閱讀這篇文章直接輸入864即可。

●本文分類「前端」、「CSS」，搜索分類名可以獲得相關文章。

●輸入m可以獲取到全部文章目錄

●輸入r可以獲取到熱門文章推薦

●輸入f可以獲取到全部分類名稱

相關焦點

  • 15 個優秀的響應式 CSS 框架
    本文匯總了一些優秀的響應式 Web 設計 HTML 和 CSS 框架。這些框架都是開源的並免費的。對響應式 Web 框架進行比較並不那麼容易。有的框架適合設計更快、更精簡網站的某些功能，而有些可能提供了大量功能、插件和附加組件，但是可能體積會比較龐大並且上手較難。1. Bootstrap
  • 9個用於web前端開發的CSS開源框架
    css是任何網頁中最重要的，根據維基百科的記錄，它甚至可以被稱為全球資訊網三大基礎技術之一，但它也最容易被人遺忘的部分之一。本文將與你探討9款流行的、功能強大且開源的框架，讓你的css開發得以輕鬆構建精緻的網絡前端。
  • 8個強大的基於Bootstrap的CSS框架
    做過前端開發的小夥伴們應該對Bootstrap不會陌生，它是由Twitter推出的開源CSS框架，其中包含了很多Web前端開發的工具包和應用組件
  • 9 個用於前端 Web 開發的開源 CSS 框架 | Linux 中國
    它基於 MIT 許可證，所以（和這個列表中的所有框架一樣）你也可以加入並貢獻。如果你想要一個輕量級的 CSS 框架，它更接近於自己編寫 CSS，但又能幫助你建立一個漂亮的網頁，可以試試 Pure.css。Pure 是一個輕量級的 CSS 框架，它的體積很小。它是由 Yahoo 開發的，在 BSD 許可證下開源。
  • 12 個可用的小型 CSS 框架
    你可能用不到很多大型 UI 框架中的大部分功能，如BootStrap，特別是當你在開發小型、簡單的項目的時候，你需要的只是儘快的啟動並能運行它
  • 在 Vue.js 中集成 CSS 框架
    /node_modules/bootstrap/dist/css/bootstrap.min.css';import './../node_modules/bootstrap/dist/js/bootstrap.min.js';如果你的程序構建失敗，應該安裝 popper.js 依賴項。之後應該就不會報錯了。
  • 這幾個CSS概念你了解嗎?
    然而隨著前端突飛猛進的編進，諸如element，ant design等優秀的ui庫出現，在對比中感到審美疲勞。言歸正傳，css近年來了也催生了蠻多新的解決方案，比如 CSS Modules、styled-components（css in js ）、Functional CSS、CSS 原子類、CSS沙盒等等❞1.
  • 譯文:你應該知道的11個微前端框架
    Single SPA 將自己定義為：微前端的JavaScript框架。簡而言之，它將生命周期運用到了每一個應用程式。每個應用程式都可以響應url路由事件，並且必須知道如何從DOM引導，安裝和卸載自身。傳統SPA和Single SPA應用程式之間的主要區別在於它們必須能夠與其他應用程式共存，並且它們各自沒有自己的HTML頁面。
  • 5 個精緻的 CSS 框架,你都知道麼?| 碼雲周刊
    CSS 框架是一個軟體，它為你的 HTML 開發提供了許多選項以供使用，可能使得你開發網站或 web 程序更快速更簡單。
  • 15個國外最流行的CSS框架
    本文將介紹15個國外最流行的CSS框架，希望對您有所幫助。CSS框架通常指的是一些CSS文件的集合，這些文件包括網頁的基本布局、表單樣式、網格或簡單結構、以及樣式重置。例如，typography.css是基本排版規、grid.css是基於網格的布局、layout.css通常的布局，包括form.css for是表單樣式等等，本文將介紹15個國外最流行的CSS框架，僅供參考。 雖然對於小的Web開發項目來說，CSS框架並不一定適用，但是對於規模較大的團隊開發項目而言，CSS框架不僅能加快設計開發速度，而且還能有效解決網站改版中帶來的諸多麻煩和問題。
  • 10個頂級的CSS UI開源框架
    作為開發者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我們更快更好地實現一些現代化的界面，包括一些行動裝置的網頁界面風格設計。本文分享了10個頂級的CSS UI開源框架，有幾個確實不錯，一起來看看。
  • 為自己的團隊定製 CSS 框架
    https://cssstats.com/stats/?，怎麼跟你上面講的不太一樣？甚至官網上的示例都是這樣一串 class，是不是你在過度解讀 Tailwind CSS，夾帶了私貨？還會擔心重名（於是我們又引入了 css module），所以很可能你會寫出來這樣一個 class：if (status === 'FAIL') { return <CloseCircleFilled
  • 你應該知道的 9 款流行 Web 框架及其優缺點
    這其中，Web 框架更是提升工作效率的「利器」。但因為可選的 Web 框架非常多，如何選擇也是一件令人頭疼的事情。本文列出了9款目前比較流行的 Web 框架，並對優缺點進行分析，希望能對大家有所幫助。優點：Rails 具有強大的命令行界面，通過幾個簡單的命令就能在新的應用上啟動和運行。Rails 已經存在很長時間了，並且廣泛被使用，網絡上有很多關於它的教程。Rails 簡單易用，即便是複雜的問題，也能相對快速解決。
  • 為什麼使用Tailwind Css框架?
    Why Tailwind CSShttps://tailwindcss.com/Tailwind CSS 其實就是把在現代工程化框架裡把原子 CSS 做到極致的一個 CSS 框架。那個時代提倡所謂的「關注點分離」，HTML 的 class 應該有自己的語義，不應該把樣式或者邏輯附在上面。不過隨著時代的發展，在組件化流行的今天我們其實已經並不怎麼關心 HTML 的語義（甚至那都不是 HTML，叫 JSX），語義化的功能已經被組件所取代了。對於每一個 div 標籤，我們關心的其實只有他的樣式。在這種背景下原子 CSS 就顯得很有用了。
  • CSS 框架 Bulma 教程
    一、簡介Bulma 框架最大的特點，就是簡單好用。所有樣式都基於class，只需為 HTML 元素指定class，樣式立刻生效。 <a>Login</a>上面代碼中，a 元素只需加上幾個class，就會出現一個主色調（is-primary）的大（is-large）按鈕。
  • 收藏,7個常用的CSS框架網站-下
    今天為大家介紹的這7個常用Css框架的網站，為你提供了全網最全的Css框架開發工具，是你編程學習的便捷工具包！
  • 有了這9款前端CSS開源框架,經理不再說我做得醜了!
    本文將與你探討9款流行的、功能強大且開源的框架，讓你的css開發得以輕鬆構建精緻的網絡前端。1、Bootstrap   Bootstrap無疑是最受歡迎的css框架，它是最早的web前端框架之一。  Bootstrap的Github儲存庫中，已經擁有超過19000的提交和1100個貢獻者。基於MIT執照，你也可以加入它們做出屬於自己的貢獻。（與文中所有的框架一樣）。
  • 5種你未必知道的JavaScript和CSS交互的方法
    我們的網頁中都有.js文件和.css文件，但這並不意味著CSS和js是獨立不能交互的。下面要講的這五種JavaScript和CSS共同合作的方法你也許未必知道！用JavaScript獲取偽元素(pseudo-element)屬性大家都知道如何通過一個元素的style屬性獲取它的CSS樣式值，但能獲取偽元素(pseudo-element)的屬性值嗎？
  • 推薦給開發者的20個優秀PHP框架
    PHP語言有著飛速的發展，它可能已經不像你記憶中的那樣，不再有複雜的程序式代碼和龐大的系統，重生的PHP有著齊備的功能、支持面向對象、命名空間、以及逐步增多的可復用代碼庫。所以，你現在趕上了PHP最好的時光，可以更好地學習PHP，增強你的能力。下面推薦給你在2015年值得使用的20款優秀PHP框架。　　1.
  • 作為Web前端開發者,不可不知的幾個前端框架
    各大巨頭又紛紛把技術轉向HTML5和CSS3，各種企業級框架如雨後春筍般湧現。那麼今天就給大家介紹幾個在web界比較優秀的前端框架。Twitter出品的Bootstrap在業界是非常受歡迎的，以致於有很多前端框架都在其基礎上開發，如我們熟悉的WeX5就是在Bootstrap源碼基礎上優化而來的。我相信大多數接觸過前端開發的同學多少都了解過這個優秀的前端框架。