jquery mobile 栅格化
2024-10-19 23:54:45
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">
</head>
<body>
<div class="ui-grid-c"><!-- 代表2列 -->
<div class="ui-block-a"><!-- 代表第一列 -->
<div class="ui-bar ui-bar-a">hello A</div>
</div>
<div class="ui-block-b"><!-- 代表第二列 -->
<div class="ui-bar ui-bar-c">hello B</div>
</div>
<div class="ui-block-c"><!-- 代表第三列 -->
<div class="ui-bar ui-bar-a">hello C</div>
</div>
<div class="ui-block-d"><!-- 代表第四列 -->
<div class="ui-bar ui-bar-b">hello D</div>
</div>
</div>
<!-- ui-bar-a代表列的样式 -->
<!-- ui-grid-c代表展示总的列数 ,c为4列-->
<!-- ui-block-a ui-block-b分别代表第一列和第二列，依次类推 -->
<!-- 容器内承载其他内容 -->
<!-- 同一列当中存在3个按钮 -->
<div class="ui-grid-a">
<div class="ui-block-a">
<input type="button" data-theme="a" value="按钮">
<input type="button" data-theme="b" value="按钮">
<input type="button" data-theme="a" value="按钮">
</div>
<div class="ui-block-b">
<input type="button" data-theme="a" value="按钮">
<input type="button" data-theme="a" value="按钮">
<input type="button" data-theme="a" value="按钮">
</div>
</div>
<!-- 当前只放一列 -->
<div class="ui-grid-solo"><!-- 变成一行显示内容 -->
<div class="ui-block-a">
<input type="button" data-theme="a" value="按钮">
</div>
</div>
</body>
</html>
显示内容
最新文章
- 在Sqlserver下巧用行列转换日期的数据统计
- 大漠绑定测试工具-VB6
- Tomcat web.xml中定义了文件扩展名到MIME类型的对应关系
- JAVA中REPLACE和REPLACEALL的区别（转）
- Java调用存储过程时报 The user specified as a definer ('root'@'%') does not exist 解决方法
- [Fw]人和人之间在八小时之外的差别
- 关于bootStrapdialog 学习心得
- Effective Java提升Code Coverage代码涵盖率 - 就是爱Java
- 利用fitnesse实现api接口自动化测试
- twitter 授权过程
- STM8的GPIO驱动
- 复制vmware虚拟机后，eth0无法显示问题
- javaSE_Java第一周总结：有难度题目集合
- [转]Java - 集合框架完全解析
- Python学习day2 while循环&格式化输出&运算符
- 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同
- 洛谷P3193 [HNOI2008]GT考试(dp 矩阵乘法)
- Linux开机自动挂载存储的两种方式
- How to extract a complete list of extension types within a directory?
- 使用Spring Boot操作Hive JDBC时，启动时报出错误：NoSuchMethodError: org.eclipse.jetty.servlet.ServletMapping.setDef