收藏文章 楼主

puyuetianUI 基本用法说明及举例

版块:HadSky 3.x 模板开发   类型:普通   作者:乐天   查看:7765   回复:1   获赞:4   时间:2016-09-17 11:40:30
样式统一

所有属于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">&nbsp;</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>


有些梦虽然遥不可及,但并不是不可能实现。 
回复列表
默认   热门   正序   倒序
youji
2F
friendlink 怎么不是横的
 2   2017-12-24 21:36:44  回复

回复:puyuetianUI 基本用法说明及举例

暂无用户组
退出
等级:0级
天豆:
游客:

公告

近期本站被人为恶意注册及发布垃圾帖,本站已开启普通用户发帖审核功能,VIP系列用户组不受影响,一但发现发布违法或垃圾帖的用户,该用户账号将会被永久封号,请大家共同维护互联网环境,共创美好互联网未来。

永久免费,购授权享豪礼

3年个人版授权+1940天豆仅需194元

终身个人版授权+3880天豆仅需388元

3年尊享版授权+13580天豆仅需1358元

终身尊享版授权+27160天豆仅需2716元

扫个红包吧,快乐你我他

红包

Powered by HadSky 7.12.4

©2015 - 2022 HadSky

购买产品 用户文档 授权查询 网站绑定 更新补丁 客户案例 陕ICP备13005805号

您的IP:44.211.22.31,2022-09-27 22:43:29,Processed in 0.03396 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
已有0次打赏
(4) 分享
分享

请保存二维码或复制链接进行分享

取消