-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
326 lines (318 loc) · 17.4 KB
/
demo.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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./src/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstraps中文网</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">可爱</a></li>
<li><a href="#">爱笑</a></li>
<li><a href="#">善良</a></li>
<li><a href="#">体贴</a></li>
<li><a href="#">懂我</a></li>
</ul>
<ul class="nav navbar-nav navbar-right item">
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<h1>Bootstrap</h1>
<h2> 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
<p><a class="btn btn-primary btn-lg btn-shadow" href="#" role="button">Bootstrap中文文档(v3.3.7)</a></p>
<ul class="bc-social-buttons">
<li><a href="#">Bootstrap中文文档(v2.3.2)</a></li>
</ul>
</div>
<div class="bc-social">
<div class="container">
<ul class="bc-social-buttons">
<li class="social-forum">
<a class="" href="http://www.baidu.com" title="Bootstrap问答社区">
Bootstrap问答社区
</a>
</li>
<li class="social-weibo">
<a href="http://http://www.baidu.com" title="Bootstrap中文网官方微博" class="line">新浪微博：@Bootstrap中文网</a>
</li>
</ul>
</div>
</div>
<div class="containner projectX">
<div class="page-header">
<h2>Bootstrap相关优质项目推荐</h2>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/codeguide.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/codeguide.png?1525211639341" alt="Bootstrap 编码规范">
<div class="caption">
<h3>
<a href="#">Bootstrap 编码规范<br><small>by @mdo</small></a>
</h3>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/typescript.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/typescript.png?1525211639341" alt="TypeScript 中文手册">
<div class="caption">
<h3>
<a href="#">TypeScript <br><small>中文手册</small></a>
</h3>
<p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img src="https://static.bootcss.com/www/assets/img/luffycity.jpg" width="300" height="150" alt="路飞学城">
<div class="caption">
<h3>
<a>Python全栈开发教程<br><small>免费书籍+视频教程</small></a>
</h3>
<p>使用Python +bootstrap快速构建各种Web项目，快速掌握进入人工智能、数据分析、爬虫、云计算、自动化运维等领域的必备语言。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/webpack.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/webpack.png?1525211639341" alt="Webpack 是前端资源模块化管理和打包工具">
<div class="caption">
<h3>
<a href="https://www.webpackjs.com/" title="Webpack 是前端资源模块化管理和打包工具">
Webpack<br><small>是前端资源模块化管理和打包工具</small>
</a>
</h3>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/jqueryapi.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/jqueryapi.png?1525211639341" alt="jQuery API 中文文档/手册">
<div class="caption">
<h3>
<a href="https://www.jquery123.com/" title="jQuery API 中文文档/手册">
jQuery API <br><small>中文手册</small>
</a>
</h3>
<p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/w3schools.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/w3schools.png?1525211639341" alt="w3schools 原版国内镜像">
<div class="caption">
<h3>
<a href="https://www.quanzhanketang.com/" title="w3schools 原版国内镜像">
w3schools<br><small>原版国内镜像</small>
</a>
</h3>
<p>w3schools.com是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/preact.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/preact.png?1525211639341" alt="Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。">
<div class="caption">
<h3>
<a href="https://preact.bootcss.com/" title="Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。">
Preact<br><small>React 轻量替代方案。</small>
</a>
</h3>
<p>Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/nodejs.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/nodejs.png?1525211639341" alt="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。">
<div class="caption">
<h3>
<a href="https://www.nodeapp.cn/" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。">Node.js<br><small>中文文档 / 手册</small>
</a>
</h3>
<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/codeguide.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/codeguide.png?1525211639341" alt="Bootstrap 编码规范">
<div class="caption">
<h3>
<a href="#">Bootstrap 编码规范<br><small>by @mdo</small></a>
</h3>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/typescript.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/typescript.png?1525211639341" alt="TypeScript 中文手册">
<div class="caption">
<h3>
<a href="#">TypeScript <br><small>中文手册</small></a>
</h3>
<p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img src="https://static.bootcss.com/www/assets/img/luffycity.jpg" width="300" height="150" alt="路飞学城">
<div class="caption">
<h3>
<a>Python全栈开发教程<br><small>免费书籍+视频教程</small></a>
</h3>
<p>使用Python +bootstrap快速构建各种Web项目，快速掌握进入人工智能、数据分析、爬虫、云计算、自动化运维等领域的必备语言。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/webpack.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/webpack.png?1525211639341" alt="Webpack 是前端资源模块化管理和打包工具">
<div class="caption">
<h3>
<a href="https://www.webpackjs.com/" title="Webpack 是前端资源模块化管理和打包工具">
Webpack<br><small>是前端资源模块化管理和打包工具</small>
</a>
</h3>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/jqueryapi.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/jqueryapi.png?1525211639341" alt="jQuery API 中文文档/手册">
<div class="caption">
<h3>
<a href="https://www.jquery123.com/" title="jQuery API 中文文档/手册">
jQuery API <br><small>中文手册</small>
</a>
</h3>
<p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/w3schools.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/w3schools.png?1525211639341" alt="w3schools 原版国内镜像">
<div class="caption">
<h3>
<a href="https://www.quanzhanketang.com/" title="w3schools 原版国内镜像">
w3schools<br><small>原版国内镜像</small>
</a>
</h3>
<p>w3schools.com是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/preact.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/preact.png?1525211639341" alt="Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。">
<div class="caption">
<h3>
<a href="https://preact.bootcss.com/" title="Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。">
Preact<br><small>React 轻量替代方案。</small>
</a>
</h3>
<p>Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<img class="lazy" src="https://static.bootcss.com/www/assets/img/nodejs.png?1525211639341" width="300" height="150" data-src="https://static.bootcss.com/www/assets/img/nodejs.png?1525211639341" alt="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。">
<div class="caption">
<h3>
<a href="https://www.nodeapp.cn/" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。">Node.js<br><small>中文文档 / 手册</small>
</a>
</h3>
<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer ">
<div class="container">
<div class="row footer-top">
<div class="col-md-6 col-lg-6">
<h4>
<img src="https://static.bootcss.com/www/assets/img/logo.png?1525211639341">
</h4>
<p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
</div>
<div class="col-md-6 col-lg-5 col-lg-offset-1">
<div class="row about">
<div class="col-sm-3">
<h4>关于</h4>
<ul class="list-unstyled">
<li><a href="/about/">关于我们</a></li>
<li><a href="/ad/">广告合作</a></li>
<li><a href="/links/">友情链接</a></li>
<li><a href="/hr/">招聘</a></li>
</ul>
</div>
<div class="col-sm-3">
<h4>联系方式</h4>
<ul class="list-unstyled">
<li><a href="http://weibo.com/bootcss" title="Bootstrap中文网官方微博" target="_blank">新浪微博</a></li>
<li><a href="mailto:admin@bootcss.com">电子邮件</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4>旗下网站</h4>
<ul class="list-unstyled">
<li><a href="http://www.golaravel.com/" target="_blank">Laravel中文网</a></li>
<li><a href="http://www.ghostchina.com/" target="_blank">Ghost中国</a></li>
<li><a href="http://www.bootcdn.cn/" target="_blank">BootCDN</a></li>
<li><a href="https://pkg.phpcomposer.com/" target="_blank">Packagist中国镜像</a></li>
<li><a href="https://www.return.net/" target="_blank">燃腾教育</a></li>
</ul>
</div>
<div class="col-sm-2">
<h4>赞助商</h4>
<ul class="list-unstyled">
<li><a href="https://www.upyun.com" target="_blank">又拍云</a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="row footer-bottom">
<ul class="list-inline text-center">
<li><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></li><li>京公网安备11010802014853</li>
</ul>
</div>
</div>
</footer>
</body>
<script src="jquery.js"></script>
<script src="./src/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>