响应式UI框架:SRWD-UI

响应式SRWD-UI框架,专注于打造PC桌面、平板桌面、大小手机单一项目实现不同布局效果的框架; 框架本身只负责布局控制,仅有简单的主题样式,用户可以唯美控制灵活更换页面主题样式及配色; 样式部件灵活使用,并且可以自由搭配/嵌套使用,以实现复杂理想效果; 界面中示例颜色仅为看清主要样式效果,使用中不一定有颜色效果; 本框架除了菜单组、按钮组外都不限制使用的元素,可自由使用。

下载地址
点击下载        备用下载

说明:该框架只负责响应式布局,不包含任何js,jquery插件,所以下载文件只有一个css文件。如果发现下载的css文件出现乱码,不用担心,整个文件中文只是注释内容,不影响插件正常使用

基础样式
class类名功能描述
全局样式所有元素默认border-box布局;margin/padding设为0;取消outline、下划线;a连接颜色改为#66f;取消i、em元素的斜体效果
after-none取消元素的:after效果
before-none取消元素的:before效果
bg-none取消背景效果
border-none取消边框效果
block改为block布局,高度自适应
clear清除左右浮动
clear-left清除左浮动
clear-right清除右浮动
cursor-default修改鼠标样式为默认
cursor-pointer修改鼠标样式为连接手指
disable修改文本为禁用颜色#ccc;鼠标样式为默认
error修改文本为错误颜色#f66
float-none取消浮动
fs-content左右两侧等高布局容器,内部第一层div自动等高
hide,hidden隐藏元素
hover鼠标经过背景样式:#f3f3f3
nicon图标占位符
icon-bgcolor图标背景色,主题颜色
icon-home首页图标,背景为首页小图标36*36
icon-back返回图标,背景为返回小图标36*36
icon-user用户图标,背景为用户小图标36*36
icon-menu菜单图标,背景为手机菜单小图标36*36(竖向三点)
icon-refresh刷新图标,背景为刷新小图标36*36
icon-more更多图标,背景为更多小图标36*36(向右展开图标)
icon-sideup向上收缩图标,背景为向上小图标36*36
icon-sidedown向下展开图标,背景为向下小图标36*36
icon-sideup.gray灰色向上收缩图标,背景为向上小图标36*36
icon-sidedown.gray灰色向下展开图标,背景为向下小图标36*36
inline布局改为inline-block,实现包裹浮动元素
left左浮动
over-hidden超出部分隐藏
page-content给容器预留70px底部内间距,为移动端设置了底部栏时使用
relative容器改为相对布局,内部元素相对于该容器左上角定位
right右浮动
show显示隐藏的组件
text-center,tC居中对齐
text-left,tL左对齐
text-right,tR右对齐
width-0宽度设为0,内容隐藏
width-50宽度设为50%
width-100宽度设为100%,取消边距
响应式基础样式
class类名功能描述
input,button,select,option,textarea这些元素会根据页面宽度自动调整padding
.btn,.text-padding这些类会根据页面宽度自动调整大小和padding
.form .form-item表单项会根据页面宽度自动调整高度和margin
container响应式容器类,根据页面宽度自动调整宽度,最小680px,小于680px宽度为100%
dialog小于680px移动设备自动全屏
dialog,panel小于680px取消圆角
.dialog.margin-top,.panel.margin-top移动端顶部边距为0,其他的为10%
.dialog .close移动端隐藏.close的元素,其他显示
.dialog .back,.dialog .menu移动端显示.back、.menu的元素,其它隐藏
fixed-right移动端右侧菜单,配合menu按钮使用
thead表格表头,该元素在移动端隐藏
tbody,tfoot,.footrow表格内容在移动端重新布局,默认一个单元格一行
columns-1,columns-2,columns-3,columns-4,columns-5table元素样式,在移动端一行显示几个单元格
.pager .pg-first,.pager .pg-last分页在移动端隐藏第一页和最后一页
fixed-top页头预留36px边距给移动端固定的标题栏
center-sm在移动端页面居中显示,其他左对齐
center-md在平板页面居中显示,其他左对齐
center-lg在桌面版页面居中显示,其他左对齐
hover-sm在移动端页面hover效果#f3f3f3,其他没有效果
hover-md在平板页面hover效果#f3f3f3,其他没有效果
hover-lg在桌面版页面hover效果#f3f3f3,其他没有效果
hidden-sm在移动端页面隐藏,其他显示
hidden-md在平板页面隐藏,其他显示
hidden-lg在桌面版页面隐藏,其他显示
text-margin在移动端页面文本占位符,和输入框一致
visible-sm在移动端页面显示,其他隐藏
visible-md在平板页面显示,其他隐藏
visible-lg在桌面版页面显示,其他隐藏
visible-lg在桌面版页面显示,其他隐藏
内置BASR64图标
class类名示例图标class类名示例图标
icon-homeicon-back
icon-closeicon-user
icon-usericon-menu
icon-refreshicon-more
icon-sideupicon-sidedown
icon-sideup grayicon-sidedown
页面主容器
class类名功能描述
container响应式主容器,最大宽度1200px,[桌面/PC]1200px,[平板]960px,移动端680px
sm-container最大宽度680px,宽度100%
md-container最大宽度960px,宽度100%
lg-container最大宽度1200px,宽度100%
fs-container宽度100%
页面顶部栏
.titlebar
效果如同本页面顶部栏样式,默认为暗色主题,嵌套container类实现响应式内容
.titlebar.fixed
使得顶部栏固定在页头,不随页面滚动
.titlebar .sys-menu
效果和本页面顶部栏菜单相同,自动分割线
.header
顶部栏下面的LOGO栏,可以放在顶部栏里面也可以放在主体页面里面
.taskbar
移动端页面顶部带返回图标和菜单图标的效果栏
.taskbar.fixed
移动端页面顶部带返回图标和菜单图标的效果栏
.fixed-right
配合移动端顶部栏菜单按钮使用效果更佳
<div class="taskbar">
	<span class="icon-back"></span>
	<span>移动端效果</span>
	<span class="icon-menu"></span>
