时间:2021-05-25
在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起。Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid
Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列
网格是100%的宽度,完全看不见的(没有边界或背景)和没有margin或padding,所以他们不会干扰样式的元素放在他们里面。在网格容器,子元素被分配ui-block-a / b / c/ d 以连续的方式,使每个“块”元素浮动并列,形成网格。其中ui-block-a类基本上清除浮将开始新的一行(见多行的网格,在下面)。
ui-grid-a 两列布局
建立个两列(50 / 50%)布局,第一层(父容器)添加ui-grid-a属性,第二层(两个子容器)里面分别添加ui-block-a和ui-block-b:
<div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div></div><!-- /grid-a -->上述标记产生以下内容布局:
正如你看到的,缺省情况下网格没有视觉造型;他们只是呈现内容并排。
网格的类可以被应用到任何容器。在下一个例子中,我们添加一个ui-grid-a,并应用ui-block,两个按钮分别延伸到50%的屏幕宽度
<fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div> </fieldset>请注意,这个框架增加网格中的左和右margin的按钮。为一个单一的按钮,您可以使用类ui-grid-solo和按钮类ui-block-a,像下面的例子一个div。这样的按钮将得到同样的margin
<div class="ui-grid-a"> <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div> <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div> </div><div class="ui-grid-solo"> <div class="ui-block-a"><button type="v" data-theme="b">More</button></div></div>主题类(没有数据主题属性)从主题系统可以被添加到一个元素,包括网格。在下面的块,我们增加了两个类:ui-bar添加默认的bar和ui-bar-e应用背景梯度和字体风格的“E”工具栏主题的样本。为了说明的目的,一个内联style=“height:120px”属性也被添加到每个网格设置每一个标准高度。
ui-block-b 三列布局
网格布局配置使用class= ui-grid-b在父母和3个子容器的元素,每个都有其各自的ui-block-a / a / c类,创建一行三列布局(33 / 33 / 33%)。注意:这些块同样风格的主题课程,网格布局清晰可见。
<div class="ui-grid-b"> <div class="ui-block-a">Block A</div> <div class="ui-block-b">Block B</div> <div class="ui-block-c">Block C</div></div><!-- /grid-b -->这为我们的内容,将产生一个33 / 33 / 33%网格布局
ui-block-c 四列布局
一行四列,25 / 25 / 25 / 25%网格,是通过在父容器指定class= ui-grid-c和添加四分之一块。注意:这些块同样风格的主题课程,网格布局清晰可见
ui-block-c 五列布局
一行五列,20 / 20 / 20 / 20 / 20%网格,是通过在父容器指定class= ui-grid-d
多行多列布局
网格设计包装的项目多行。例如,如果您指定了一个三行三列网格(ui-grid-b)在一个容器,有九个子块,则换到3排各3项。有一个CSS规则明确的花车和开始新的一行,当class= ui-block-a是确保在重复序列分配块(A,B,C类,A,B,C,等)映射到网格类型。可以给每行的第一个容器设置为class=ui-block-a 来清除浮动,这样9 个子容器的class 应为:class=ui-block-(a,b,c,a,b,c,a,b,c)。
<div id="grid" class="ui-grid-b"><div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div><div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div><div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div></div><!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>grid-layout demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- The script below can be omitted --> <script src="/resources/turnOffPushState.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script></head><body> <div data-role="page"> <div data-role="header"> <h1>Grid Layout Example</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div> </div><!-- /grid-a --> </div></div> </body></html>声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
如何创建网站能够使得页面内容有秩序不凌乱呢?试试网格布局吧。网格布局初源于报纸的排版,后被广泛运用于网站页面设计、APP界面设计等领域,如今,网格布局在网站中很
1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局;2.基本概念: 容器和项目,如图所
jQuery网格插件可以让你创建各种各样的表格布局,网格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery的
Grid是一个基于二维网格布局的系统,有了它我们可以非常方便的实现过去很复杂布局,无需再使用float,inline-block,position这些本质上是h
在做网站的前端设计中,网格是将设计融合在一起的胶水,在网站设计中,需要了解网格理论,网格布局带来的好处很多。1、网格布局更方便网格可以引导用户获得他们想要的信息