奥门新浦京官方网站8个强大的基于Bootstrap的CSS框架

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件。当然,和jQuery一样,Bootstrap同时也是一个开放式的CSS框架,基于Bootstrap,我们也可以做许多不错的CSS
UI组件。本文就介绍了8个强大的基于Bootstrap的CSS框架,一起来看看。

原创:W3C中文教程(W3Schools.wang)

BootFlat
是一款基于 奥门新浦京官方网站,Bootstrap
的 Flat
UI
组件,跟原生的Bootstrap框架相比,BootFlat提供了更多的页面组件,同时增加了页面布局功能。与Flat
UI相比更为突出的是BootFlat可以帮助你更快速的利用HTML5实现Web App开发。

1、Bootstrap Metro
Dashboard-
基于Bootstrap的后台管理面板


奥门新浦京官方网站 1

这是一款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro
Dashboard的UI是基于Twitter Bootstrap样式的,同时使用了jQuery
1.9.1和jQuery UI组件,非常适合做网站的后台管理系统界面。

作为开发者,我们需要了解一些宝贵的UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计。本文汇总了目前18个公认的世界顶级UI开源框架(附官网、Github以及各自的教程),欢迎大家学习使用。

BootFlat的特点

  • BootFlat是基于bootstrap3.2.0,便于快速的开发web和mobile app的UI框架
  • Bootflat组件基于HTML5和CSS3设计,提供sass文件和多种色值,便于开发者修改
  • Bootflat提供免费的PSD组件文件,便于设计者设计Web网页及mobile app

官方网站:https://github.com/jiji262/Bootstrap_Metro_Dashboard

  1. Bootstrap

BootFlat组件演示实例

BootFlat提供了很多个性化的Web
UI组件,很多都是常用的类型,也有一部分是比较新颖的,比如色块对比组件、个性化switch开关。下面我们来看看这些UI组件。

2、StyleBootstrap-
基于 Bootstrap 的 UI 扩展

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于
HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

色块对比

奥门新浦京官方网站 2

StyleBootstrap是一款基于Bootstrap的开源UI框架,目前基于Bootstrap风格的扩展插件很多,比如Bootswatch、BootMetro等,这些之前我们都有做过介绍。StyleBootstrap应该说是对Bootstrap样式风格的一种扩展,除了一些基本的按钮、表单、菜单之外,StyleBootstrap还设计了功能全面的颜色拾取器,非常不错。

Github:

按钮组

奥门新浦京官方网站 3

官方网站:http://stylebootstrap.info/

中文教程:http://w3schools.wang/bootstrap/bootstrap_tutorial.html

下拉按钮

奥门新浦京官方网站 4

3、BootFlat-
基于HTML5的CSS框架组件

  1. Semantic-ui

气泡提示框

奥门新浦京官方网站 5

BootFlat 是一款基于 Bootstrap 的 Flat UI
组件,跟原生的Bootstrap框架相比,BootFlat提供了更多的页面组件,同时增加了页面布局功能。与Flat
UI相比更为突出的是BootFlat可以帮助你更快速的利用HTML5实现Web App开发。

Semantic 是一个为主题化而设计的UI框架。主要特点:50+ UI 元素;3000 + CSS
变量;3 级变量继承(和 SublimeText 类似);用 em
作为单位构建以实现响应式设计;Flexbox 友好。

菜单

奥门新浦京官方网站 6

更多 BootFlat 组件实例,大家可以前往其官方网站获取更多信息。

官方网站:http://bootflat.github.io/index.html

官网:

4、jQuery Mobile Bootstrap Theme – jQuery移动端主题框架

Github:

jQuery Mobile Bootstrap
Theme是一款基于jQuery和Bootstrap的移动端主题框架,有着非常精美的UI界面和简洁的操作控件。之前介绍过的
jQuery UI Bootstrap 主要是PC端的主题框架,跟jQuery UI
Bootstrap相比,jQuery Mobile Bootstrap
Theme的体积更小,控件更适合移动端的操作习惯。

  1. Foundation

官方网站:https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web
应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。