</div>
移动端效果
页尾底部栏
.footer
定义页尾,配合container类使用实现响应式显示内容
.navbar
定义移动端底部导航栏,放置3-7个导航项,默认5个
.navbar.navbar-light
移动端底部导航栏亮色主题
<div class="navbar">
	<a href="">导航1</a>
	<a href="">导航2</a>
	<a href="">导航3</a>
	<a href="">导航4</a>
	<a href="">导航5</a>
</div>
<div class="navbar navbar-light">
	<a href="">导航1</a>
	<a href="">导航2</a>
	<a href="">导航3</a>
	<a href="">导航4</a>
	<a href="">导航5</a>
</div>
弹窗/面板
.dialog/.panel
定义弹窗样式、面板样式,面板样式效果如当前页面分类面板
.dialog.dialog-sm
定义弹窗,宽度480px
.dialog.dialog-md
定义弹窗,宽度680px
.dialog.dialog-lg
定义弹窗,宽度960px
<div class="dialog">
	<div class="header"><span class="icon-back"></span>标题</div>
	<div class="body">内容</div>
	<div class="footer">底部</div>
</div>

/* jQuery实现代码 */
$('.dialog').show();// 显示弹窗
$('.icon-back').click(function() {// 隐藏弹窗
	$(this).parents('.dialog').hide();
});
超小弹窗 适中弹窗 超大弹窗
标题
内容
标题
内容
标题
内容
<div class="panel">
	<div class="header"><span class="icon-back"></span>标题</div>
	<div class="body">内容</div>
	<div class="footer">底部</div>
