Plane UI 安装使用
使用方法
<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>组件列表
- Arrow
- Article
- App Layout
- Animations
- Basic
- Badge / Label / Tag
- Button
- Button Sheet
- Breadcrumb
- Card
- Colors (Material Design Colors)
- Color Picker (Material Design Color Picker)
- Checkbox
- Close Button
- Comment
- Dialog
- Date Picker（未实现）
- Fonts
- Font sizer
- File Input
- FullPage
- Flexbox Layout
- Forms
- Form Validator
- Grid Layout
- Gallery （未实现）
- Icons （自带 Font Awesome 和 手机淘宝图标库两套图标库）
- Image
- List
- ListView
- Loading
- Menu
- Menubar
- Menu Accordion
- Mask
- Notice
- Pagination
- Progress
- Rating
- Radio Button
- Ring Progress
- Search
- Slider（未实现）
- Switch Button
- ScrollTo (Anchor + Container)
- SideNav / Side slide (Off Canvas Plus)
- Tab
- Texts
- Table
- Top10
- Tooltip
- Timeline
- Time Picker（未实现）
- Uploader（未实现）
- Z-Depth (Material Design Z-Depth)
依赖项目及致谢
1、依赖项目
- jQuery
jQuery License - Normalize.css
未知 License - Font Awesome
GPL License & CC BY 3.0 License - 手机淘宝图标库
未知 License - HTML5 Shiv
MIT and GPL2 licenses - Respond
MIT License - Selectivizr
MIT License - Modernizr
MIT License - Flexie
MIT License - Prefixes.scss
MIT License
2、参考项目
3、构建工具
注：以上所有项目排名不分先后。