所有属于puyuetianUI的样式都以pk-开头，主内容元素标签建议加 .pk-container （居中，最大宽度1000px）。
网格布局
puyuetianUI使用了12列的响应式网格系统。使用时需在外围容器上添加 .pk-row class，在列上添加 .pk-w-[sm|md]-[1-12] class，然后根据不同的屏幕需求设置不同的宽度。
Class 响应断点区间
pk-w-sm-* 0 - 1000px
pk-w-md-* 1000px +
用法举例：
<div class="pk-row">
<div class="pk-w-sm-12 pk-w-sm-4">小屏宽度100%，大屏宽度33.33333%</div>
<div class="pk-w-sm-12 pk-w-sm-8">小屏宽度100%，大屏宽度66.66666%</div>
</div>效果展示：
小屏宽度100%，大屏宽度33.33333%
小屏宽度100%，大屏宽度66.66666%
按钮元素
按钮元素必须添加 .pk-btn class，然后再进行颜色、大小及圆角的设置。
//颜色 .pk-btn-default - 默认，灰色按钮 .pk-btn-primary - 蓝色按钮 .pk-btn-secondary - 浅蓝色按钮 .pk-btn-success - 绿色按钮 .pk-btn-warning - 橙色按钮 .pk-btn-danger - 红色按钮 //大小 .pk-btn-sm - 小按钮 .pk-btn-md - 默认 .pk-btn-xs - 大按钮 .pk-btn-block - 宽度100% //圆角 .pk-radius-* - 具体参见辅助样式用法举例：
<div> <button class="pk-btn">默认按钮</button> <button class="pk-btn pk-btn-primary">蓝色按钮</button> <button class="pk-btn pk-btn-secondary">浅蓝按钮</button> <button class="pk-btn pk-btn-success">绿色按钮</button> <button class="pk-btn pk-btn-warning">橙色按钮</button> <button class="pk-btn pk-btn-danger">红色按钮</button> <button class="pk-btn pk-btn-primary pk-btn-sm">小按钮</button> <button class="pk-btn pk-btn-primary pk-btn-xs">超小按钮</button> <button class="pk-btn pk-btn-primary pk-radius-4">圆角按钮</button> <button class="pk-btn pk-btn-primary pk-btn-block">块按钮</button> <a class="pk-btn pk-btn-primary" href="#">链接按钮</a> </div>效果展示：
表单元素
支持input、textarea及select装饰。
用法举例：
<div class="pk-row"> <div class="pk-row pk-margin-bottom-10"> <div class="pk-w-sm-4 pk-padding-top-5 pk-text-bold pk-text-right">客户姓名</div> <div class="pk-w-sm-8"> <input type="text" class="pk-textbox" placeholder="你叫啥~" /> </div> </div> <div class="pk-row pk-margin-bottom-10"> <div class="pk-w-sm-4 pk-padding-top-5 pk-text-bold pk-text-right">客户性别</div> <div class="pk-w-sm-8"> <select class="pk-textbox"> <option value="男">男</option> <option value="女">女</option> </select> </div> </div> <div class="pk-row pk-margin-bottom-10"> <div class="pk-w-sm-4 pk-padding-top-5 pk-text-bold pk-text-right">客户介绍</div> <div class="pk-w-sm-8"> <textarea class="pk-textarea pk-width-all" rows="4" placeholder="说说你都会啥~"></textarea> </div> </div> <div class="pk-row"> <div class="pk-w-sm-4"> </div> <div class="pk-w-sm-8"> <button type="button" class="pk-btn pk-btn-primary">提交</button> </div> </div> </div>效果展示：
客户姓名
客户性别
客户介绍
圆角效果只需要添加 .pk-radius-* 即可。
表格元素
.pk-table必须class， .pk-table-bordered表格加边框，pk-width-all表格宽度100%。
用法举例：
<table class="pk-table pk-table-bordered pk-width-all"> <thead> <tr> <th>客户姓名</th> <th>客户性别</th> <th>客户遗言</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>要个金棺材~</td> </tr> <tr> <td>李四</td> <td>女</td> <td>要个男人~</td> </tr> <tr> <td>王二</td> <td>妖</td> <td>投胎到富人家~</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" class="pk-text-center pk-text-sm">*本数据由蒲乐天采集</td> </tr> </tfoot> </table>
| 客户姓名 | 客户性别 | 客户遗言 |
|---|---|---|
| 张三 | 男 | 要个金棺材~ |
| 李四 | 女 | 要个男人~ |
| 王二 | 妖 | 投胎到富人家~ |
| *本数据由蒲乐天采集 | ||
JS相关
框架默认的提示框调用方法：pkalert();
一般用法：
pkalert('我是提示框！！！！！！！！');
带有js命令：
pkalert('点击确定后，会跳转','js:location.href="http://www.hadsky.com"');
带有取消按钮的：
pkalert('确定要死啊？','我是标题','location.href="点了确定后，执行这里"');
辅助Class
简写说明：[_|1|2|3|...] _为空，1/2/3为样式名，...为很多不一一列举
简写举例：.pk-[width|height]-all，则有类：.pk-width-all和.pk-height-all
文本对齐 .pk-text-[left|center|right]
文字大小 .pk-text-[xs|sm|md|lg|xl|xxl|xxxl]
文字颜色 .pk-text-[white|default|primary|secondary|success|danger|warning]
文字粗体 .pk-text-[normal|blod]
徽标样式 .pk-badge
宽高相关 .pk-[width|height]-all
背景颜色 .pk-background-color-[transparent|white|primary|secondary|success|danger|warning]
间距相关 .pk-[margin|padding]-[_|top|bottom|left|right]-[5|10|15|20|25|30|35|40|45]
边框相关 .pk-border-[_|top|bottom|left|right]-[none|transparent]
显示相关 .pk-display-[none|block|table|inline|...]
圆角相关 .pk-radius-[_|top-left|top-right|bottom-left|bottom-right]-[2|4|6|8|10|all]
隐藏相关 .pk-hide-[_|sm|md]
其他相关 请自行打开puyuetian.css文件查看，太多了，不想写了，累啊~
额外扩展
引入了font-awesome字体，可自行添加，举例：
<button class="pk-btn pk-btn-primary pk-radius-4"><span class="fa fa-qq"></span> 用QQ号登录</button>