</div>
标题
内容
填充/按钮/提示帖
.padding-xs,.btn-xs,.input-xs、.padding-sm,.btn-sm,.input-sm、.padding-md,.btn-md.input-md、.padding-lg,.btn-lg.input-lg
定义小中大填充样式
button,.btn
会把button标签和btn类的元素修饰为按钮
.btn-default,.btn-gray
.btn-default修饰为亮色按钮,默认为蓝底按钮,.btn-gray为灰色背景按钮
<button class="btn-xs">超小按钮</button>
<button class="btn-sm">小按钮</button>
<button class="btn-md">适中按钮</button>
<button class="btn-lg">大按钮</button>
<input class="btn" type="button" value="默认按钮">
<a class="btn btn-default">亮色按钮</a>
<span class="btn btn-gray">灰色按钮</span>
亮色按钮 灰色按钮
.tip
实现右上角提示数据小标记
.tip.absolute
提示贴相对于父元素定位
.tip-red、.tip-hollow、tip-red-hollow
提示贴根据引用样式不同展示效果不同
<button class="btn-default">文本<span class="tip">0</span></button>
<button class="btn-default relative">文本<span class="tip absolute">1</span></button>
<button class="btn-default">文本<span class="tip tip-red">2</span></button>
<button class="btn-default">文本<span class="tip tip-hollow">3</span></button>
<button class="btn-default">文本<span class="tip tip-red-hollow">4</span></button>
菜单组/按钮组/面包屑
ol.menu-group,ul.menu-group
定义菜单组,支持ol、ul标签
.menu-group.horizontal
定义横向菜单组,默认纵向
<ol class="menu-group">
	<li><a>菜单项1</a></li>
	<li><a>菜单项2</a></li>
	<li><a>菜单项3</a></li>
	<li><a>菜单项4</a></li>
</ol>
<ul class="menu-group horizontal">
	<li><a>菜单项1</a></li>
	<li><a>菜单项2</a></li>
	<li><a>菜单项3</a></li>
	<li><a>菜单项4</a></li>
</ul>
.btn-group
定义按钮组
.menu-group.vertical
定义纵向按钮组,默认横向
<ol class="btn-group">
	<li><a>按钮1</a></li>
	<li><a>按钮2</a></li>
	<li><a>按钮3</a></li>
	<li><a>按钮4</a></li>
</ol>
<ul class="btn-group vertical">
	<li><a>按钮1</a></li>
	<li><a>按钮2</a></li>
	<li><a>按钮3</a></li>
	<li><a>按钮4</a></li>
</ul>
.breadcrumb
定义面包屑导航
<div class="breadcrumb">
	<a>标签</a>
	<a>层级1</a>
	<a>层级2</a>
	<a>层级3</a>
</div>
弹性列表/设置组
.ud-label,.ud-label.open
以上样式应用于label等标签,紧随其后的div元素自动隐藏,结合jquery的slideDown()和slideUp()函数实现点击显示隐藏弹性列表
.ud-label.white,.ud-label.white.open
将弹性列表标签样式设置为白色背景
<label class="ud-label">显示更多</label>
<div>
	<label>列表项1</label>
	<label>列表项2</label>
	<label>列表项3</label>
	<label>列表项4</label>
	<label>列表项5</label>
</div>
<label class="ud-label white">显示更多</label>
<div>
	<a>列表项1</a>
	<a>列表项2</a>
	<a>列表项3</a>
	<a>列表项4</a>
	<a>列表项5</a>
</div>
.settings
应用于div、ul或ol,对下级元素应用小箭头样式
<div class="settings">
	<label>列表项1</label>
	<label>列表项2</label>
	<label>列表项3</label>
	<label>列表项4</label>
	<label>列表项5</label>
</div>
<div class="settings">
	<a>列表项1</a>
	<a>列表项2</a>
	<a>列表项3</a>
	<a>列表项4</a>
	<a>列表项5</a>
</div>
<ul class="settings">
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	<li>列表项4</li>
	<li>列表项5</li>
</ul>
  1. 设置项1
  2. 设置项2
  3. 设置项3
  4. 设置项4
  5. 设置项5
标签页/消息框
.tabs .tab,.tabs .tab.cur
把元素应用成标签页样式,结合jQuery的show()、hide()函数形成标签页切换效果
.tab-content,.tab-content.cur
把元素应用成标签页容器样式
<ul class="tabs" id="tabs1">
	<li class="tab cur" id="tab-1">标签页1</li>
	<li class="tab" id="tab-2">标签页2</li>
	<li class="tab" id="tab-3">标签页3</li>
</ul>
<div class="tab-contents">
	<div class="tab-content cur" id="tab-1-content">容器1</div>
	<div class="tab-content" id="tab-2-content">容器2</div>
	<div class="tab-content" id="tab-3-content">容器3</div>
</div>

/* jQuery实现代码 */
$('#tabs1 .tab').click(function() {
	var id = $(this).attr('id');
	$('#tabs1 .tab').removeClass('cur');
	$(this).addClass('cur');
	$('.tab-contents .tab-content').removeClass('cur');
	$('#' + id + '-content').addClass('cur');
	return false;
});
  • 标签页1
  • 标签页2
  • 标签页3
