forked from isensen/Bootstrap_zh
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
258 lines (237 loc) · 11.4 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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a href="./index.html">总述</a>
</li>
<li class="">
<a href="./scaffolding.html">流动布局框架</a>
</li>
<li class="">
<a href="./base-css.html">基本CSS UI元素</a>
</li>
<li class="">
<a href="./components.html">UI部件</a>
</li>
<li class="">
<a href="./javascript.html">Javascript UI库</a>
</li>
<li class="">
<a href="./less.html">在Bootstrap中应用LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">自定义框架</a>
</li>
<li class="">
<a href="./examples.html">快速案例</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
<h1>Bootstrap, from Twitter</h1>
<p>这是一个可以创建出流动布局，高交互性UI的前端开发框架</p>
<p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">View project on GitHub</a>
<a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.2)</small></a>
</p>
</div>
<div class="bs-links">
<ul class="quick-links">
<li><a href="./upgrading.html">从bootsrtap1.4版本升级</a></li>
<li><a href="https://github.com/twitter/bootstrap/zipball/master">下载此文档</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">反馈</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">其他版本</a></li>
</ul>
<ul class="quick-links">
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
</header>
<hr class="soften">
<div class="marketing">
<h1>一个适宜广泛应用的前端框架</h1>
<p class="marketing-byline">十几个值得你应用的理由</p>
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
<h2>易于使用</h2>
<p>和你一样，我们乐于创造杰出的web应用，我们追求让其中的过程更简单，高效。bootstrap由此而生。</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>学习成本低</h2>
<p>所有水平的开发者，设计者有能马上应用bootstrap，无论你是大牛活小白；将它完全部署或是从构架分在应用，随你所愿。</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
<h2>跨平台</h2>
<p>bootstrap兼容于所有主流浏览器，包括各种移动设备。</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
<h2>12 纵格</h2>
<p>网格系统并不是总是适宜，但一个强健流动布局的网格系统核心可以使开发过程大大降低，可以使用内建的网格系统或是自定义。</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
<h2>响应式设计</h2>
<p>应用bootstrap开发响应式应用，bootstrap的UI部件可以根据设备分辨率的不同提供一个始终如一的用户体验。</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>样式表文档</h2>
<p>与其他前端框架不同的是，bootstrap的样式表文档不仅仅包含其特性，还有最佳的样式。</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
<h2>不断增强的框架</h2>
<p>尽管Gzip压缩过的bootstrap只有10kb，bootstrap还有十二个功能性组建可以调用。</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
<h2>自定义jquery库</h2>
<p>通过自定义jquery库，你可以创建良好的交互体验</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/less-small.png">
<h2>基于LESS CSS预处理器</h2>
<p>基于LESS可以在CSS代码中使用变量，内嵌，计算等操作，减少CSS的开发成本。</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-html5.png">
<h3>HTML5</h3>
<p>用它创建支持HTML5元素和语法的应用。</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-css3.png">
<h3>CSS3</h3>
<p>为最终的应用样式提供渐进增强的显示效果。</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-github.png">
<h3>开源</h3>
<p>由在 <a href="https://github.com">GitHub</a>上的大牛创建并维护</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-twitter.png">
<h3>由Twitter提供</h3>
<p>由有经验的工程师<a href="http://twitter.com/fat">FAT</a>和设计师<a href="http://twitter.com/mdo">mdo</a>创建。</p>
</div>
</div><!--/row-->
<hr class="soften">
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p>
<ul class="thumbnails example-sites">
<li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a>
</li>
</ul>
</div><!-- /.marketing -->
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>