mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
93 lines
No EOL
4.4 KiB
HTML
Executable file
93 lines
No EOL
4.4 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>On a mobile device, using multiple column layouts isn't generally recommended because of the narrow screen width but there are times where you may need to place buttons or other small elements side-by-side. </p>
|
|
<p>The framework provides a simple way to build CSS based columns through the <code>grid</code> block styles. Grids have preset configurations for 2- and 3-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 palced 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">Block A</div>
|
|
<div class="ui-block-b">Block B</div>
|
|
</div><!-- /grid-a -->
|
|
</code></pre>
|
|
<p><strong>Note:</strong> that we've added a height and color swatches to the grid blocks so you can see them but these don't have any appearance by default.</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 -->
|
|
|
|
<p>Here is a more realistic example with text inside:</p>
|
|
|
|
<div class="ui-grid-a">
|
|
<div class="ui-block-a"><strong>I'm block-b</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>
|
|
|
|
<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> |