容器1
容器2
容器3
<div class="tabs" id="tabs2">
	<a class="tab cur" id="tab-1">标签页1</a>
	<a class="tab" id="tab-2">标签页2</a>
	<a class="tab" id="tab-3">标签页3</a>
	<div class="tab-content cur" id="tab-1-content">容器1</div>
	<div class="tab-content" id="tab-2-content">容器2</div>
	<div class="tab-content" id="tab-3-content">容器3</div>
</div>

/* jQuery实现代码 */
$('#tabs2 .tab').click(function() {
	var id = $(this).attr('id');
	$('#tabs2 .tab').removeClass('cur');
	$(this).addClass('cur');
	$('#tabs2 .tab-content').removeClass('cur');
	$('#tabs2 #' + id + '-content').addClass('cur');
	return false;
});
标签页1 标签页2 标签页3
容器1
容器2
容器3
.messages.left,.messages.right,.messages.top,.messages.bottom
应用元素为消息框样式
.messages.gray
把消息框应用为灰色样式
<span class="messages left">消息框1</span>
<i class="messages right">消息框2</i>
<b class="messages up">消息框3</b>
<p class="messages down">消息框4</p>
消息框1 消息框2 消息框3

消息框4

<label class="messages left gray">消息框4</label>
<a class="messages right gray">消息框2</a>
<em class="messages up gray">消息框3</em>
<div class="messages down gray">消息框1</div>
消息框2 消息框3
消息框4
表单
input,button,select,textarea
以上样式会应用为form表单的样式
.form
标注一个模块为form表单
.form-item
标注一个模块为form表单项,包括输入框、选择框
.checkbox-item
标注一个模块为form复选框项,自动应用复选框布局样式
.radio-item
标注一个模块为form单选框项,自动应用单选框布局样式
.number-item
标注一个模块为form数字输入框项,自动应用数字输入框布局样式,带有加减按钮
.money-item
标注一个模块为form金额前缀输入框项,即前面带有显示按钮
.suffix-item
标注一个模块为form域名后缀输入框项,即后面带有显示按钮
.dtimes-item
标注一个模块为form日期时间选择框项,两个输入框,中间一个分隔标签
.captcha-item
标注一个模块为form验证码输入框项,输入框后面验证码图片自动布局
.textarea-item
标注一个模块为form文本域输入框项,使用合适的文本域布局
.btns-item
标注一个模块为form表单按钮组项,多按钮布局
<div class="form">
	<div class="form-item">
		<label>输入框</label>
		<input>
	</div>
	<div class="form-item">
		<label>选择框</label>
		<select>
			<option>选项1</option>
			<option>选项2</option>
		</select>
	</div>
	<div class="form-item checkbox-item">
		<label>复选框</label>
		<label><input type="checkbox">框选标签</label>
	</div>
	<div class="form-item radio-item">
		<label>单选框</label>
		<label><input name="radio" type="radio">选项1</label>
		<label><input name="radio" type="radio">选项2</label>
	</div>
	<div class="form-item number-item">
		<label>数字输入框</label>
		<span>-</span>
		<input>
		<span>+</span>
	</div>
	<div class="form-item money-item">
		<label>金钱输入框</label>
		<span>¥</span>
		<input>
	</div>
	<div class="form-item suffix-item">
		<label>域名输入框</label>
		<input>
		<span>.com</span>
	</div>
	<div class="form-item dtimes-item">
		<label>范围输入框</label>
		<input>
		<span>~</span>
		<input>
	</div>
	<div class="form-item captcha-item">
		<label>验证码输入框</label>
		<input>
		<img alt="" src="resources/images/srwd/srwd3.png">
	</div>
	<div class="form-item textarea-item">
		<label>文本域输入框</label>
		<textarea></textarea>
	</div>
	<div class="form-item btns-item">
		<button class="btn">确定</button>
		<button class="btn btn-gray">取消</button>
	</div>
</div>
- +
.com
~
.inline-form
一行显示两个表单项,节省空间,可使用.width-100类强制把表单项改为单独占一行
<div class="form inline-form">
	<div class="form-item">
		<label>输入框1</label>
		<input>
	</div>
	<div class="form-item">
		<label>输入框2</label>
		<input>
	</div>
	<div class="form-item width-100">
		<label>输入框3</label>
		<input>
	</div>
