前端开发必备的1个CSS框架

常言道:工欲善其事,必先利其器,项目紧,框架还是很有必要的。

1. Bootstrap

最初被称为Twitter Blueprint的Bootstrap,是作为内部团队使用的工具而创建的。它是最著名的前端框架之一。自公开发布以来,Bootstrap的使用率逐年攀升。

Bootstrap提供了报警、按钮、轮播、下拉式菜单、以及表单等设计模板。借助Bootstrap的移动优先(mobile-first)功能,您可以轻松地创建响应式布局,进而保证在横跨多个设备上的设计一致性。

2. Skeleton

Skeleton号称“简单的响应式样板”。由于此框架只有大约400行代码,因此它更适合于小型项目,以及开发人员需要创建轻量级内容的应用场景。

由于布局简单,Skeleton对于那些刚开始使用前端框架的人来说,是一个不错的选择。当然,也正是缺少CSS设计模板、预处理器、以及整体功能,受限的Skeleton不太适合大型的项目。

3. ZURB Foundation

如果您正在寻找一种响应迅速的前端框架,那么ZURB Foundation就比较适合。该框架将允许您为所有的设备创建各种生产环境的代码和原型。通过支持具有“准系统结构(barebone structure)”的流行框架,ZURB Foundation让用户能够使用简单的方法及其入门模板,来快速生成产品原型。由于提交量不少于14,000次,而且贡献者超过了940名,因此ZURB在GitHub上也有着大量的支持。目前,《华盛顿邮报》和《国家地理》等知名网站都使用的是该框架。

4. UI Kit

UI Kit以具有高度可定制的轻量级元素而闻名。它的各种模板能够让您轻地松构建各类Web界面。UI Kit的安装包里包含了CSS、HTML和JavaScript文件、以及Sublime Text和Atom编辑器的软件包。另外,它还提供了30多种模块化的组件,用户可以对其进行混合与匹配,以实现多种功能。也就是说,您不必反复搜索那些标记和类名。

与Bootstrap和Foundation等其他框架不同,UI Kit并非使用12列网格设置,而是将其布局分为了弹性、网格和宽度三个部分。当然,由于缺乏资源,该框架更适合于那些具有丰富经验的开发人员。

5. Bulma

作为最常用的框架之一,Bulma得到了超过15万名开发人员的支持。它是基于Flexbox的免费开源框架之一。由于Bulma框架仅完全能够满足开发响应式网站的最低要求,因此它对于初学者来说十分容易上手。另外,得益于在GitHub上有着庞大的用户社区,Bulma具有良好的技术支持。

6. Materialize

该前端CSS框架是根据Google的设计规范创建的。Materialize带有易于使用的IZ列网格,以便很好地用于布局设计。它的程序包中包括有按钮、卡片、表格、图标、以及许多其他可供按需使用的组件。此外,您还可能用到的功能包括:拖出式移动菜单、涟漪效果动画、以及SASS mixins等。而且,Materialize可以在任何类型的设备上被使用。

7. Semantic UI

由于是一款较新的框架,因此Semantic UI在代码中使用到了自然语言,而且备受初学者的钟爱。它的继承系统(inheritance system)带有一个高级的主题变量,为您提供了设计时的完全自由度。

由于自带有大量的第三方软件库,因此在使用Semantic UI时,您不必调用其他的库,便可以让Web开发的过程更加便捷。这也是许多初学者和经验丰富的开发人员喜欢它的原因所在。

8. Tailwind CSS

Tailwind CSS与其他框架的不同之处在于,它的软件包并没有预建UI组件。该框架更关注于实用性。它包含有各种专注于颜色、大小和位置的CSS类。Tailwind适合于那些不满足于预设组件,但希望能够完全自由地定制Web设计的开发人员。

9. Picnic CSS

该框架非常轻巧,其压缩后的代码不到10KB。同时,Picnic CSS还带有基于Flexbox的网格布局和许多UI元素。您可以使用它们来启动自己的Web开发项目。另外,Picnic的模式窗口和导航栏,也对初学者非常友好。

10. Ionic

该开源的移动UI框架,可以让用户在不更改代码库的情况下,开发出适用于Android和iOS原生的,以及具有网络高性能的应用。Ionic带有直观的UI组件,可协助用户加快网站或应用程序的开发过程。由于提供了卓越的原生功能和速度,Ionic可以与社区、主流分析平台、身份验证服务、插件以及其他集成平台,很好地配合使用。