5、jQuery UI
Bootstrap-
在jQuery UI上集成Bootstrap

官网:

jQuery UI Bootstrap是一个将jQuery UI集成到Bootstrap上的CSS框架,jQuery
UI Bootstrap不仅可以利用jQuery
UI强大的控件库,同时还可以享受Bootstrap那种清新自然的主题风格,所以越来越多的前端开发者都在使用jQuery
UI Bootstrap。

Github:

官方网站:http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/

  1. Materialize

6、Bootswatch-
免费的 Bootstrap 主题包

一个基于 Material Design 的 CSS 框架。

Bootswatch 是一款基于 Bootstrap 的免费主题包,其中包含了丰富的 Bootstrap
主题,你可以下载安装这些主题的 CSS 文件,实现各种各样漂亮的 Bootstrap
主题风格。

官网:

官方网站:https://bootswatch.com/

Github:

7、BootMetro-
基于 Bootstrap 的 Metro 风格 CSS 框架

  1. Material-ui

和Flat
UI一样,BootMetro同样也是一款基于Bootstrap的CSS框架,BootMetro的最大特点在于它是一款Win
8
Metro风格的CSS框架。Metro风格的优势在于界面简洁平滑,UI元素简单,加载速度快,并且有不错的视觉效果。

集成 Google Material 设计的 React 组件。

官方网站:https://github.com/aozora/bootmetro

官网:

8、Flat
UI-
基于 Bootstrap 的扁平化 UI 开发包

Github:

Flat UI是一款基于Bootstrap的扁平化前端UI工具包,Flat
UI的组件外观设计非常清新和漂亮,Flat
UI的组件包含按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块等精美的元素。

  1. Phantomjs

官方网站:https://github.com/designmodo/Flat-UI

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript
API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM
处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 页面自动化
, 网络监测 , 网页截屏 ,以及 无界面测试 等。

对于CSS框架和Bootstrap相关的资源,码农网将进一步为您收集和整理,欢迎继续关注。

官网:

原文链接:codeceo

Github:

作者:码农网 – 小峰

  1. Pure

Pure.css是美国雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目。

官网:

GitHub:

中文教程:

  1. Flat-ui

Flat UI是基于Bootstrap做的Metro化改造,由Designmodo提供。Flat
UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。Flat UI Flat
UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap 实现。

官网:

Github:

  1. Jquery-ui

jQuery UI 是建立在 jQuery JavaScript
库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web
应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI
都是一个完美的选择。

官网:

Github:

  1. React-bootstrap

基于 React 的 Bootstrap 3 组件。

官网:

Github:

  1. Uikit

Uikit 是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。

官网:

GitHub:

中文教程:

  1. Metro-ui-css

Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式.
这组风格被开发成一个独立的基于Bootstrap的解决方案。

官网:

Github:

  1. Iview

iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI
组件库。主要特性:使用单文件的 Vue 组件化开发模式;基于 npm + webpack +
babel 开发,支持 ES2015;高质量、功能丰富;友好的 API
,自由灵活地使用空间;详细、友好的文档,事无巨细。

官网:

Github:

  1. Layui

Layui
是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。

官网:

Github:

  1. Mui

MUI 是一个轻量级的CSS框架,遵循Google的Material Design设计方针。

官网:

Github:

  1. Frozenui

Frozen
UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,
做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。

官网:

Github:

  1. AlloyUI

AlloyUI是一个基于YUI3(JavaScript)的框架,它使用Bootstrap 3(HTML /
CSS)为构建高可扩展应用程序提供了一个简单的API。

官网:

Github:

  1. W3.CSS

W3.CSS是一个响应式的现代CSS框架。W3.CSS比其他CSS框架更小更快(大小仅为29K),比其他CSS框架更容易学习,更易于使用。

教程:http://w3schools.wang/w3css/w3css_tutorial.html

本文由 【W3C中文教程】 发表。转载此文章须经 【W3C中文教程】
同意,并请附上 W3C中文教程 及
原文链接:http://w3schools.wang/report/top-UI-open-source-framework-summary.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注