-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·172 lines (171 loc) · 5.75 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
<!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>根据内容自动改变大小的容器</h2>
<p>给元素加上<code>class="content-aware-resize"</code>可以让它变成根据内容自动改变大小的容器。例如：</p>
<div class="content-aware-resize example-box">
<p>这是一个根据内容自动改变大小的容器</p>
<form>
<input type="text" placeholder="在这里输入文字并提交来看看效果"/>
<input type="submit" />
</form>
</div>
<ul>
<li>本容器只在增加和减少子元素时有效果</li>
<li>在减少子元素时，仅当减少奇数个子元素时有效果</li>
<li>直接修改本容器内的文本节点无效果</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>列表样式</h2>
<ul class="tiles">
<li>
<img height="50" class="thumbnail" src="images/Red Rose.tif" />
<div class="content">
<h5>项目标题</h5>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Piano.tif" />
<div class="content">
<h5>项目标题</h5>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Chalk.tif" />
<div class="content">
<h5>项目标题</h5>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Snowflake.tif" />
<div class="content">
<h5>项目标题</h5>
</div>
</li>
<li>
<img height="50" class="thumbnail" src="images/Target.tif" />
<div class="content">
<h5>项目标题</h5>
</div>
</li>
</ul>
</section>
<section>
<h2>选项卡</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>