-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
670 lines (599 loc) · 35.6 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
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
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap中文网</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等,助力开发者掌握并使用这一框架。">
<meta name="keywords" content="Bootstrap,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
<meta name="author" content="Bootstrap中文网">
<meta name="robots" content="index,follow">
<meta name="application-name" content="bootcss.com">
<meta property="qc:admins" content="1603466147627743336375" />
<!-- Site CSS -->
<link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/site.min.css" rel="stylesheet">
<!-- Extras CSS -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/assets/ico/favicon.png">
<script>
var _hmt = _hmt || [];
</script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="/">Bootstrap中文网</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">首页</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap2中文文档<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="">
<a href="http://v2.bootcss.com/getting-started.html" target="_blank">起步</a>
</li>
<li class="">
<a href="http://v2.bootcss.com/scaffolding.html" target="_blank">脚手架</a>
</li>
<li class="">
<a href="http://v2.bootcss.com/base-css.html" target="_blank">基本CSS样式</a>
</li>
<li class="">
<a href="http://v2.bootcss.com/components.html" target="_blank">组件</a>
</li>
<li class="">
<a href="http://v2.bootcss.com/javascript.html" target="_blank">JavaScript插件</a>
</li>
<li class="">
<a href="http://v2.bootcss.com/customize.html" target="_blank">定制</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap3中文文档<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="http://v3.bootcss.com/getting-started/" target="_blank">起步</a>
</li>
<li>
<a href="http://v3.bootcss.com/css/" target="_blank">CSS</a>
</li>
<li>
<a href="http://v3.bootcss.com/components/" target="_blank">组件</a>
</li>
<li>
<a href="http://v3.bootcss.com/javascript/" target="_blank">JavaScript插件</a>
</li>
<li>
<a href="http://v3.bootcss.com/customize/" target="_blank">定制</a>
</li>
</ul>
</li>
<li><a href="/p/lesscss/" target="_blank">Less 教程</a></li>
<li><a href="http://jquery.bootcss.com/" target="_blank">jQuery API</a></li>
<li><a href="http://expo.bootcss.com" target="_blank">网站实例</a></li>
<li><a href="about.html">关于</a></li>
</ul>
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol> -->
<div class="carousel-inner">
<div class="item active masthead">
<div class="masthead-bg"></div>
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap</h1>
<h2>简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</h2>
<p>
<a class="btn btn-lg btn-primary btn-shadow bs3-link" href="http://v3.bootcss.com/" target="_blank" role="button">Bootstrap3中文文档(v3.0.3)</a>
</p>
<a class="bs2-link" href="http://v2.bootcss.com/" target="_blank" role="button">Bootstrap2中文文档(v2.3.2)</a>
</div>
</div>
</div>
</div>
<!-- <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> -->
</div><!-- /.carousel -->
<div class="bc-social">
<div class="container">
<ul class="bc-social-buttons">
<li>
<span class="label label-success">Bootstrap开发QQ群:</span><del style="display:none;">284095795(已满)、272512220(已满)、277196980(已满)、206172475(已满)、299037589(已满)、112560384(已满)、159566374(已满)、133744974(已满)、248557313(已满)、204114414(已满)、254389549(已满)、295636729(已满)、232693934(已满)、177562758(已满)、308012987(已满)、317170956(已满)、3024830326(已满)、318278283(已满)、311838185(已满)、38012881(已满)、150643228(已满)、136374923(已满)、325405953(已满)、340341281(已满)、332646374、</del>342343389
</li>
<li>
<a href="http://weibo.com/bootcss" title="Bootstrap中文网官方微博" target="_blank"><img src="/assets/img/Sina_Weibo_Logo_RGB_C_E.png" style="height: 30px;" alt="Bootstrap中文网新浪微博"></a>
</li>
</ul>
</div>
</div>
<div class="container projects">
<div class="projects-header page-header">
<h2>Bootstrap相关开源项目推荐</h2>
<p>这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap的</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/headroom.js/" title="Headroom.js 是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'headroom'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/headroom.png" alt="Headroom.js"></a>
<div class="caption">
<h3>
<a href="/p/headroom.js/" title="Headroom.js 是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'headroom'])">Headroom.js<br><small>隐藏或展示页面元素</small></a>
</h3>
<p>
Headroom.js 是一个轻量级、纯 JavaScript 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="http://open.bootcss.com/" title="Bootstrap中文网开放CDN服务" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'opencdn'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/opencdn.png" alt="Open CDN"></a>
<div class="caption">
<h3>
<a href="http://open.bootcss.com/" title="Bootstrap中文网开放CDN服务" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'opencdn'])">Open CDN<br><small>开放CDN服务</small></a>
</h3>
<p>Bootstrap中文网联合又拍云存储共同推出了开放CDN服务,我们对广泛的前端开源库提供了稳定的存储和带宽的支持,例如Bootstrap、jQuery等。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/stickup/" title="stickUp能让页面目标元素“固定”在浏览器窗口的顶部" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'stickup'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/stickup.png" alt="stickUp"></a>
<div class="caption">
<h3>
<a href="/p/stickup/" title="stickUp能让页面目标元素“固定”在浏览器窗口的顶部" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'stickup'])">stickUp<br><small>让页面元素“固定”位置</small></a>
</h3>
<p>
stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/lesscss/" title="LESS一种动态样式语言" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'lesscss'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/lesscss.png" alt="LESSCSS"></a>
<div class="caption">
<h3>
<a href="/p/lesscss/" title="Grunt是基于Node.js的项目构建工具。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'lesscss'])">LESS<br><small>一种动态样式语言</small></a>
</h3>
<p>
LESS为CSS赋予了动态语言的特性,如变量、继承、运算、函数。LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox),也可以借助Node.js或者Rhino在服务端运行。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="http://www.gruntjs.net" title="Grunt是基于Node.js的项目构建工具。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grunt'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/gruntjs.png" alt="Grunt"></a>
<div class="caption">
<h3>
<a href="http://www.gruntjs.net" title="Grunt是基于Node.js的项目构建工具。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grunt'])">Grunt<br><small>项目构建工具</small></a>
</h3>
<p>
Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/buttons/" title="基于 Sass 和 Compass 构建的CSS按钮(button)样式库" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'button'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="/assets/img/buttons.png" alt="Buttons"></a>
<div class="caption">
<h3>
<a href="/p/buttons/" title="基于 Sass 和 Compass 构建的CSS按钮(button)样式库" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'button'])">Buttons<br><small>CSS按钮样式库</small></a>
</h3>
<p>
Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮(button)样式库,图标采用的是<a href="/p/font-awesome/" target="_blank">Font Awesome</a>,可以和Bootstrap融合使用。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/layoutit/" title="Bootstrap可视化布局系统" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'layoutit'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/layoutit.png" alt="Layoutit"></a>
<div class="caption">
<h3>
<a href="/p/layoutit/" title="Bootstrap可视化布局系统" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'layoutit'])">LayoutIt!<br><small>Bootstrap可视化布局</small></a>
</h3>
<p>
LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由<a href="https://github.com/dodgepudding" target="_blank">4wer</a>同学汉化整理。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/unslider/" title="Unslider" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'unslider'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/unslider.png" alt="Unslider"></a>
<div class="caption">
<h3>
<a href="/p/unslider/" title="Unslider" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'unslider'])">Unslider<br><small>jQuery轮播插件</small></a>
</h3>
<p>
Unslider — 一个超小的 jQuery 轮播(slider) 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bootstrap-switch/" title="Bootstrap Switch" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'switch'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/bootstrap-switch.png" alt="Bootstrap Switch"></a>
<div class="caption">
<h3>
<a href="/p/bootstrap-switch/" title="Bootstrap Switch" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'switch'])">Bootstrap Switch<br><small>Bootstrap开关组件</small></a>
</h3>
<p>
Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/sco.js/" title="Sco.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'sco'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/sco.js.png" alt="Sco.js"></a>
<div class="caption">
<h3>
<a href="/p/sco.js/" title="Sco.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'sco'])">Sco.js<br><small>Bootstrap组件增强版</small></a>
</h3>
<p>
由于大部分的Bootstrap js插件是无法扩展的,因此才有了sco.js,它是对Bootsrap中js插件的增强实现。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/icheck/" title="iCheck" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'icheck'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/icheck.png" alt="iCheck"></a>
<div class="caption">
<h3>
<a href="/p/icheck/" title="iCheck" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'icheck'])">iCheck<br><small>增强复选框和单选按钮</small></a>
</h3>
<p>
iCheck让不同浏览器下的复选框(checkboxes)和单选按钮(radio button)更美观、功能更强。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bootstrap-wysiwyg/" title="bootstrap-wysiwyg" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'wysiwyg'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/bootstrap-wysiwyg.png" alt="Bootstrap WYSIWYG"></a>
<div class="caption">
<h3>
<a href="/p/bootstrap-wysiwyg/" title="bootstrap-wysiwyg" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'wysiwyg'])">bootstrap-wysiwyg<br><small>为Bootstrap定制的可视编辑器</small></a>
</h3>
<p>
bootstrap-wysiwyg是一个jQuery Bootstrap插件(5KB, < 200 行代码)可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/chart.js/" title="Chart.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'chartjs'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/chart.js.png" alt="Chart.js"></a>
<div class="caption">
<h3>
<a href="/p/chart.js/" title="Chart.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'chartjs'])">Chart.js<br><small>精巧的JS图表绘制工具库</small></a>
</h3>
<p>
Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/preboot/" title="Preboot" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'preboot'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/preboot.png" alt="Preboot"></a>
<div class="caption">
<h3>
<a href="/p/preboot/" title="Preboot" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'preboot'])">Preboot<br><small>Bootstrap之前世</small></a>
</h3>
<p>
Preboot是一组用LESS语法书写的混合(mixin)和变量(variable)的集合,目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/jquery.pin/" title="jQuery.Pin" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'pin'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/jquery.pin.png" alt="jQuery.Pin"></a>
<div class="caption">
<h3>
<a href="/p/jquery.pin/" title="jQuery.Pin" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'pin'])">jQuery.Pin<br><small>固定页面元素的jQuery插件</small></a>
</h3>
<p>
jQuery.Pin 能将任意页面元素“钉”在某个容器顶部,而且在尺寸小的屏幕上能够自动禁用这种效果。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/responsive-nav.js/" title="响应式导航" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'navjs'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/responsive-nav.js.png" alt="Responsive Nav"></a>
<div class="caption">
<h3>
<a href="/p/responsive-nav.js/" title="响应式导航" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'navjs'])">Responsive Nav<br><small>响应式导航</small></a>
</h3>
<p>
响应式导航(Responsive Nav)是一个很小的JS插件,压缩之后仅有1.7KB,能帮你创建针对小屏幕的可切换式导航
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bsie/" title="Bootstrap IE6兼容方案" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsie'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/bsie.png" alt="BSIE"></a>
<div class="caption">
<h3>
<a href="/p/bsie/" title="Bootstrap IE6兼容方案" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsie'])">Bsie<br><small>Bootstrap IE6兼容方案</small></a>
</h3>
<p>
Bsie弥补了Bootstrap对IE6的不兼容。目前,bsie能在IE6上支持大部分bootstrap的特性,可惜,还有一些实在无法支持...
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/messenger/" title="非常酷的弹框(Alert)组件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'messenger'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/messenger.png" alt="Messenger"></a>
<div class="caption">
<h3>
<a href="/p/messenger/" title="非常酷的弹框(Alert)组件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'messenger'])">Messenger<br><small>非常酷的弹框(Alert)组件</small></a>
</h3>
<p>
Messenger是一个非常酷的弹框(Alert)组件,能够非常好的与Bootstrap融合,当然,单独使用效果也是非常棒。Messenger自带4套皮肤。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bootstrap-datetimepicker/" title="Bootstrap日期时间选择器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'datetimepicker'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/bootstrap-datetimepicker.png" alt="Bootstrap Datetimepicker"></a>
<div class="caption">
<h3>
<a href="/p/bootstrap-datetimepicker/" title="Bootstrap日期时间选择器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'datetimepicker'])"> DateTime Picker<br><small>日期时间选择器</small></a>
</h3>
<p>
Bootstrap日期时间选择器(Bootstrap DateTime Picker)是一个Bootstrap组件,能够简化页面上日期、时间的输入。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/jquery-ui-bootstrap/" title="基于Bootstrap样式的 jQuery UI 控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'jquibootstrap'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/jquery-ui-bootstrap.png" alt="jQuery UI Bootstrap"></a>
<div class="caption">
<h3>
<a href="/p/jquery-ui-bootstrap/" title="基于Bootstrap样式的 jQuery UI 控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'jquibootstrap'])">jQuery UI Bootstrap <br><small>用Bootstrap美化jQuery UI</small></a>
</h3>
<p>这套工具让你在使用jQuery UI 控件时也能充分利用Bootstrap的样式,而且不会出现样式不统一的现象,Bootstrap和jQuery UI可以完美融合在一起了!</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/google-bootstrap/" title="Google风格的Bootstrap" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'googlebootstrap'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/google-bootstrap.png" alt="Google-Style Bootstrap"></a>
<div class="caption">
<h3>
<a href="/p/google-bootstrap/" title="Google风格的Bootstrap" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'googlebootstrap'])">Google Bootstrap <br><small>Google风格的Bootstrap</small></a>
</h3>
<p>Google的UI素来以简洁著称,现在Bootstrap也来Google Style一把,喜欢Google的就来试试这套Google Bootstrap吧!</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/flat-ui/" title="Flat UI" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'flatui'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/flat-ui.png" alt="Flat UI"></a>
<div class="caption">
<h3>
<a href="/p/flat-ui/" title="Flat UI" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'flatui'])">Flat UI<br><small>Metro风格的Bootstrap</small></a>
</h3>
<p>
Flat UI是基于Bootstrap做的Metro化改造,由<a href="http://designmodo.com/">Designmodo</a>提供。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。再此强烈推荐!
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/metro-ui-css/" title="Bootstrap Metro UI CSS" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'metrouicss'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/metro-ui-css.png" alt="Bootstrap Metro UI CSS"></a>
<div class="caption">
<h3>
<a href="/p/metro-ui-css/" title="Bootstrap Metro UI CSS" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'metrouicss'])">Metro UI CSS <br><small>Bootstrap与Metro融合</small></a>
</h3>
<p>
Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式。现在,Metro UI CSS项目在Bootstrap的基础上被开发成一个独立的解决方案。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/font-awesome/" title="Font Awesome" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'fontawesome'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/font-awesome.png" alt="Font Awesome"></a>
<div class="caption">
<h3>
<a href="/p/font-awesome/" title="Font Awesome" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'fontawesome'])">Font Awesome <br><small>Bootstrap专用图标字体</small></a>
</h3>
<p>
Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/simple-icons/" title="Icon汇" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'simpleicons'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/simpleicons.png" alt="Simple Icons"></a>
<div class="caption">
<h3>
<a href="/p/simple-icons/" title="Icon汇" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'simpleicons'])"> Simple Icons<br><small>Icon汇</small></a>
</h3>
<p>
Simple Icons -- Icon汇。收集众多网站的Logo,并提供高质量、不同尺寸的png格式图片给广大网友,所有Icon版权归其所属公司。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bootstrap-form-builder/" title="Bootstrap 在线表单构造器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsformbuilder'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/bootstrap-form-builder.png" alt="Bootstrap Form Builder"></a>
<div class="caption">
<h3>
<a href="/p/bootstrap-form-builder/" title="Bootstrap 在线表单构造器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsformbuilder'])">Bootstrap Form Builder<br><small>在线表单构造器</small></a>
</h3>
<p>
Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于Bootstrap的完整表单,减轻了各位码农手写HTML代码的劳动,而且不会出错。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/html5boilerplate/" title="HTML5 Boilerplate" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'h5boilerplate'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/h5bp.png" alt="HTML5 Boilerplate"></a>
<div class="caption">
<h3>
<a href="/p/html5boilerplate/" title="HTML5 Boilerplate" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'h5boilerplate'])">HTML5 Boilerplate<br><small>专业的前端模版</small></a>
</h3>
<p>
HTML5 Boilerplate 是一套专业的前端模版,用以开发快速、健壮、适应性强的app或网站。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/websafecolors/" title="Web安全色" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'websafecolors'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/websafecolors.png" alt="Web-Safe Colors"></a>
<div class="caption">
<h3>
<a href="/p/websafecolors/" title="Web安全色" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'websafecolors'])">Web Safe Colors<br><small>Web安全色</small></a>
</h3>
<p>
本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="http://bootstraped.org" title="BootstrapEd = 增强Bootstrap" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bootstraped'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/bootstraped.png" alt="Extended Bootstrap"></a>
<div class="caption">
<h3>
<a href="http://bootstraped.org" title="BootstrapEd = 增强Bootstrap" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bootstraped'])">BootstrapEd<br><small>增强Bootstrap</small></a>
</h3>
<p>
BootstrapEd是基于Bootstrap,并且,优化Bootstrap在中文WEB环境中的效果;增强Bootstrap中的内置组件;增加有价值的通用组件!
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="http://docs.bootcss.com/" title="Bootstrap文档全集" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'docs'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/bootstrap-docs.png" alt="Bootstrap Docs"></a>
<div class="caption">
<h3>
<a href="http://docs.bootcss.com/" title="Bootstrap文档全集" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'docs'])">Bootstrap Docs<br><small>Bootstrap文档全集</small></a>
</h3>
<p>
这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史。Bootstrap本身就是一个传奇,而这些文档就是传奇的见证!
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/git-guide/" title="Git简易指南" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'git'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/git-guide.png" alt="Git Guide"></a>
<div class="caption">
<h3>
<a href="/p/git-guide/" title="git简易指南" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'git'])">Git Guide<br><small>Git简易指南</small></a>
</h3>
<p>
Git简易指南 -- 帮助你开始使用 git 的简易指南,木有高深内容,;)。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/grumblejs/" title="气泡形状的提示(Tooltip)控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grumblejs'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/grumblejs.png" alt="Grumble.js"></a>
<div class="caption">
<h3>
<a href="/p/grumblejs/" title="气泡形状的提示(Tooltip)控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grumblejs'])">Grumble.js<br><small>气泡形状的提示(Tooltip)控件</small></a>
</h3>
<p>
一个气泡形状的提示(Tooltip)控件,可以在其围绕的元素周围做360度任意定位。
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/cikonss/" title="纯CSS实现的Icon" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'cikonss'])"><img class="lazy" src="/assets/img/null.png" width="300" height="150" data-src="assets/img/cikonss.png" alt="Cikonss"></a>
<div class="caption">
<h3>
<a href="/p/cikonss/" title="纯CSS实现的Icon" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'cikonss'])">CIKONSS<br><small>纯CSS实现的Icon</small></a>
</h3>
<p>
Cikonss是纯CSS实现的响应式Icon,兼容IE8+。
</p>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<!-- FOOTER -->
<footer class="footer ">
<p>本网站所列开源项目的中文版文档全部由<a href="http://www.bootcss.com/">Bootstrap中文网</a>成员翻译整理,并全部遵循 <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>协议发布。</p>
<p>Powered By <a href="http://www.bootcss.com/" title="Bootstrap中文网">Bootstrap</a> | <a href="http://less.bootcss.com/" title="Less中文文档">Less</a> | <a href="http://www.gruntjs.net/" title="Grunt中文网">Grunt</a> | <a href="http://www.ghostchina.com/" target="_blank" title="Ghost中文网">Ghost</a></p>
<p>
<a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a>
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/assets/js/jquery.js"></script>
<script src="/assets/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.unveil.min.js"></script>
<script src="/assets/js/jquery.scrollUp.min.js"></script>
<script>
$(document).ready(function(){
$("img.lazy").unveil();
$.scrollUp({
scrollName: 'scrollUp', // Element ID
topDistance: '300', // Distance from top before showing element (px)
topSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: '', // Text for element
activeOverlay: false // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F3d8e7fc0de8a2a75f2ca3bfe128e6391' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>