2 jQuery Mobile Boilerplate
8 <title> jQuery Mobile Boilerplate - Grids</title>
10 <meta charset="utf-8">
11 <meta name="viewport" content="width=device-width, initial-scale=1">
13 <!-- jQuery Mobile CSS bits -->
14 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
16 <!-- if you have a custom theme, add it here -->
17 <link rel="stylesheet" href="/themes/jQuery-Mobile-Boilerplate.css" />
20 <link rel="stylesheet" href="/css/custom.css" />
22 <!-- Javascript includes -->
23 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
24 <script src="/js/mobileinit.js"></script>
25 <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
26 <script src="/js/application.js"></script>
29 <div data-role="page">
31 <div data-role="header">
32 <a href="../index.html" data-icon="home">Home</a>
36 <div data-role="content">
42 <h2>2 Column Grid</h2>
44 <div class="ui-grid-a">
45 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
46 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
49 <h2>3 Column Grid</h2>
51 <div class="ui-grid-b">
52 <div class="ui-block-a ui-bar-d" style="height:50px">Block A</div>
53 <div class="ui-block-b ui-bar-d" style="height:50px">Block B</div>
54 <div class="ui-block-c ui-bar-d" style="height:50px">Block C</div>
57 <h2>4 Column Grid</h2>
59 <div class="ui-grid-c">
60 <div class="ui-block-a ui-bar-d" style="height:50px">Block A</div>
61 <div class="ui-block-b ui-bar-d" style="height:50px">Block B</div>
62 <div class="ui-block-c ui-bar-d" style="height:50px">Block C</div>
63 <div class="ui-block-d ui-bar-d" style="height:50px">Block D</div>
66 <h2>5 Column Grid</h2>
68 <div class="ui-grid-d">
69 <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
70 <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
71 <div class="ui-block-c ui-bar-d" style="height:50px">C</div>
72 <div class="ui-block-d ui-bar-d" style="height:50px">D</div>
73 <div class="ui-block-e ui-bar-d" style="height:50px">E</div>
76 <h2>Multi-row grids</h2>
78 <div class="ui-grid-a">
79 <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
80 <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
81 <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
82 <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
91 <div data-role="footer" data-theme="c">
92 <p>© 2012 - jQuery Mobile Boilerplate</p>