-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·176 lines (175 loc) · 5.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="stylesheets/treadstone.min.css"/>
<link rel="stylesheet" href="stylesheets/example.min.css"/>
<script type="text/javascript" src="scripts/treadstone.js" defer></script>
<script type="text/javascript" src="scripts/example.js" defer></script>
<title>Treadstone</title>
</head>
<body>
<div class="container">
<article>
<h1>Treadstone</h1>
<section>
<h2>Content-aware Resize Container</h2>
<p>Add <code>class="content-aware-resize"</code> to an element to make it content-aware resizable. For example:</p>
<div class="content-aware-resize example-box">
<div class="content">
<p>This is a conten-aware-resize container.</p>
<form>
<input type="text" placeholder="submit some text"/>
<input type="submit" />
</form>
<button name="delete">Delete one row</button>
</div>
</div>
<ul>
<li><strong>Don't</strong> use <code>padding</code> on content-aware-resize element.</li>
<li>While editing text, resize effect only works on container's child text nodes, not descendants.</li>
</ul>
</section>
<section>
<h2>下拉菜单</h2>
<p>
<a href="#" data-toggle="dropdown" data-target="#dropdown1">下拉菜单</a>
</p>
<div class="dropdown" id="dropdown1">
<menu>
<a href="#">Menu 1</a>
<a href="#">Logout</a>
<a href="#">修改个人资料</a>
</menu>
</div>
</section>
<section>
<h2>弹出居中层(模态)</h2>
<pre><code><a href="#" class="btn" data-toggle="modal" data-target="#server-selector">弹出居中层</a>
<div class="overlay" id="server-selector">
<div class="overlay-inner">
<div class="modal">
<button class="close">×</button>
<div class="modal-header">
<h3>标题</h3>
</div>
<div class="modal-body">
<a href="#" class="btn">按钮一</a>
<a href="#" class="btn">按钮二</a>
<a href="#" class="btn">按钮三</a>
<a href="#" class="btn">按钮四</a>
</div>
</div>
</div>
</div><div class="content-aware-resize">
</div></code></pre>
<a href="#" class="btn" data-toggle="modal" data-target="#server-selector">弹出居中层</a>
<div class="overlay" id="server-selector">
<div class="overlay-inner">
<div class="modal">
<button class="close">×</button>
<div class="modal-header">
<h3>标题</h3>
</div>
<div class="modal-body">
<a href="#" class="btn">按钮一</a>
<a href="#" class="btn">按钮二</a>
<a href="#" class="btn">按钮三</a>
<a href="#" class="btn">按钮四</a>
</div>
</div>
</div>
</div>
</section>
<section>
<h2>按钮样式</h2>
<p>
<a href="#" class="btn">默认按钮</a>
<a href="#" class="blue btn">蓝色按钮</a>
<a href="#" class="cyan btn">青色按钮</a>
<a href="#" class="green btn">绿色按钮</a>
<a href="#" class="red btn">红色按钮</a>
</p>
</section>
<section>
<h2>View</h2>
<h3>Tiles</h3>
<ul class="tiles">
<li>
<img height="50" class="thumbnail" src="images/Red Rose.png" />
<div>
<h5>项目标题</h5>
<h6>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere.</h6>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Piano.png" />
<div>
<h5>项目标题</h5>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Chalk.png" />
<div>
<h5>项目标题</h5>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Snowflake.png" />
<div>
<h5>项目标题</h5>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Target.png" />
<div>
<h5>项目标题</h5>
</div>
</li>
</ul>
</section>
<section>
<h2>Tab</h2>
<ul class="tabs">
<li class="active"><a data-toggle="tab" href="#tab1">公告</a></li>
<li><a data-toggle="tab" href="#tab2">游戏资料</a></li>
<li><a data-toggle="tab" href="#tab3">活动</a></li>
</ul>
<section class="tab-panel" id="tab1">
Tab Panel 1
</section>
<section class="tab-panel" id="tab2">
Tab Panel 2
</section>
<section class="tab-panel" id="tab3">
Tab Panel 3
</section>
</section>
</article>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl.</p>
<div class="row">
<p class="span2">
</p>
<p class="span3">This is span3 <a href="#" data-toggle="dropdown" data-target="#dropdown2">Dropdown 2</a>
<div class="dropdown" id="dropdown2">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</p>
<p class="span7">This is span7
</p>
<div class="span9">
</div>
<div class="span3">This is span3</div>
</div>
<div class="row">
<div class="span8">This is span8
</div>
<div style="position:relative" class="span2">This is span2
</div>
<div class="span2">This is span2</div>
</div>
</div>
</body>
</html>