CSS的框架有哪些

今天小編給大家分享的是CSS框架的詳細(xì)介紹，相信大部分人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，話(huà)不多說(shuō)，一起往下看吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信平臺(tái)小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了金塔免費(fèi)建站歡迎大家使用！

專(zhuān)注于 CSS 的框架

讓我們先從一些專(zhuān)注于 CSS 的框架開(kāi)始。你將找到所有類(lèi)型的布局和UI元素來(lái)自己構(gòu)建項(xiàng)目的基礎(chǔ)。有些甚至可能包含一些 JavaScript 來(lái)幫你處理更復(fù)雜的功能。

Tailwind CSS

Tailwind與其他框架的區(qū)別在于它沒(méi)有任何預(yù)構(gòu)建的UI組件。相反，它更專(zhuān)注于程序本身，CSS類(lèi)可以幫助你在構(gòu)建網(wǎng)站方面領(lǐng)先一步。尺寸、顏色和定位等元素對(duì)它來(lái)說(shuō)才是關(guān)鍵。

官網(wǎng)：https://tailwindcss.com

Bulma

Bulma是圍繞CSS Flexbox構(gòu)建的，是一個(gè)免費(fèi)的開(kāi)源框架。你會(huì)發(fā)現(xiàn)它有許多易于定制的UI元素。它是模塊化的，這意味著你可以只導(dǎo)入所需的元素 —— 如列或按鈕。

官網(wǎng)：https://bulma.io/

Picnic CSS

Picnic CSS 是一個(gè)超輕量級(jí)的框架，壓縮后小于10KB。它具有基于Flexbox的網(wǎng)格布局以及大量的UI元素，可以快速啟動(dòng)項(xiàng)目。你甚至可以找到一個(gè)簡(jiǎn)單的導(dǎo)航欄和模態(tài)窗口。

官網(wǎng)：https://picnicss.com/

Materialize

Google 的 Material Design 的粉絲肯定喜歡 Materialise。該框架基于流行的設(shè)計(jì)語(yǔ)言，包括大量基于 CSS 和 JavaScript 的元素。它聚焦于微交互，以使用戶(hù)界面更加友好。值得注意的是，Materialise 還支持自定義主題。

官網(wǎng)：https://materializecss.com/

Pure.css

Pure.css在壓縮后僅為3.8KB，以移動(dòng)優(yōu)先的理念為中心。它是模塊化的，所以你只需導(dǎo)入要使用的元素包。你還可以下載和安裝許多常用布局。

官網(wǎng)：https://purecss.io/

Base

Base 是一個(gè)模塊化框架，正如它的名字所要說(shuō)明的，其旨在為你的項(xiàng)目提供堅(jiān)實(shí)的基礎(chǔ)。它建立在 Normalize.css 之上，提供易于定制的基本樣式。你在這里找不到任何太多的東西，但這恰恰就就是重點(diǎn)所在！

官網(wǎng)：https://getbase.org/

mini.css

mini.css 是一個(gè)在輕量級(jí)和功能豐富之間取得平衡的包。它確實(shí)達(dá)到了目標(biāo)，壓縮后大約10KB，同時(shí)擁有相當(dāng)多的UI元素和布局。通過(guò)它提供的文檔你可以深入了解這一切是如何運(yùn)作的。

官網(wǎng)：https://minicss.org/

Concise CSS

Concise CSS 提供了一個(gè)基于實(shí)用程序的框架來(lái)使設(shè)計(jì)師“杜絕臃腫”，它可以讓你快速入門(mén)。如果你需要UI元素的話(huà)可以通過(guò)單獨(dú)的套件去添加它們。

官網(wǎng)：https://concisecss.com/

Mobi.css

Mobi.css 非常?。▔嚎s后僅 2.6KB），主要針對(duì)移動(dòng)用戶(hù)。但是其內(nèi)置主題和插件系統(tǒng)還有很大的增長(zhǎng)空間。如果基本樣式不能滿(mǎn)足你的要求，可以在框架之上以模塊化的方式進(jìn)行構(gòu)建。

官網(wǎng)：http://getmobicss.com/

Spectre.css

Spectre.css 被稱(chēng)為“輕量級(jí)、響應(yīng)式、現(xiàn)代化”，是一個(gè)基于Flexbox的框架。你會(huì)發(fā)現(xiàn)一些基本的布局、UI和排版風(fēng)格。此外還有許多功能組件（手風(fēng)琴、彈出窗口、標(biāo)簽等）都是用純CSS構(gòu)建的?？偟膩?lái)說(shuō)，它做到了很好的平衡性。

官網(wǎng)：https://picturepan2.github.io/spectre/

超越CSS范疇的框架

有些場(chǎng)景需要更強(qiáng)大的框架 —— 下面這些選擇可以幫你完成這項(xiàng)工作。它們不僅提供了大量基于 CSS 的元素，而且還可以找到基于 HTML 和 JavaScript 的功能。從某種意義上來(lái)說(shuō)，幾乎就像是從完成了一半的模板開(kāi)始構(gòu)建你的網(wǎng)站，你可以通過(guò)自定義來(lái)滿(mǎn)足自己的需求。

Bootstrap

Bootstrap 是由 Twitter 創(chuàng)建的，因?yàn)樗S護(hù)得很好，并提供了一個(gè)龐大的預(yù)建功能庫(kù)，所以它幾乎無(wú)處不在。雖然你可以使用默認(rèn)設(shè)置，但 Bootstrap 也非常易于擴(kuò)展。通過(guò)添加主題或自定義組件能夠幫你進(jìn)一步開(kāi)發(fā)個(gè)性化的 UI。

官網(wǎng)：https://getbootstrap.com/

Foundation

Foundation 是模塊化組件庫(kù)，可以為你量身打造自己的項(xiàng)目。它有各種各樣的選項(xiàng) —— 從響應(yīng)式布局到動(dòng)畫(huà)。 Foundation 也有自己的 JavaScript 插件API。最后，該框架附帶了ARIA屬性和角色，用于構(gòu)建具有可訪(fǎng)問(wèn)性的站點(diǎn)。

官網(wǎng)：https://foundation.zurb.com/

Semantic UI

有時(shí)框架可以包含僅對(duì)其原始開(kāi)發(fā)人員有意義的 CSS 類(lèi)名。Semantic UI 希望通過(guò)使用自然語(yǔ)言來(lái)改變敘述。邏輯是很容易遵循的，應(yīng)該可以加快開(kāi)發(fā)速度。除語(yǔ)言之外，你還可以找到超過(guò) 3,000 個(gè)主題變量 —— 根據(jù)需要，你可以編輯或刪除所有這些變量。

官網(wǎng)：https://semantic-ui.com/

依賴(lài)框架更好地工作

完成你的項(xiàng)目需要做很多工作 —— 這就是框架存在的原因。它為我們處理了一些繁重的工作，并為之后的一切提供了基礎(chǔ)。

看完上述內(nèi)容，你們對(duì)css框架有進(jìn)一步的了解嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。

分享題目：CSS的框架有哪些
當(dāng)前地址：http://muchs.cn/article18/gjsjgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站改版、網(wǎng)站制作、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)