jQuery Mobile 网格布局

最新推荐文章于 2017-06-02 11:33:52 发布

原创最新推荐文章于 2017-06-02 11:33:52 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery mobile 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用不同类名实现的UI网格布局方法，通过外部div应用class=ui-grid-a，内部div分别使用class=ui-block-a等来创建响应式网格布局。示例中展示了从两列到五列布局的变化，并且每个单元格内部还包含特定样式的区块。

外部div使用class="ui-grid-a"，而内部使用 class="ui-block-a"

  <div data-role="page">
<div data-role="header">
    <h1>头部栏标题</h1></div>
    <div class="ui-grid-a"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-b h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-b h60">B</div>
	  </div>
	</div> 
	<div class="ui-grid-b"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-c h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-c h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-c h60">C</div>
	  </div>
	</div> 
	<div class="ui-grid-c"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-d h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-d h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-d h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-d h60">D</div>
	  </div>
	</div> 
	<div class="ui-grid-d"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-e h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-e h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-e h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-e h60">D</div>
	  </div>
	  <div class="ui-block-e">
		<div class="ui-bar ui-bar-e h60">E</div>
	  </div>
	</div> 
　　<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>