11. Pure.css

该框架专注于移动优先的理念。由于Pure.css是模块化的,因此您可以轻松地按需导入元素包。同时,您还可以获取它的各种可供下载与安装的布局。以轻便闻名的Pure.css框架,在压缩后只有3.8KB。

12. mini.css

mini.css同样提供全面的功能和轻巧的框架。虽然它在压缩后只有10KB,但仍然可以提供丰富的布局和UI元素。如果您想对它的工作原理做进一步了解,那么请查阅它的联机文档。

13. Base

如果您的主要任务是为所有的应用程序和Web开发项目打下坚实的基础,那么您应该尝试一下此模块化的框架。作为号称“坚如磐石”的响应框架,Base基于Normalize.css提供了基本的可自定义样式。您可以按需用它来实现简单的应用。

14. Concise CSS

Concise CSS也是一款简单且实用的框架。该框架结构紧凑、明快、且无需额外添加。当然,如果您需要UI元素的话,也可以通过单独的工具包来轻松地进行追加。

15. Mobi.css

压缩后的Mobi.css仅为2.6KB,它是目前您可以找到的最小的框架之一。Mobi的优势在于速度,尤其是在针对移动设备的应用场景中。由于Mobi.css内置了主题和插件系统,而且可以按需扩展,因此用户可以采用模块化的方法,在其基础上进行构建。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/358955.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言杂记1

C语言杂记 注意signed int 与 unsigned int 之间的比较,与运算因为当int 型变量为-1时很可能被升级成无符号整型,就导致取反1这种运算的产生,出现无法控制的很大的数。 malloc(strlen(str))绝对错误地语句,考虑字符串需要1. NULL …

python 小说分析_谁还没看过几本金庸小说?用Python分析一下当年最爱看的主角是谁...

jieba用起来非常简单,短短几行代码就完成了分词工作(下图),可是...仔细一看发现哪里不对了“段誉”作为一个姓名没有被单独分出来,而是和其他一些动词连在一起,另外也有一些角色名字被拆分成了两个甚至更多的单词,例如…

【APICloud系列|13】移动端适配通揽

一、为什么要移动端适配? 一般情况下设计稿的设计师按照 375 的尺寸设计,然而,在现在移动终端(就是手机)快速更新的时代,每个品牌的手机都有着不同的物理分辨率,这样就会导致,每台设备的逻辑分辨率也不尽相同,此时 375 的设计稿,如果想要还原那基本是不可能了,因为如…

初级程序员应该怎么办?

你现在工作迷茫?不防看看这几条建议 01、吃透一门编程语言 这个技能看起来似乎没有必要强调,毕竟程序员不懂一种编程语言也说不过去啊。我之所以再次强调是怕你“贪心”,以为技多不压身就拼了命的学很多种编程语言。 有个大二的学生就曾经问我:“你好呀,老哥,有个问题…

存根类 测试代码 java_有关为旧版代码创建存根的更多信息–测试技术7

存根类 测试代码 java在我的上一个博客中 ,我谈到了如何处理行为不佳的不可测试的 (1) SitePropertiesManager 类,以及如何通过提取接口来创建存根。 但是,如果由于旧类的源代码已被锁定在第三方JAR文件中而无法访问它…

skywalking使用方法_skywalking 6.2配置相关和使用

1、关于日志和项目名配置: 日志可在探针agent.config里面配置也可以在外面配置 在外面配置方式为: -javaagent:/data/path/skywalking-agent.jarlogging.file_nameagent_passport.log,logging.dir/data/applogs/skyagent/ -Dskywalking.agent.service_namepassport由于是docker…

【APICloud系列|14】xcode下载地址

下载地址:https://developer.apple.com/download/more/ 这个是使用苹果Mac下载xcode用于上架appstore打包的软件。 Windows的Xcode:在PC上安装Xcode的5种方法 参考帖子:https://blog.csdn.net/qq_36666115/article/details/86485305

kail利用msf工具对MS12-020漏洞进行渗透测试

kail利用msf工具对MS12-020漏洞进行渗透测试 MS12-020全称Microsoft Windows远程桌面协议RDP远程代码执行漏洞 kail利用msf工具对MS12-020漏洞进行渗透测试: 实验环境: 工具:metasploit 靶机两台:windows 7sp1和kali2020 攻…