</div>
.right-form
表单标签右对齐,自动填充冒号
<div class="form right-form">
	<div class="form-item">
		<label>输入框1</label>
		<input>
	</div>
	<div class="form-item">
		<label>输入框2</label>
		<input>
	</div>
	<div class="form-item width-100">
		<label>输入框3</label>
		<input>
	</div>
</div>
.info-form
表单后面带提示文字,em标签自动填充*
<div class="form info-form">
	<div class="form-item">
		<label>输入框1</label>
		<input>
		<em>提示1</em>
	</div>
	<div class="form-item">
		<label>输入框2</label>
		<input>
		<span>提示2</span>
	</div>
	<div class="form-item width-100">
		<label>输入框3</label>
		<input>
		<span>提示3</span>
	</div>
</div>
提示1
提示2
提示3
表格
table,thead,tbody,tfoot,tr,th,td
表格标签会根据引用样式自动布局美化
.footrow
放在tfoot里面第一行,用于显示汇总数据/总结/提示文字等
.border-row,border-column,striped,hover
分别显示行边框、单元格完整边框、隔行着色、鼠标经过样式;效果参考当前页面前面三个表格;几个样式可以搭配使用效果更佳
.lines
表格单数行显示为数据行,双数行显示为扩展性数据行
.lines.extends
表格单数行显示为数据行,双数行显示为扩展性数据行
<table>
	<thead>
		<tr>
			<th>栏目1</th>
			<th>栏目2</th>
			<th>栏目3</th>
			<th>栏目4</th>
			<th>栏目5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据1-1</td>
			<td>数据1-2</td>
			<td>数据1-3</td>
			<td>数据1-4</td>
			<td>数据1-5</td>
		</tr>
		<tr>
			<td>数据2-1</td>
			<td>数据2-2</td>
			<td>数据2-3</td>
			<td>数据2-4</td>
			<td>数据2-5</td>
		</tr>
		<tr>
			<td>数据3-1</td>
			<td>数据3-2</td>
			<td>数据3-3</td>
			<td>数据3-4</td>
			<td>数据3-5</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>汇总1</td>
			<td>汇总2</td>
			<td>汇总3</td>
			<td>汇总4</td>
			<td>汇总5</td>
		</tr>
	</tfoot>
</table>
栏目1 栏目2 栏目3 栏目4 栏目5
数据1-1 数据1-2 数据1-3 数据1-4 数据1-5
数据2-1 数据2-2 数据2-3 数据2-4 数据2-5
数据3-1 数据3-2 数据3-3 数据3-4 数据3-5
汇总1 汇总2 汇总3 汇总4 汇总5
<table class="border-row">
	<thead>
		<tr>
			<th>栏目1</th>
			<th>栏目2</th>
			<th>栏目3</th>
			<th>栏目4</th>
			<th>栏目5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据1-1</td>
			<td>数据1-2</td>
			<td>数据1-3</td>
			<td>数据1-4</td>
			<td>数据1-5</td>
		</tr>
		<tr>
			<td>数据2-1</td>
			<td>数据2-2</td>
			<td>数据2-3</td>
			<td>数据2-4</td>
			<td>数据2-5</td>
		</tr>
	</tbody>
</table>
栏目1 栏目2 栏目3 栏目4 栏目5
数据1-1 数据1-2 数据1-3 数据1-4 数据1-5
数据2-1 数据2-2 数据2-3 数据2-4 数据2-5
<table class="border-column">
	<thead>
		<tr>
			<th>栏目1</th>
			<th>栏目2</th>
			<th>栏目3</th>
			<th>栏目4</th>
			<th>栏目5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据1-1</td>
			<td>数据1-2</td>
			<td>数据1-3</td>
			<td>数据1-4</td>
			<td>数据1-5</td>
		</tr>
		<tr>
			<td>数据2-1</td>
			<td>数据2-2</td>
			<td>数据2-3</td>
			<td>数据2-4</td>
			<td>数据2-5</td>
		</tr>
	</tbody>
