mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
97 lines
No EOL
4.6 KiB
HTML
Executable file
97 lines
No EOL
4.6 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Content formatting</title>
|
|
<link rel="stylesheet" href="../../css/all" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Layout grids</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called <code>ui-grid</code>. </p>
|
|
<p>Grids have preset configurations for two- and three-column layouts that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.</p>
|
|
|
|
<h2>Two column grids</h2>
|
|
<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code> and add two child containers inside that are classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>
|
|
|
|
<pre><code>
|
|
<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 -->
|
|
</code></pre>
|
|
|
|
|
|
|
|
<p>By default, grid blocks have no style appearance; they simply present content side-by-side. Here is the example above:</p>
|
|
|
|
<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 -->
|
|
|
|
<p>The grid classes can be applied to any container. In this example, we've added <code>grid-a</code> to a <code>fieldset</code> to make the two button inside stretch to 50% of the screen width:</p>
|
|
|
|
<pre><code>
|
|
<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>
|
|
</code></pre>
|
|
|
|
<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>
|
|
|
|
|
|
<p>And, grid blocks can adopt presentation styles from the theming system — we've added a height and color swatch reference to the grid blocks.</p>
|
|
|
|
<div class="ui-grid-a">
|
|
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
|
|
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
|
|
</div><!-- /grid-a -->
|
|
|
|
<h2>Three column grids</h2>
|
|
<p>There is a second grid for a 3 column layout (33/33/33%) that is similar in structure but uses <code>class=grid-b</code> on the parent and 3 child wrappers, each with <code>block-a/b/c</code> for the column child containers.</p>
|
|
|
|
<pre><code>
|
|
<div class="ui-grid-a">
|
|
<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-a -->
|
|
</code></pre>
|
|
|
|
<p>This will produce a 33/33/33% grid for our content.</p>
|
|
|
|
<div class="ui-grid-b">
|
|
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
|
|
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
|
|
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
|
|
</div><!-- /grid-a -->
|
|
|
|
<p>And an example of a 3 column grid with buttons inside:</p>
|
|
|
|
<fieldset class="ui-grid-b">
|
|
<div class="ui-block-a"><button type="submit" data-theme="c">Nope</button></div>
|
|
<div class="ui-block-b"><button type="submit" data-theme="a">Maybe</button></div>
|
|
<div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>
|
|
</fieldset>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |