当前位置:首页 > html教程 > 正文内容

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

搜教程4年前 (2019-12-28)html教程136
本文将向你引见一系列顶级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网别的相干文章!

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/16772.html

标签: CSS
分享给朋友:

“13个加快开发效力的当代CSS框架【html5教程】,CSS” 的相关文章

网页背景怎样设置为纯黑色css款式【html5教程】,纯黑色css样式,网页背景

网页背景怎样设置为纯黑色css款式【html5教程】,纯黑色css样式,网页背景

本篇文章给人人带来的内容是关于网页背景怎样设置为纯黑色css款式,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 css背景色彩属性款式单词:background-color 代码简写 background 设置网页背景色彩background-color能够直接运用back...

CSS的table-cell属性怎样运用【html5教程】,table-cell

table-cell是像内联元素和块元素一样用display属性来表现的显现情势,能够用来创建表格和Excel单元格,本篇文章就来给人人分享一下关于CSS中table-cell属性的运用方法。 我们先来引见一下table-cell属性的基本概念 table-cell是display属性的...

CSS规划中经常使用的笔墨排版相干属性详解【html5教程】,CSS布局,文字排版

本篇文章给人人带来的内容是关于CSS规划中经常运用的笔墨排版相干属性详解,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 CSS规划中经常运用的笔墨排版相干属性详解 一、设定笔墨字体、色彩、大小等运用font等。 font-style设定斜体,比方font-style: i...

CSS3新增了哪些属性【html5教程】,CSS3

CSS3新增了哪些属性【html5教程】,CSS3

本日将和人人引见CSS3中的新增属性,具有肯定的参考价值,愿望对人人有所协助 最新版本的CSS3的涌现使Web设想更轻易,虽然并不是一切浏览器都支撑它。然则因为技术上的敏捷变化,CSS3的模块化的规范化使如今一切浏览器都在实行完全的CSS3支撑,置信不久以后CSS3以及HTML5 将成为收集的...

CSS3中什么是媒体查询【html5教程】,媒体查询

CSS3中什么是媒体查询【html5教程】,媒体查询

本文章将为人人分享的是有关CSS3中媒体查询的引见,有肯定的参考价值,愿望对人人的进修有肯定的协助。 如今相应式网页设想愈来愈遭到迎接了,然则相应式设想同时也带来了一些本身题目,比方加载迟缓等题目。然则如今已经有了要领去很好的处置惩罚这个题目了,我们可以运用媒体查询要领去处置惩罚款式顺应差别装...

CSS3中怎样完成图片翻转【html5教程】,CSS3

CSS3中怎样完成图片翻转【html5教程】,CSS3

本日将和人人分享怎样运用CSS3中的学问来制造一个图片翻转的功用,CSS3中图片翻转结果重要经由过程设置transition过渡动画以及transform扭转动画来配合完成 【引荐课程:CSS3教程】 案例剖析 图片翻转结果的思绪:先运用position定位将两个图片堆叠到一同同时还须...