float在python中的书写形式错误的是_在Python3.7.1中,编写简单的GAN时,“TypeError:”float“对象不能解释为整数”错误...

我对Python和编程是全新的。我试图编写一个简单的GAN来使用Keras数据集(参见下面的教程超链接)。我收到两个警告,然后是一个错误:TypeError: float object cannot be interpreted as an integer.任何帮助都将不胜感激。在详细信息:Python 3.7…

将25k行C#转换为Java的经验教训

由于各种原因,我最近完成了一个将复杂的财务应用程序从C#转换为Java的项目。 港口的原因大部分是非技术性的,相反,这是有关企业的一项战略举措。 这是一次有趣的经历,我在此过程中吸取了一些经验教训,可以…

Spark K-Means

K-Means(K均值) 介绍 K-Means是被应用的最广泛的基于划分的聚类算法,是一种硬聚类算法,属于典型的局域原型的目标函数聚类的代表。算法首先随机选择k个对象,每个对象初始地代表一个簇的平均值或者中心。对于剩余的每个…

【APICloud系列|30】苹果MAC电脑取消辅助功能-语音识别

方法:快捷键 “commandF5”即可。 原因是不小心出现这个辅助功能,导致我进入苹果商店输入密码不能正常切换大小写,快捷键 “commandF5”就可以正常使用

kail利用msf工具对ms17-010(永恒之蓝)漏洞入侵渗透Win7

kail利用msf工具对ms17-010(永恒之蓝)漏洞入侵渗透Win7 前言: 提到操作系统漏洞,大家肯定听说过耳熟能详的永恒之蓝(MS17-010)了,他的爆发源于WannaCry勒索病毒的诞生。 该病毒是不法分子利用…

mysql 删除版本信息_linux 删除mysql

写作背景明天项目上线,今天晚上在客户的机房进行网站的部署,在安装mysql的时候出现了一个问题,就是死活安装不上,说已经存在mysql,最后分析错误信息才知道,原来是centos 6.3 自带安装了mysql 5.1,因为我是通…

微信连接WIFI并关注公众号的方法

分享一个改造路由器来实现微信连wifi关注公众已经成为一种高效的引流方法。 前提是先有自己的路由器、认证的公众号(服务号或订阅号)、开通过门店小程序。 1.进入公众号后以此选择“微信连wifi”→“设备管理”→详情,拿到公众号的三个参数…

《你的灯亮着吗》读后感1

《你的灯亮着吗》这本书主要讲了几个实际的问题,在还没读这本书时对这本书有一定的了解,所以在读这本书时也是有一定的目的,在这本书中可以学到好多的东西,在作者分析问题和解决问题中我们可以找到好多新奇的思路。 我已读这本书有…

kali利用msf工具对ms08-067漏洞入侵靶机(win xp2)

kali利用msf工具对ms08-067漏洞入侵靶机(win xp2) 漏洞简介 MS08-067漏洞将会影响Windows 2000/XP/Server 2003/Vista/Server 2008的各个版本,甚至还包括测试阶段的Windows 7 Pro-Beta。 如果用户在受影响的系统上收到特制的 RPC 请求&…

tomcat mysql如何优化_Tomcat+Mysql高并发配置优化讲解

1.Tomcat优化配置(1)更改Tomcat的catalina.bat将java变成server模式,增大jvm的内存,在文件开始位置增加setJAVA_OPTS-server -Xms1024m -Xmx2048m -Xss512K -XX:PermSize128m-XX:MaxPermSize256msetCATALINA_OPTS-server -Xms512m -Xmx512m如下图&#x…

DEV控件中GridView中的复选框与CheckBox实现联动的全选功能

最初的界面图如图1-1(全选框ID: cb_checkall DEV控件名称:gcCon ): 要实现的功能如下图(1-2 1-3 1-4)及代码所示: 图1-2 图1-3 图1-4 O(∩_∩)O哈哈~ 不要着急哦,看清…

CSDN转载别人文章的操作

说在前面 对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高。有时候看到特别好的博客想转载,但是不能一个字一个字的敲,一张图片一张图片的截图,这样怪麻烦也浪费时间。这时候我们就想转载别人的博客,那…