前端开发是一项非常繁琐的工作,你不仅需要拥有和别人不一样的审美观和设计观,而且需要了解诸如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,如果你在使用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可以分分钟搞定。
  • 轻松实现多列布局,并且可以指定任意的宽度。

在线预览

本文固定链接: http://www.i7758.com/archives/2309.html

你应该知道的9个优秀的CSS框架的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 优秀的CSS框架---bootstrap

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它 由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.现在在网上已经有 ...

  3. 嵌入式程序员应知道的0x10个基本问题

     来源:网络 嵌入式程序员应知道的0x10个基本问题 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)#define SECONDS_PER_YEAR (60 ...

  4. 嵌入式程序员应知道的0x10个C语言Tips

    [1].[代码] [C/C++]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  5. 《Offer一箩筐》求职之前你必须知道的 4 件事!!

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」. 如果觉得 「不错」 的朋友,欢迎 「关注 + 留言 + 分享」,文末有完整的获取链接,您的支持是我前进的最大的动力! Hi~ 这里是 ...

  6. 程序员必须要知道的Hadoop的一些事实

    程序员必须要知道的Hadoop的一些事实.现如今,Apache Hadoop已经无人不知无人不晓.当年雅虎搜索工程师Doug Cutting开发出这个用以创建分布式计算机环境的开源软...... 1: ...

  7. 【转载】在IT界取得成功应该知道的10件事

     在IT界取得成功应该知道的10件事 2011-08-11 13:31:30 分类: 项目管理 导读:前面大多数文章都是Jack Wallen写的,这是他的新作,看来要成为NB程序员还要不停的自我总结 ...

  8. 理工科应该的知道的C/C++数学计算库(转)

    理工科应该的知道的C/C++数学计算库(转) 作为理工科学生,想必有限元分析.数值计算.三维建模.信号处理.性能分析.仿真分析...这些或多或少与我们常用的软件息息相关,假如有一天你只需要这些大型软件 ...

  9. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

随机推荐

  1. window.onload与$.ready的差别

    在做图书管理系统的时候.实用到window.onload(){}方法.可是遇到了一个问题.就是怎么都不运行,究竟是为什么呢?愁了半天.后来经师姐指点改用了$.ready(){}. 在我的浅浅的了解中觉 ...

  2. percona-xtrabackup 文档

    https://www.percona.com/doc/percona-xtrabackup/2.4/index.html

  3. innobackupex 备份实验

    [root@localhost ~]# xtrabackup -v xtrabackup version based Linux (x86_64) (revision id: 45cda89) [ro ...

  4. gamework的使用方法

    翻译来源地址:https://github.com/Kadoba/gamework gamework是控制LOVE2D游戏进程流的一个项目. ↑ 这个是按原文译的, 当初乍看完全不懂, 接下来我来用图 ...

  5. sqlserver 行转列 语文,数学,物理,化学

    数据库查询行转列 1.原数据库值 stdname stdsubject result 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 李四 化学 李四 化学 2.要得到如下表 ...

  6. php连接数据库时候的字符集设置

    最好的办法:设置mysql服务器的字符集,当然也可以通过mysql提供的api来设置运行时的字符集 Ideally a proper character set will be set at the ...

  7. Java去除掉HTML里面所有标签的两种方法——开源jar包和自己写正则表达式

    Java去除掉HTML里面所有标签,主要就两种,要么用开源的jar处理,要么就自己写正则表达式.自己写的话,可能处理不全一些自定义的标签.企业应用基本都是能找开源就找开源,实在不行才自己写…… 1,开 ...

  8. Debian 8 在虚拟环境中安装kivy

    mkvirtualenv kivy 或者按官方教程所说: virtualenv --no-site-packages kivyinstall (kivy)~/pythonvenv ᐅ pip list ...

  9. UITabBarItem编写的时候出现得图片显示异常,和有一些比较忽略的方法总结

    我现在学到可分栏控制器,UITabBarController.我总结了它的层次有,UITabBarController控制并且只有以个UITanBat(他是一个UIIView的子类),UITabBar ...

  10. property在括号中应该怎样写

    property 属性的定义,类似于get set assign: 简单的赋值,不更改索引计数 使用assign是针对基础的数据类型,比如NSinterger,CGFloat和c数据类型(int fl ...