首页 » Plane UI » Plane UI 基础教程
网站地图

Plane UI 安装使用

使用方法

  1. <link rel="stylesheet" type="text/css" href="dist/css/planeui.min.css" />
  2. <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
  3. <script type="text/javascript" src="./dist/js/planeui.js"></script>

兼容IE8~9 的用法（基本的内容渲染或不完全的支持，不过还是建议不考虑兼容 IE8）：

  1. <link rel="stylesheet" type="text/css" href="./dist/css/planeui.min.css" />
  2.  
  3. <!--[if (gte IE 9) | !(IE)]><!-->
  4. <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
  5. <!--<![endif]-->
  6.  
  7. <!--[if lt IE 9]>
  8. <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
  9. <script type="text/javascript" src="./dist/js/planeui.patch.ie8.min.js"></script>
  10. <![endif]-->
  11.  
  12. <!--[if lt IE 10]>
  13. <script type="text/javascript" src="./dist/js/planeui.patch.ie9.min.js"></script>
  14. <![endif]-->
  15.  
  16. <script type="text/javascript" src="./dist/js/planeui.js"></script>

网格布局

尺码分辨率描述
xs*所有屏幕（或手机竖屏）
sm640px及以上手机横屏等
md768px及以上平板电脑（iPad）竖屏等
lg992px及以上平板电脑（iPad）横屏、PC 机、笔记本等
xl1200px及以上PC 机、笔记本等
xxl1400px及以上PC 机、笔记本等

整体布局及限定最大宽度：

  1. <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 等分网格布局示例

  1. <div class="pui-grid">
  2.     <div class="pui-row">
  3.         <div class="pui-grid-xs-3"></div>
  4.         <div class="pui-grid-xs-3"></div>
  5.         <div class="pui-grid-xs-3"></div>
  6.         <div class="pui-grid-xs-3"></div>
  7.     </div>
  8.     <div class="pui-row">
  9.         <div class="pui-grid-xs-4"></div>
  10.         <div class="pui-grid-xs-4"></div>
  11.         <div class="pui-grid-xs-4"></div>
  12.     </div>
  13.     <div class="pui-row">
  14.         <div class="pui-grid-xs-3"></div>
  15.         <div class="pui-grid-xs-6"></div>
  16.         <div class="pui-grid-xs-3"></div>
  17.     </div>
  18.     <div class="pui-row">
  19.         <div class="pui-grid-xs-5"></div>
  20.         <div class="pui-grid-xs-7"></div>
  21.     </div>
  22. </div>

Flexbox 弹性布局示例

（不支持 IE9 及以下版本）

  1. <div class="pui-flexbox pui-flex-column">
  2.     <header>标题栏</header>
  3.     <div class="pui-flex">内容层</div>
  4.     <footer>底栏</footer>
  5. </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、依赖项目

    2、参考项目

    3、构建工具

注：以上所有项目排名不分先后。