</table>
栏目1 栏目2 栏目3 栏目4 栏目5
数据1-1 数据1-2 数据1-3 数据1-4 数据1-5
数据2-1 数据2-2 数据2-3 数据2-4 数据2-5
<table class="striped">
	<thead>
		<tr>
			<th>栏目1</th>
			<th>栏目2</th>
			<th>栏目3</th>
			<th>栏目4</th>
			<th>栏目5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据1-1</td>
			<td>数据1-2</td>
			<td>数据1-3</td>
			<td>数据1-4</td>
			<td>数据1-5</td>
		</tr>
		<tr>
			<td>数据2-1</td>
			<td>数据2-2</td>
			<td>数据2-3</td>
			<td>数据2-4</td>
			<td>数据2-5</td>
		</tr>
		<tr>
			<td>数据3-1</td>
			<td>数据3-2</td>
			<td>数据3-3</td>
			<td>数据3-4</td>
			<td>数据3-5</td>
		</tr>
		<tr>
			<td>数据4-1</td>
			<td>数据4-2</td>
			<td>数据4-3</td>
			<td>数据4-4</td>
			<td>数据4-5</td>
		</tr>
	</tbody>
</table>
栏目1 栏目2 栏目3 栏目4 栏目5
数据1-1 数据1-2 数据1-3 数据1-4 数据1-5
数据2-1 数据2-2 数据2-3 数据2-4 数据2-5
数据3-1 数据3-2 数据3-3 数据3-4 数据3-5
数据4-1 数据4-2 数据4-3 数据4-4 数据4-5
<table class="hover">
	<thead>
		<tr>
			<th>栏目1</th>
			<th>栏目2</th>
			<th>栏目3</th>
			<th>栏目4</th>
			<th>栏目5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据1-1</td>
			<td>数据1-2</td>
			<td>数据1-3</td>
			<td>数据1-4</td>
			<td>数据1-5</td>
		</tr>
		<tr>
			<td>数据2-1</td>
			<td>数据2-2</td>
			<td>数据2-3</td>
			<td>数据2-4</td>
			<td>数据2-5</td>
		</tr>
	</tbody>
</table>
栏目1 栏目2 栏目3 栏目4 栏目5
数据1-1 数据1-2 数据1-3 数据1-4 数据1-5
数据2-1 数据2-2 数据2-3 数据2-4 数据2-5
<table class="lines">
	<tbody>
		<tr>
			<th>标签1-1</th>
			<td>数据1-2</td>
		</tr>
		<tr>
			<th>标签2-1</th>
			<td>数据2-2</td>
		</tr>
		<tr>
			<th>标签3-1</th>
			<td>数据3-2</td>
		</tr>
		<tr>
			<th>标签4-1</th>
			<td>数据4-2</td>
		</tr>
		<tr>
			<th>标签5-1</th>
			<td>数据5-2</td>
		</tr>
	</tbody>
</table>
标签1-1 数据1-2
标签2-1 数据2-2
标签3-1 数据3-2
标签4-1 数据4-2
标签5-1 数据5-2
<table class="lines extends">
	<tbody>
		<tr>
			<td>数据1-1</td>
			<td>数据1-2</td>
			<td>数据1-3</td>
			<td>数据1-4</td>
			<td><span class="icon icon-sidedown gray"></span></td>
		</tr>
		<tr>
			<td colspan="5"><div>扩展数据1-1</div></td>
		</tr>
		<tr>
			<td>数据2-1</td>
			<td>数据2-2</td>
			<td>数据2-3</td>
			<td>数据2-4</td>
			<td><span class="icon icon-sidedown gray"></span></td>
		</tr>
		<tr>
			<td colspan="5"><div>扩展数据2-1</div></td>
		</tr>
	</tbody>
</table>

