课程表

jQuery Mobile 教程

jQuery Mobile 列表

jQuery Mobile 表单

jQuery Mobile 主题

jQuery Mobile 事件

jQuery Mobile 实例

jQuery Mobile 参考手册

工具箱
速查手册

jQuery Mobile 网格

当前位置:免费教程 » 移动开发 » jQuery Mobile

jQuery Mobile 布局网格

jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过,一般不推荐在移动设备上使用列布局,这是由于移动设备的屏幕宽度所限。

但是有时您需要定位更小的元素,比如按钮或导航栏,就像在表格中那样并排。这时,列布局就恰如其分。

网格中的列是等宽的(总宽是 100%),无边框、背景、外边距或内边距。

可使用的布局网格有四种:

网格类 列宽度 对应 实例
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 测试

提示:在列容器中,根据不同的列数,子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。

实例 1: 对于 ui-grid-a 类(两列布局),您必须规定两个子元素 ui-block-a 和 ui-block-b。

实例 2: 对于 ui-grid-b 类(三列布局),请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。

定制网格

您可以通过使用 CSS 来定制列块:

实例

  1. <style>
  2. .ui-block-a,
  3. .ui-block-b,
  4. .ui-block-c
  5. {
  6. background-color: lightgray;
  7. border: 1px solid black;
  8. height: 100px;
  9. font-weight: bold;
  10. text-align: center;
  11. padding: 30px;
  12. }
  13. </style>

亲自试一试

您也可以通过使用行内样式来定制块:

  1. <div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

多行

在列中包含多个行也是可能的。

注释:ui-block-a-class 将始终创建新行:

实例

  1. <div class="ui-grid-b">
  2. <div class="ui-block-a"><span>Some Text</span></div>
  3. <div class="ui-block-b"><span>Some Text</span></div>
  4. <div class="ui-block-c"><span>Some Text</span></div>
  5. <div class="ui-block-a"><span>Some Text</span></div>
  6. <div class="ui-block-b"><span>Some Text</span></div>
  7. <div class="ui-block-a"><span>Some Text</span></div>
  8. </div>

亲自试一试

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号