hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - CSS - 正文 请牢记本站网址www.sosophp.cn

13个加快开发效力的当代CSS框架【css教程】

2019-12-28CSS搜搜PHP网35°c
A+ A-
本文将向你引见一系列顶级CSS框架。有些人大概听说过,也大概对有些人是全新的。但它们都供应了种种有效的先进功用,可以改良你的事情流程。入手下手吧!

专注于 CSS 的框架

让我们先从一些专注于 CSS 的框架入手下手。你将找到统统范例的规划和UI元素来自身构建项目的基础。有些以至大概包含一些 JavaScript 来帮你处置惩罚更庞杂的功用。

Tailwind CSS

Tailwind与其他框架的区分在于它没有任何预构建的UI组件。相反,它更专注于程序自身,CSS类可以协助你在构建网站方面抢先一步。尺寸、色彩和定位等元素对它来讲才是症结。

官网:https://tailwindcss.com

Bulma

Bulma是缭绕CSS Flexbox构建的,是一个免费的开源框架。你会发明它有许多易于定制的UI元素。它是模块化的,这意味着你可以只导入所需的元素 —— 如列或按钮。

官网:https://bulma.io/

Picnic CSS

Picnic CSS 是一个超轻量级的框架,紧缩后小于10KB。它具有基于Flexbox的网格规划以及大批的UI元素,可以疾速启动项目。你以至可以找到一个简朴的导航栏和模态窗口。

官网:https://picnicss.com/

Materialize

Google 的 Material Design 的粉丝一定喜好 Materialise。该框架基于盛行的设想言语,包含大批基于 CSS 和 JavaScript 的元素。它聚焦于微交互,以运用户界面越发友爱。值得注意的是,Materialise 还支撑自定义主题。

官网:https://materializecss.com/

Pure.css

Pure.css在紧缩后仅为3.8KB,以挪动优先的理念为中间。它是模块化的,所以你只需导入要运用的元素包。你还可以下载和装置许多经常使用规划。

官网:https://purecss.io/

Base

Base 是一个模块化框架,正如它的名字所要申明的,其旨在为你的项目供应坚固的基础。它建立在 Normalize.css 之上,供应易于定制的基础款式。你在这里找不到任何太多的东西,但这恰好就就是重点地点!

官网:https://getbase.org/

mini.css

mini.css 是一个在轻量级和功用雄厚之间获得均衡的包。它确切达到了目的,紧缩后约莫10KB,同时具有相当多的UI元素和规划。经由过程它供应的文档你可以深切相识这统统是怎样运作的。

官网:https://minicss.org/

Concise CSS

Concise CSS 供应了一个基于实用程序的框架来使设想师“根绝痴肥”,它可以让你疾速入门。假如你须要UI元素的话可以经由过程零丁的套件去增加它们。

官网:https://concisecss.com/

Mobi.css

Mobi.css 异常小(紧缩后仅 2.6KB),重要针对挪动用户。然则其内置主题和插件体系另有很大的增进空间。假如基础款式不能满足你的请求,可以在框架之上以模块化的体式格局举行构建。

官网:http://getmobicss.com/

Spectre.css

Spectre.css 被称为“轻量级、相应式、当代化”,是一个基于Flexbox的框架。你会发明一些基础的规划、UI和排版作风。另外另有许多功用组件(手风琴、弹出窗口、标签等)都是用纯CSS构建的。总的来讲,它做到了很好的均衡性。

官网:https://picturepan2.github.io/spectre/

逾越CSS领域的框架

有些场景须要更壮大的框架 —— 下面这些挑选可以帮你完成这项事情。它们不仅供应了大批基于 CSS 的元素,而且还可以找到基于 HTML 和 JavaScript 的功用。从某种意义上来讲,险些就像是从完成了一半的模板入手下手构建你的网站,你可以经由过程自定义来满足自身的需求。

Bootstrap

Bootstrap 是由 Twitter 建立的,由于它保护得很好,并供应了一个巨大的预建功用库,所以它险些无处不在。虽然你可以运用默认设置,但 Bootstrap 也异常易于扩大。经由过程增加主题或自定义组件可以帮你进一步开发个性化的 UI。

官网:https://getbootstrap.com/

Foundation

Foundation 是模块化组件库,可认为你量身打造自身的项目。它有林林总总的选项 —— 从相应式规划到动画。 Foundation 也有自身的 JavaScript 插件API。末了,该框架附带了ARIA属性和角色,用于构建具有可接见性的站点。

官网:https://foundation.zurb.com/

Semantic UI

偶然框架可以包含仅对其原始开发人员有意义的 CSS 类名。Semantic UI 愿望经由过程运用自然言语来转变叙说。逻辑是很轻易遵照的,应当可以加快开发速率。除言语以外,你还可以找到凌驾 3,000 个主题变量 —— 根据须要,你可以编辑或删除统统这些变量。

官网:https://semantic-ui.com/

依靠框架更好地事情

完成你的项目须要做许多事情 —— 这就是框架存在的缘由。它为我们处置惩罚了一些沉重的事情,并为以后的统统供应了基础。

以上就是13个加快开发效力的当代CSS框架的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
13个加快开发效力的当代CSS框架【css教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: