Changing licensing for custom pieces
[ReadingsJQM.git] / snippets / grids.html
1 <!--
2         jQuery Mobile Boilerplate
3 -->
4 <!doctype html>
5 <html>
6 <head>
7         <meta charset="utf-8">
8         <meta name="viewport" content="width=device-width, initial-scale=1">
9         <title> jQuery Mobile Boilerplate </title>
10         <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
11
12         <!-- if you have a custom theme, add it here -->
13         <link rel="stylesheet"  href="themes/jQuery-Mobile-Boilerplate.css" />
14
15         <link rel="stylesheet" href="css/custom.css" />
16
17         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
18         <script src="js/application.js"></script>
19         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
20         
21 </head> 
22 <body> 
23         <div data-role="page">
24
25                 <div data-role="header">
26                         <a href="../index.html" data-icon="home">Home</a>
27                         <h1>Grids</h1>
28                 </div>
29
30                 <div data-role="content">
31
32
33
34
35
36 <h2>2 Column Grid</h2>
37
38 <div class="ui-grid-a">
39         <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
40         <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>         
41 </div>
42
43 <h2>3 Column Grid</h2>
44
45 <div class="ui-grid-b">
46         <div class="ui-block-a ui-bar-d" style="height:50px">Block A</div>
47         <div class="ui-block-b ui-bar-d" style="height:50px">Block B</div>
48         <div class="ui-block-c ui-bar-d" style="height:50px">Block C</div>
49 </div>
50
51 <h2>4 Column Grid</h2>
52
53 <div class="ui-grid-c">
54         <div class="ui-block-a ui-bar-d" style="height:50px">Block A</div>
55         <div class="ui-block-b ui-bar-d" style="height:50px">Block B</div>
56         <div class="ui-block-c ui-bar-d" style="height:50px">Block C</div>
57         <div class="ui-block-d ui-bar-d" style="height:50px">Block D</div>
58 </div>
59
60 <h2>5 Column Grid</h2>
61
62 <div class="ui-grid-d">
63         <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
64         <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
65         <div class="ui-block-c ui-bar-d" style="height:50px">C</div>
66         <div class="ui-block-d ui-bar-d" style="height:50px">D</div>
67         <div class="ui-block-e ui-bar-d" style="height:50px">E</div>
68 </div>
69
70 <h2>Multi-row grids</h2>
71
72 <div class="ui-grid-a">
73         <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
74         <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
75         <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
76         <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
77 </div>
78
79
80
81
82
83                 </div>
84                 
85                 <div data-role="footer" data-theme="c">
86                         <p>&copy; 2012 - jQuery Mobile Boilerplate</p>
87                 </div>  
88                 
89         </div>
90 </body>
91 </html>