{"id":19490875,"url":"https://github.com/pandao/planeui","last_synced_at":"2025-04-25T19:32:07.897Z","repository":{"id":24453353,"uuid":"27856045","full_name":"pandao/planeui","owner":"pandao","description":"The Modern HTML5 Cross-Device Responsive Front-end UI Framework.","archived":false,"fork":false,"pushed_at":"2015-06-28T07:07:49.000Z","size":3812,"stargazers_count":207,"open_issues_count":7,"forks_count":45,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-04-04T02:41:26.559Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pandao.github.io/planeui/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pandao.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-11T05:42:42.000Z","updated_at":"2025-02-08T07:47:26.000Z","dependencies_parsed_at":"2022-08-22T08:20:19.712Z","dependency_job_id":null,"html_url":"https://github.com/pandao/planeui","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2Fplaneui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2Fplaneui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2Fplaneui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pandao%2Fplaneui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pandao","download_url":"https://codeload.github.com/pandao/planeui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250882637,"owners_count":21502341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T21:14:39.739Z","updated_at":"2025-04-25T19:32:07.169Z","avatar_url":"https://github.com/pandao.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plane UI\r\n\r\nThe Modern HTML5 Cross-Device Responsive Front-end UI Framework.\r\n\r\nPlane UI，意为纸飞机或平面 UI，即 P(aper) (P)lane UI 的缩写，是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。\r\n\r\n![](https://pandao.github.io/planeui/poster.jpg)\r\n\r\n#### 目录\r\n\r\n- [设计理念](#设计理念)\r\n- [主要特性](#主要特性)\r\n- [下载与安装](#下载与安装)\r\n- [使用方法](#使用方法)\r\n- [组件列表](#组件列表)\r\n- [依赖项目及致谢](#依赖项目及致谢)\r\n- [兼容支持情况](#兼容支持情况)\r\n- [开发文档](#开发文档)\r\n- [更新日志](#更新日志)\r\n- [Lisence](#Lisence)\r\n\r\n#### 设计理念\r\n\r\n- 简单通用，高效开发；\r\n- 模块化，低耦合；\r\n- 移动优先，优雅降级；\r\n- 美学追求，交互为本；\r\n- 持续演进，拥抱新技术；\r\n\r\n#### 主要特性\r\n\r\n- 基于 HTML5 + CSS3：移动优先，快速开发跨终端响应式 Web 应用；\r\n- 交互美学：扁平化风格，借鉴和溶合 Google Material Design 部分设计风格及规范，同时又有自己的风格；\r\n- 按需定制：样式语义化，使用 SCSS 预处理样式；\r\n- 基于 jQuery：更高的开发效率，方便使用各种 jQuery 插件；\r\n- 丰富的组件：自带大量常用的组件，并向 Web Components 演化；\r\n- 组件模块化：遵循 CommonJS 规范，支持 AMD / CMD 各种模块化加载工具；\r\n- 命名空间： CSS 前缀式命名空间；\r\n- 优雅降级：向下“基本”兼容到 IE8 ；\r\n\r\n\u003e 注：IE8 下支持基本的内容和样式渲染和部分交互。\r\n\r\n#### 下载与安装\r\n\r\nGithub 下载：[https://github.com/pandao/planeui/archive/master.zip](https://github.com/pandao/planeui/archive/master.zip)\r\n\r\nBower 安装：\r\n\r\n\tbower install planeui\r\n\r\n#### 使用方法\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"dist/css/planeui.min.css\" /\u003e\r\n\u003cscript type=\"text/javascript\" src=\"./js/jquery-2.1.1.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript type=\"text/javascript\" src=\"./dist/js/planeui.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n兼容IE8~9 的用法（基本的内容渲染或不完全的支持，不过还是建议不考虑兼容 IE8）：\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./dist/css/planeui.min.css\" /\u003e\r\n\r\n\u003c!--[if (gte IE 9) | !(IE)]\u003e\u003c!--\u003e\r\n\u003cscript type=\"text/javascript\" src=\"./js/jquery-2.1.1.min.js\"\u003e\u003c/script\u003e\r\n\u003c!--\u003c![endif]--\u003e\r\n\r\n\u003c!--[if lt IE 9]\u003e\r\n\u003cscript type=\"text/javascript\" src=\"./js/jquery-1.11.3.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript type=\"text/javascript\" src=\"./dist/js/planeui.patch.ie8.min.js\"\u003e\u003c/script\u003e\r\n\u003c![endif]--\u003e\r\n\r\n\u003c!--[if lt IE 10]\u003e\r\n\u003cscript type=\"text/javascript\" src=\"./dist/js/planeui.patch.ie9.min.js\"\u003e\u003c/script\u003e\r\n\u003c![endif]--\u003e\r\n\r\n\u003cscript type=\"text/javascript\" src=\"./dist/js/planeui.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n响应式网格布局：\r\n\r\n| 尺码    |     分辨率    |                 描述                |\r\n|---------|:------------:|-------------------------------------|\r\n| xs      |   *          | 所有屏幕（或手机竖屏）                |\r\n| sm      | 640px及以上  |  手机横屏等                           |\r\n| md      | 768px及以上  |  平板电脑（iPad）竖屏等               |\r\n| lg      | 992px及以上  |  平板电脑（iPad）横屏、PC 机、笔记本等 |\r\n| xl      | 1200px及以上 |  PC 机、笔记本等                     |\r\n| xxl     | 1400px及以上 |  PC 机、笔记本等                     |\r\n\r\n整体布局及限定最大宽度：\r\n\r\n```html\r\n\u003cdiv class=\"pui-layout pui-layout-fixed\"\u003e\u003c/div\u003e\r\n```\r\n\r\n\u003e `.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`，通过媒体查询当前的屏幕宽度响应对应最大宽度。\r\n\r\n12 等分网格布局示例：\r\n\r\n```html\r\n\u003cdiv class=\"pui-grid\"\u003e\r\n\t\u003cdiv class=\"pui-row\"\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-3\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-3\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-3\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-3\"\u003e\u003c/div\u003e\r\n\t\u003c/div\u003e\r\n\t\u003cdiv class=\"pui-row\"\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-4\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-4\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-4\"\u003e\u003c/div\u003e\r\n\t\u003c/div\u003e\r\n\t\u003cdiv class=\"pui-row\"\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-3\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-6\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-3\"\u003e\u003c/div\u003e\r\n\t\u003c/div\u003e\r\n\t\u003cdiv class=\"pui-row\"\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-5\"\u003e\u003c/div\u003e\r\n\t\t\u003cdiv class=\"pui-grid-xs-7\"\u003e\u003c/div\u003e\r\n\t\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nFlexbox 弹性布局示例（不支持 IE9 及以下版本）：\r\n\r\n```html\r\n\u003cdiv class=\"pui-flexbox pui-flex-column\"\u003e\r\n\t\u003cheader\u003e标题栏\u003c/header\u003e\r\n\t\u003cdiv class=\"pui-flex\"\u003e内容层\u003c/div\u003e\r\n\t\u003cfooter\u003e底栏\u003c/footer\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n\u003e 更多示例及用法详见：[https://pandao.github.io/planeui/](https://pandao.github.io/planeui/)\r\n\r\n#### 组件列表\r\n\r\n- Arrow\r\n- Article\r\n- App Layout\r\n- Animations\r\n- Basic\r\n- Badge / Label / Tag\r\n- Button\r\n- Button Sheet\r\n- Breadcrumb\r\n- Card\r\n- Colors (Material Design Colors)\r\n- Color Picker (Material Design Color Picker)\r\n- Checkbox\r\n- Close Button\r\n- Comment\r\n- Dialog\r\n- Date Picker（未实现）\r\n- Fonts\r\n- Font sizer\r\n- File Input\r\n- FullPage\r\n- Flexbox Layout\r\n- Forms\r\n- Form Validator\r\n- Grid Layout\r\n- Gallery （未实现）\r\n- Icons （自带 Font Awesome 和 手机淘宝图标库两套图标库）\r\n- Image\r\n- List\r\n- ListView\r\n- Loading\r\n- Menu\r\n- Menubar\r\n- Menu Accordion\r\n- Mask\r\n- Notice\r\n- Pagination\r\n- Progress\r\n- Rating\r\n- Radio Button\r\n- Ring Progress\r\n- Search\r\n- Slider（未实现）\r\n- Switch Button\r\n- ScrollTo (Anchor + Container)\r\n- SideNav / Side slide (Off Canvas Plus)\r\n- Tab\r\n- Texts\r\n- Table\r\n- Top10\r\n- Tooltip\r\n- Timeline\r\n- Time Picker（未实现）\r\n- Uploader（未实现）\r\n- Z-Depth (Material Design Z-Depth)\r\n\r\n#### 依赖项目及致谢\r\n\r\n##### 1、依赖项目\r\n\r\n- [jQuery](https://jquery.org/ \"jQuery\")  `jQuery License`\r\n- [Normalize.css](http://necolas.github.io/normalize.css/ \"Normalize.css\") `未知 License`\r\n- [Font Awesome](http://fontawesome.io/ \"Font Awesome\")  `GPL License \u0026 CC BY 3.0 License`\r\n- [手机淘宝图标库](http://www.iconfont.cn/ \"手机淘宝图标库\") `未知 License`\r\n- [HTML5 Shiv](https://github.com/aFarkas/html5shiv \"HTML5 Shiv\")  `MIT and GPL2 licenses`\r\n- [Respond](https://github.com/scottjehl/Respond/ \"Respond\") `MIT License`\r\n- [Selectivizr](http://selectivizr.com/ \"Selectivizr\") `MIT License`\r\n- [Modernizr](http://modernizr.com/ \"Modernizr\") `MIT License`\r\n- [Flexie](http://flexiejs.com/ \"Flexie.js\") `MIT License`\r\n- [Prefixes.scss](https://github.com/pandao/prefixes.scss \"Prefixes.scss\") `MIT License`\r\n\r\n##### 2、参考项目\r\n\r\n- [Bootstrap](http://getbootstrap.com/ \"Bootstrap\")\r\n- [Foundation](http://foundation.zurb.com/ \"Foundation\")\r\n- [Semantic UI](http://semantic-ui.com/ \"Semantic UI\")\r\n- [Amaze UI](http://amazeui.org/ \"Amaze UI\")\r\n- [UI Kit](http://www.getuikit.net/ \"UI Kit\")\r\n- [Google Material Design](http://www.google.com/design/)\r\n\r\n#### 3、构建工具\r\n\r\n- [Gulp.js](http://gulpjs.com/)\r\n- [Sass/Scss](http://www.sass-lang.com/) `MIT License`\r\n\r\n\u003e 注：以上所有项目排名不分先后。\r\n\r\n#### 兼容支持情况\r\n\r\nPlane UI 对浏览器进行了分级支持 (GBS，即 Graded Browser Support，分级浏览器支持)，优先支持那些支持 HTML 5、CSS3、ES5 / 6 等新特性的现代浏览器。\r\n\r\n\u003e A \u003e B \u003e C \u003e D\r\n\r\n|  级别 |                      浏览器                    |              描述             |\r\n|-------|-----------------------------------------------|:-----------------------------:|\r\n| A 级  | Webkit 系（Chrome 31+、Safari 7+、Opera 29+等） |      完整的渲染和交互支持      |\r\n|       | Android 4.2+ 浏览器（自带、UC、QQ、Chrome等）   |                               |\r\n|       | iOS Safari 7.1+                               |                               |\r\n|       | Firefox 31+                                   |                               |\r\n|       | 桌面 IE10+、WP 8.1+ IE                         |                               |\r\n| B 级  | iOS 6.x 浏览器                                 |  基本完整的支持，部分支持不完善  |\r\n|       | Android 2.3.x+ 浏览器                          |                               |\r\n|       | Firefox 旧版本                                 |                               |\r\n|       | Opera 旧版本（非 Chromium）                    |                                |\r\n|       | IE9、WP IE                                    |                                |\r\n| C 级  | IE8、Android 2.2.x+ 浏览器                     |   部分基本支持，基本内容的渲染   |\r\n| D 级  | 其他浏览器（IE6~7等）                           |     部分基本支持或不支持        |\r\n\r\n兼容支持测试：\r\n\r\n- iOS 7+\r\n- Android 4.2+\r\n- Chrome (latest)\r\n- Firefox (latest)\r\n- Safari 6+\r\n- Opera (latest)\r\n- Internet Explorer 9+\r\n\r\n\u003e IE 9 下因为它本身不支持部分 HTML5 特性（例如动画、Flexbox等）的原因，不太完美的支持。\r\n\u003e IE 8 只是提供最基本的兼容支持，有部分不支持、不完善或兼容性差。\r\n\u003e IE 7 及以下版本、Window Phone 等平台或浏览器均未测试。\r\n\r\n其他环境的兼容测试：\r\n\r\n- Node-webkit\r\n- Phonegap\r\n\r\n\u003e 注：由于条件的限制，Android 和 iOS 的其他版本暂时未测试，欢迎使用者反馈和提交 Bug。\r\n\r\n#### 开发文档\r\n\r\n整理中...\r\n\r\n#### 更新日志\r\n\r\n[查看更新日志](https://github.com/pandao/planeui/blob/master/CHANGE.md)\r\n\r\n#### License\r\n\r\nThe MIT License ([MIT](https://github.com/pandao/planeui/blob/master/LICENSE))\r\n\r\nPlane UI 遵循 [MIT](https://github.com/pandao/planeui/blob/master/LICENSE) 协议，无论个人还是公司，都可以免费自由使用。\r\n\r\nCopyright (c) 2014~2015 Pandao\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandao%2Fplaneui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpandao%2Fplaneui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandao%2Fplaneui/lists"}