/* jQuery实现代码 */
$('.lines.extends .icon').click(function() {
	$(this).toggleClass('icon-sidedown icon-sideup');
	var content = $(this).parents('tr').next('tr').find('div');
	if($(this).hasClass('icon-sideup')) {
		content.slideDown(300);
	} else {
		content.slideUp(300);
	}
});
数据1-1 数据1-2 数据1-3 数据1-4
扩展数据1-1
数据2-1 数据2-2 数据2-3 数据2-4
扩展数据2-1
columns-1,columns-2,columns-3,columns-4,columns-5
表格布局在移动端(<680px)会打乱,重新编排,搭配columns-1~columns-5会在移动端重新排列多个列,默认每个列占一行,搭配表格样式美化显示
分页
.listwrap
将表格和分页一起包裹起来,目的是使得pager分页居中显示
.pager
使用div创建分页容器,用于放置分页按钮
.pager > *
分页容器里面第一层元素会被格式化成按钮组,美化排版布局。
.pg-first,.pg-prev,pg-refresh,pg-next,pg-last
如果使用固定的五个按钮,需加上按钮样式类,分别是:第一页/上一页/刷新/下一页/最后页
.default
提供白色默认分页按钮,配合白色主题使用
.pg-first,pg-last
在移动端显示,会把第一页和最后页按钮隐藏,剩下上一页/刷新/下一页,以此符合小屏幕分布排版
<div class="pager">
	<a>第一页</a>
	<a>上一页</a>
	<a>刷新</a>
	<a>下一页</a>
	<a>最后页</a>
</div>
<div class="pager default">
	<a class="btn">第一页</a>
	<a class="btn">上一页</a>
	<a class="btn">刷新</a>
	<a class="btn">下一页</a>
	<a class="btn">最后页</a>
</div>
<div class="pager">
	<button class="pg-first">第一页</button>
	<button class="pg-prev">上一页</button>
	<button class="pg-refresh">刷新</button>
	<button class="pg-next">下一页</button>
	<button class="pg-last">最后页</button>
</div>
栅格系统
.items,.items-10,.items-sm-10,.items-md-10,.items-lg-10
.items定义栅格系统容器,其他定义总列数是10列的栅格系统sm/md/lg分别代表在手机/平板/桌面下改为10列栅格系统
item-9 items
在上级栅格系统中占据9列,重新把该容器定义为12列的栅格系统
items-10 items
.items-10为10列栅格系统,配合个别情况需要10列划分,方便使用;.items为经典的12列栅格系统,适合多数情况划分屏幕宽度
item-*,item-sm-*,item-md-*,item-lg-*
如果栅格系统在所有屏幕上占据相同的份额,可以直接使用item-*划分;如果不同屏幕划分不同,则使用item-sm-*,item-md-*,item-lg-*分别指示在各个屏幕上占据多少份;具体需求根据界面设计可搭配出各种组合
items-10 item-11,items-10 item-12
如果定义了三个系统为10列,name分配11份和12份的占据默认占100%宽度,即铺满整个栅格容器
<div class="items">
	<div class="item-12">占12份</div>
	<div class="item-11">占11份</div>
	<div class="item-1">占1份</div>
	<div class="item-9">占9份</div>
	<div class="item-3">占3份</div>
	<div class="item-6">占6份</div>
	<div class="item-6">占6份</div>
	<div class="item-4">占4份</div>
	<div class="item-8">占8份</div>
	<div class="item-2">占2份</div>
	<div class="item-10">占10份</div>
	<div class="item-1">占1份</div>
	<div class="item-11">占11份</div>
	<div class="item-4">占4份</div>
	<div class="item-4">占4份</div>
	<div class="item-4">占4份</div>
	<div class="item-3">占3份</div>
	<div class="item-3">占3份</div>
	<div class="item-3">占3份</div>
	<div class="item-3">占3份</div>
	<div class="item-5">占5份</div>
	<div class="item-5">占5份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
</div>
占12份
占11份
占1份
占9份
占3份
占6份
占6份
占4份
占8份
占2份
占10份
占1份
占11份
占4份
占4份
占4份
占3份
占3份
占3份
占3份
占5份
占5份
占2份
占2份
占2份
占2份
占2份
占2份
占2份
<div class="items-10">
	<div class="item-12">占12份</div>
	<div class="item-11">占11份</div>
	<div class="item-10">占10份</div>
	<div class="item-5">占5份</div>
	<div class="item-5">占5份</div>
	<div class="item-3">占3份</div>
	<div class="item-7">占7份</div>
	<div class="item-6">占6份</div>
	<div class="item-4">占4份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-2">占2份</div>
	<div class="item-7">占7份</div>
	<div class="item-3">占3份</div>
</div>
占12份
占11份
占10份
占5份
占5份
占3份
占7份
占6份
占4份
占2份
占2份
占2份
占2份
占2份
占7份
占3份