jQuery Mobile 网格
jQuery Mobile 网格布局 jQuery Mobile 内置了一套基于 CSS 的分列布局方案。不过放到移动设备上看，情况就没那么理想了。手机屏幕本来就窄，展示空间非常有限，所以通常并不推荐采用这类分栏、分列的布局方式。 不过，遇到按钮、导航标签这类体积不大的元素时，很多时候会希望把它们并
jQuery Mobile 网格布局
jQuery Mobile 内置了一套基于 CSS 的分列布局方案。不过放到移动设备上看，情况就没那么理想了。手机屏幕本来就窄，展示空间非常有限，所以通常并不推荐采用这类分栏、分列的布局方式。
不过，遇到按钮、导航标签这类体积不大的元素时，很多时候会希望把它们并排放在一起，呈现出类似表格那样整齐的排列效果。像这种场景，更合适的做法通常就是使用分列布局。
网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。
这里有四种布局网格可供使用：
| 网格类 | 列 | 列宽 | 对应 | 实例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e |
| 在列容器内，子元素拥有的 class 为 ui-block-a|b|c|d|e 取决于列数。列会浮动并排。
实例 1:class 为 ui-grid-a（两列布局），您必须指定 ui-block-a 和 ui-block-b 的两个子元素。 实例 2:class 为 ui-grid-b（三列布局），则必须添加 ui-block-a、ui-block-b 和 ui-block-c 的三个子元素。 |
自定义网格
通过使用CSS，您可以自定义列块：
实例
您也可以通过使用内嵌样式来自定义块：
Text..多行
在列中也可以有多个行。
注意：ui-block-a-class 总是创建一个新行：
实例
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
响应式网格
在小屏幕中，不建议一行中并排太多按钮（文本会缩短）。
我们在容器使用 ui-responsive 类来创建响应式网格：
实例
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系bd@zhengruan.com
作者最新文章
漫蛙漫画APP下载安卓版免费
2026-10-13 13:42
漫蛙动漫下载安卓版安装包
2026-10-13 13:19
漫蛙manwa2免费漫画入口在哪
2026-10-13 13:17
漫蛙2漫画入口
2026-10-13 13:03
会声会影X5去除视频原有字幕的操作方法
2026-10-13 11:07
上一篇：
jQuery Mobile 列表视图
下一篇：
jQuery Mobile 表格
相关文章
更多
jQuery如何给label赋值
在jQuery中动态更新Label标签的文本 想让页面上的说明文字活起来吗？通过jQuery选中Label标签，再调用一个简单的text()方法，就能实时更改它的显示内容。下面咱们通过一个手把手的案例，把这个过程的每一步都拆解清楚。 第一步：搭建演示环境 首先，创建一个名为test.html的HTM
2026-08-17
0
jQuery Mobile 安装
在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中： 从 CDN 中加载 jQuery Mobile (推荐) 从jQuerymobile.com 下载 jQuery Mobile库 从 CDN 中加载 jQuery Mobile CDN
2026-08-11
4
jQuery Mobile 页面
开始学习 jQuery Mobile 尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。 为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。 实例 欢迎来到我的主页 我现在是一个移动端开发者!! 底部文本 实例解析： data-
2026-08-11
0
jQuery Mobile 过渡
jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。 jQuery Mobile 页面切换效果 jQuery Mobile 提供了各种页面切换到下一个页面的效果。 注意：为了实现页面切换效果，浏览器必须支持 CSS3 3D 切换： 12.0 10.0 16.0 4.0 15.0
2026-08-11
0
jQuery Mobile 按钮
Mobile 应用程序是建立在您想要显示的简单的点击事物上。 在 jQuery Mobile 中创建按钮 在 jQuery Mobile 中，按钮可通过三种方式创建： 使用 元素 使用 元素 使用带有 data-role="button" 的 元素 按钮 按钮 在 jQuery Mobile 中，按
2026-08-11
0
jQuery Mobile 按钮图标
jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。 添加图标到 jQuery Mobile 按钮 我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。 Search 注意： 如果是其他场景下的按钮，比如列表里的按钮或表单中的按钮，就需要用到 data
2026-08-11
1
jQuery Mobile 弹窗
弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。 弹窗可用于显示一段文本，图片，地图或其他内容。 要做一个弹窗，通常会配合使用 和 这两个元素。先给 元素加上 data-rel="popup" 属性，再给 元素设置 data-role="popup" 属性。接下来，为这个 指定一个 id，同时
2026-08-11
1
jQuery Mobile 导航栏
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。 使用 data-role="navbar" 属性来定义导航栏： 实例 首页 页面二 搜索 默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平
2026-08-11
0
jQuery Mobile 面板
jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。 通过向指定 id 的 元素添加 data-role="panel" 属性来创建面板。 在 中添加 HTML 标记来显示你的面板内容： 面板标题.. 文本内容.. 注意： panel 标记必须置于头部、内容、底部组成的页面之前或之后。 要
2026-08-11
1
jQuery Mobile 可折叠块
可折叠内容块 可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。 如果想做一个可折叠的内容块，先给容器加上 data-role="collapsible" 属性。接着在这个容器（div）里，先放一个标题元素（H1-H6），再把需要展开显示的 HTML 标记紧跟在后面即可： 实例 点击我 -
2026-08-11
0
查看更多
Postman是一套面向API全生命周期的开发与测试平台，可在Mac上发送和调试多种协议请求，管理集合、环境及认证信息，并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用，提供个人免费方案。
Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境，集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。
Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境，基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。
PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台，提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。
Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求，并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等
Docker Desktop 为 Windows 开发者提供集成式容器环境，内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件，可在本机完成镜像构建、容器运行、日志查看和资源管理。