The Modern HTML5 Cross-Device Responsive Front-end UI Framework.
Plane UI,意为纸飞机或平面 UI,即 P(aper) (P)lane UI 的缩写,是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。
注:IE8 下支持基本的内容和样式渲染和部分交互。
Github 下载:https://github.com/pandao/planeui/archive/master.zip
Bower 安装:
bower install planeui
<link rel="stylesheet" type="text/css" href="dist/css/planeui.min.css" />
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.js"></script>
兼容IE8~9 的用法(基本的内容渲染或不完全的支持,不过还是建议不考虑兼容 IE8):
<link rel="stylesheet" type="text/css" href="./dist/css/planeui.min.css" />
<!--[if (gte IE 9) | !(IE)]><!-->
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.patch.ie8.min.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<script type="text/javascript" src="./dist/js/planeui.patch.ie9.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./dist/js/planeui.js"></script>
响应式网格布局:
尺码 | 分辨率 | 描述 |
---|---|---|
xs | * | 所有屏幕(或手机竖屏) |
sm | 640px及以上 | 手机横屏等 |
md | 768px及以上 | 平板电脑(iPad)竖屏等 |
lg | 992px及以上 | 平板电脑(iPad)横屏、PC 机、笔记本等 |
xl | 1200px及以上 | PC 机、笔记本等 |
xxl | 1400px及以上 | PC 机、笔记本等 |
整体布局及限定最大宽度:
<div class="pui-layout pui-layout-fixed"></div>
.pui-layout-fixed
即限定最大宽度为960px
,其他宽度限定:pui-layout-fixed-980 pui-layout-fixed-1000 pui-layout-fixed-1200 pui-layout-fixed-1360 pui-layout-fixed-1400 pui-layout-fixed-1500 pui-layout-fixed-1600 pui-layout-fixed-1700 pui-layout-fixed-1800
,通过媒体查询当前的屏幕宽度响应对应最大宽度。
12 等分网格布局示例:
<div class="pui-grid">
<div class="pui-row">
<div class="pui-grid-xs-3"></div>
<div class="pui-grid-xs-3"></div>
<div class="pui-grid-xs-3"></div>
<div class="pui-grid-xs-3"></div>
</div>
<div class="pui-row">
<div class="pui-grid-xs-4"></div>
<div class="pui-grid-xs-4"></div>
<div class="pui-grid-xs-4"></div>
</div>
<div class="pui-row">
<div class="pui-grid-xs-3"></div>
<div class="pui-grid-xs-6"></div>
<div class="pui-grid-xs-3"></div>
</div>
<div class="pui-row">
<div class="pui-grid-xs-5"></div>
<div class="pui-grid-xs-7"></div>
</div>
</div>
Flexbox 弹性布局示例(不支持 IE9 及以下版本):
<div class="pui-flexbox pui-flex-column">
<header>标题栏</header>
<div class="pui-flex">内容层</div>
<footer>底栏</footer>
</div>
更多示例及用法详见:https://pandao.github.io/planeui/
jQuery License
未知 License
GPL License & CC BY 3.0 License
未知 License
MIT and GPL2 licenses
MIT License
MIT License
MIT License
MIT License
MIT License
注:以上所有项目排名不分先后。
Plane UI 对浏览器进行了分级支持 (GBS,即 Graded Browser Support,分级浏览器支持),优先支持那些支持 HTML 5、CSS3、ES5 / 6 等新特性的现代浏览器。
A > B > C > D
级别 | 浏览器 | 描述 |
---|---|---|
A 级 | Webkit 系(Chrome 31+、Safari 7+、Opera 29+等) | 完整的渲染和交互支持 |
Android 4.2+ 浏览器(自带、UC、QQ、Chrome等) | ||
iOS Safari 7.1+ | ||
Firefox 31+ | ||
桌面 IE10+、WP 8.1+ IE | ||
B 级 | iOS 6.x 浏览器 | 基本完整的支持,部分支持不完善 |
Android 2.3.x+ 浏览器 | ||
Firefox 旧版本 | ||
Opera 旧版本(非 Chromium) | ||
IE9、WP IE | ||
C 级 | IE8、Android 2.2.x+ 浏览器 | 部分基本支持,基本内容的渲染 |
D 级 | 其他浏览器(IE6~7等) | 部分基本支持或不支持 |
兼容支持测试:
IE 9 下因为它本身不支持部分 HTML5 特性(例如动画、Flexbox等)的原因,不太完美的支持。 IE 8 只是提供最基本的兼容支持,有部分不支持、不完善或兼容性差。 IE 7 及以下版本、Window Phone 等平台或浏览器均未测试。
其他环境的兼容测试:
注:由于条件的限制,Android 和 iOS 的其他版本暂时未测试,欢迎使用者反馈和提交 Bug。
整理中...
The MIT License (MIT)
Plane UI 遵循 MIT 协议,无论个人还是公司,都可以免费自由使用。
Copyright (c) 2014~2015 Pandao
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型