-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjavascript.html
1836 lines (1750 loc) · 78 KB
/
javascript.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
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript · 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="">
<a href="./index.html">概述</a>
</li>
<li class="">
<a href="./scaffolding.html">框架</a>
</li>
<li class="">
<a href="./base-css.html">基础CSS</a>
</li>
<li class="">
<a href="./components.html">组件</a>
</li>
<li class="active">
<a href="./javascript.html">Javascript插件</a>
</li>
<li class="">
<a href="./less.html">使用LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">定制</a>
</li>
<li class="">
<a href="./examples.html">例子</a>
</li>
<li class="">
<a href="./wrongway.html">译者言</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Bootstrap的Javascript</h1>
<p class="lead">
让Bootstrap的组件变得生动—提供了12种 <a href="http://jquery.com/" target="_blank">jQuery</a> 组件。
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#javascript">所有插件</a></li>
<li><a href="#modals">对话框</a></li>
<li><a href="#dropdowns">下拉项</a></li>
<li><a href="#scrollspy">滚动侦测</a></li>
<li><a href="#tabs">标签页</a></li>
<li><a href="#tooltips">工具提示</a></li>
<li><a href="#popovers">弹出提示</a></li>
<li><a href="#alerts">通知</a></li>
<li><a href="#buttons">按钮</a></li>
<li><a href="#collapse">折叠</a></li>
<li><a href="#carousel">轮播</a></li>
<li><a href="#typeahead">输入提醒</a></li>
</ul>
</div>
</header>
<!-- Using Javascript w/ Bootstrap
================================================== -->
<section id="javascript">
<div class="page-header">
<h1>jQuery插件 <small>12个Bootstrap插件的简短介绍</small></h1>
</div>
<div class="row">
<div class="span3">
<label>
<h3><a href="./javascript.html#modals">对话框</a></h3>
<p>
类似传统的javascript模态对话框，但更圆滑更灵活，带有最基本的功能和智能的默认项
</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#dropdowns">下拉项</a></h3>
<p>
这个简单的插件几乎可以给Bootstrap的任何组件添加下拉项。
Bootstrap为导航栏，标签页和胶囊链接提供完整的下拉菜单特性。
</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#scrollspy">滚动侦听</a></h3>
<p>
滚动侦听会根据当前滚动条位置而自动更新导航栏中的链接状态。
</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#tabs">可切换的标签页</a></h3>
<p>
该插件通过点击标签页和胶囊链接切换显示不同容器中的内容
</p>
</label>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<label>
<h3><a href="./javascript.html#tooltips">工具提示</a></h3>
<p>
该插件借鉴了jQuery的Tipsy插件，并不依赖于图像—
而是使用CSS3实现动画效果并利用data属性存储本地标题。
</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#popovers">弹出提示</a> <small class="muted">*</small></h3>
<p>
与iPad上的效果类似，将存放输助信息的元素显示为弹出框提示。
</p>
<p class="muted"><strong>*</strong> 需要包含 <a href="#tooltips">工具提示(Tooltips)</a> </p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#alerts">通知消息</a></h3>
<p>
通知插件利用轻巧的类以实现关闭通知框的功能。
</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#buttons">按钮</a></h3>
<p>
控制按钮状态或者为其他复合控件(比如工具条)创建按钮组。
</p>
</label>
</div>
</div> <!-- /row -->
<div class="row" style="margin-bottom: 9px;">
<div class="span3">
<label>
<h3><a href="./javascript.html#collapse">折叠</a></h3>
<p>
为可折叠的组件(比如手风琴式应用，导航栏)提供基本样式和灵活地支持。
</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#carousel">轮播</a></h3>
<p>
创建跑马灯效果，以幻灯片方式展示内容。
</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#typeahead">输入提醒</a></h3>
<p>
简单且易于拓展，可迅速地为表单中的文本输入框创建优雅的提示。
</p>
</label>
</div>
<div class="span3">
<label>
<h3>过渡效果 <small class="muted">*</small></h3>
<p>对于简单的转场效果，包含 bootstrap-transition.js 文件即可滑入幻灯片或淡出消息框。</p>
<p class="muted"><strong>*</strong> 需要动画(animation)插件支持</p>
</label>
</div>
</div> <!-- /row -->
<div class="alert alert-info"><strong>强调！</strong> 所有的javascript插件都需要最新版本的jQuery支持。</div>
</section>
<!-- Modal
================================================== -->
<section id="modals">
<div class="page-header">
<h1>对话框 <small>bootstrap-modal.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>模态对话框介绍</h3>
<p>
类似传统的javascript模态对话框，但更圆滑更灵活，带有最基本的功能和智能默认项。
</p>
<a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
</div>
<div class="span9 columns">
<h2>静态的例子</h2>
<p>下面就是一个静态渲染的模态对话框。</p>
<div class="well modal-example" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>天朝，你好....</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存更改</a>
</div>
</div>
</div> <!-- /well -->
<h2>动态的例子</h2>
<p>点击下的按钮会通过javascript触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<h4>对话框文字</h4>
<p>
高考临近，湖北孝感惊现史上最刻苦“吊瓶班”。这是昨日孝感市第一高级中学某晚自习教室的一幕，"吊瓶高考班"轰动全校！不知台上的老师面对如此震撼的场面和沁人心脾的药水味，如何站稳脚跟hold住全场呢？该校学生表示，备战高考，补充能量挨几针也是值得的，你hold住了吗？
</p>
<h4>对话框中的弹出提示</h4>
<p> <a href="#" class="btn popover-test" title="花钱买座位" data-content="青岛工学院最近下发通知，将考研自习室772个座位“有偿提供”，5元起售，目前已售出500多个座位。根据采光通风等条件不同，座位每月收费划分为5元、10元、15元、20元、25元五个档次，学生购买时要一次交纳10个月的费用。教务处长称， 为了给学生解决考研复习问题，只好“出此下策”。">学生真不易</a> 把鼠标放上来试试？</p>
<h4>对话框中的工具提示</h4>
<p>
5月1日，济南一名<a href="#" class="tooltip-test" title="城管里面也有好人，把他们变成坏人的是恶的制度">城管</a>要对一位抱着三四岁孩子的<a href="#" class="tooltip-test" title="小商贩真的很辛苦，不要再欺负辛劳人了">女商贩</a>扣留时候发生争执。争执中女商贩抱着孩子给城管下跪,城管见状也向女商贩跪下。事后城管称，下跪是为了与对方“平等对话”,也怕对孩子心理产生不良影响。
</p>
<hr>
<h4>对溢出文本使用可选的滚动条</h4>
<p>
我们对 <code>.modal-body</code> 样式修正了 <code>max-height</code> 。对于超过高度的内容就会显示滚动条。
</p>
<p>南京街头某家麦当劳门口，一个外国人买了两包薯条，分给乞讨的老奶奶一包，两人席地而坐，开心地吃着聊着。</p>
<p>@说书者一枚 ：《帝都日爆》射论：《从麦当劳事件看美国小伙的拙劣表演》：这位美国小伙拙劣的”亲民民主表演“，再次印证了中国的古语“黄鼠狼给鸡拜年没安好心”。这道貌岸然的潜伏”美国政客“，想用糖衣炮弹瓦解坚强的中国无产阶级老奶奶，必定遭到中国人民的唾弃！不要做自取其辱的丑事！（完，完蛋的完） </p>
<p>4日晚，东莞东城海雅百货前，一女子被偷包，巴西籍男子MOZEN阻止，遭小偷团伙报复群殴。其间数十名路人在场，无人施救。MOZEN说，小偷打他，他觉得正常，可没有任何人帮他，让他觉得不正常，“这个社会是需要互相帮助的，我整天出没在君豪商业中心，中心几乎大部分人都认识我，却没有一个人帮我，这让我觉得很失望，很心寒”。</p>
<p>MOZEN说，海雅百货这一带治安很乱，这已经不是他第一次阻止小偷行窃了，早在今年春节前，他就曾扑倒过一个小偷。可有了这一次的经历，如果下回再碰上类似情况，他不会也不敢再帮忙了。</p>
<p>美国总统富兰克林·罗斯福1942年6月14日美国国旗纪念日广播演讲：“我们所有人都是地球的子孙，有些道理不言而喻，如果我们的兄弟在遭受压迫，我们也将遭受压迫，如果他们在忍饥挨饿，我们也将忍饥挨饿，如果他们的自由权利被剥夺，我们的自由也将不复存在......<a href="http://t.cn/aDoq5K"></a>http://t.cn/aDoq5K</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >关闭</a>
<a href="#" class="btn btn-primary">保存更改</a>
</div>
</div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">点击演示</a>
<hr>
<h2>使用 bootstrap-modal</h2>
<div id="modalbackdroptrue" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>有遮蔽背景</h3>
</div>
<div class="modal-body">
<h4>backdrop为true</h4>
<p>
有遮蔽背景，点击背景即可关闭对话框。
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >关闭</a>
<a href="#" class="btn btn-primary">保存更改</a>
</div>
</div>
<div id="modalbackdropfalse" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>无遮蔽背景</h3>
</div>
<div class="modal-body">
<h4>backdrop为false</h4>
<p>
对对话框背景使用 <code>static</code> ，无遮蔽，不支持背景click关闭对话框。
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >关闭</a>
<a href="#" class="btn btn-primary">保存更改</a>
</div>
</div>
<div id="modalkeyboardtrue" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>按ESC键关闭对话框</h3>
</div>
<div class="modal-body">
<h4>keyboard为true</h4>
<p>
按ESC可以关闭对话框，按ESC试试
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >关闭</a>
<a href="#" class="btn btn-primary">保存更改</a>
</div>
</div>
<div id="modalkeyboardfalse" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>按ESC键无法关闭对话框</h3>
</div>
<div class="modal-body">
<h4>keyboard为false</h4>
<p>
按ESC不能关闭对话框，按ESC试试
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >关闭</a>
<a href="#" class="btn btn-primary">保存更改</a>
</div>
</div>
<div id="modaltoggle" class="modal hide" data-backdrop='false'>
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>手动触发/关闭对话框</h3>
</div>
<div class="modal-body">
<h4>手动触发/关闭</h4>
<p>
再点击一次按钮就会关闭对话框
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >关闭</a>
<a href="#" class="btn btn-primary">保存更改</a>
</div>
</div>
<p>通过javascript调用模态对话框：</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
<h3>选项(options)</h3>
<pre class="prettyprint linenums">
$('#myModal').modal({
backdrop:true,
keyboard:true,
show:true
});</pre>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">名称</th>
<th style="width: 50px;">类型</th>
<th style="width: 50px;">默认</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>backdrop</td>
<td>布尔值</td>
<td>true</td>
<td>
为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。<a class="btn btn-primary btn-mini" id="backdroptrue">点击演示</a> <br />
为false时，无背景。<a class="btn btn-primary btn-mini" id="backdropfalse">点击演示</a>
</td>
</tr>
<tr>
<td>keyboard</td>
<td>布尔值</td>
<td>true</td>
<td>
为true时按下ESC键关闭模态对话框。<a class="btn btn-primary btn-mini" id="keyboardtrue">点击演示</a><br />
为false时无效。<a class="btn btn-primary btn-mini" id="keyboardfalse">点击演示</a>
</td>
</tr>
<tr>
<td>show</td>
<td>布尔值</td>
<td>true</td>
<td>是否在初始化时显示对话框。</td>
</tr>
</tbody>
</table>
<h3>标记</h3>
<p>
我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 <code>data-toggle="modal"</code> ，然后将
<code>data-target="#foo"</code> 或 <code>href="#foo"</code> 设为某个对话框元素的id，这样点击激发元素就会弹出对话框。
</p>
<pre class="prettyprint linenums"><a class="btn" data-toggle="modal" href="#myModal" >点击触发对话框</a></pre>
<p>
如果需要带选项的对话框，可以在激发元素或是对话框元素的data-属性中设置选项值。
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-keyboard="false" data-backdrop="false">点击"无ESC关闭，无遮蔽背景"演示</a>
<pre class="prettyprint linenums"><a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="false" >点击"无ESC关闭，无遮蔽背景"演示</a></pre>
</p>
<pre class="prettyprint linenums">
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框内容</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存更新</a>
</div>
</div>
</pre>
<div class="alert alert-info">
<strong>强调！</strong>
要实现对话框显示与消隐时的动画效果，必须包含 bootstrap-transition.js.，再对 <code>.modal</code> 元素应用 <code>.fade</code> ，即可实现淡入淡出。
</div>
<h3>方法</h3>
<h4>.modal(options)</h4>
<p>将某个元素变成对话框激活，接受一个 <code>object</code> 做为可选参数。</p>
<pre class="prettyprint linenums">
$('#myModal').modal({
keyboard: false
})</pre>
<h4>.modal('toggle')</h4>
<p>手动切换对话框打开和关闭。<a class="btn btn-primary btn-mini" id="amodaltoggle">点击演示</a></p>
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
<h4>.modal('show')</h4>
<p>打开对话框</p>
<pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
<h4>.modal('hide')</h4>
<p>关闭对话框</p>
<pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
<h3>事件</h3>
<p>
Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。
</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">事件</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>
该事件在调用 <code>show</code> 方法时立刻触发。
</td>
</tr>
<tr>
<td>shown</td>
<td>
该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。
</td>
</tr>
<tr>
<td>hide</td>
<td>
该事件在对话框使用 <code>hide</code> 方法时立刻触发。
</td>
</tr>
<tr>
<td>hidden</td>
<td>
该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。
</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#myModal').on('hidden', function () {
// do something…
})</pre>
</div>
</div>
</section>
<!-- Dropdown
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>下拉项 <small>bootstrap-dropdown.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>下拉项介绍</h3>
<p>
这个简单的插件几乎可以给Bootstrap的任何组件添加下拉项。 Bootstrap导为航栏，标签页和胶囊链接提供完整的下拉菜单特性。
</p>
<a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">下载文件</a>
</div>
<div class="span9 columns">
<h2>例子</h2>
<p>
点击下面的导航栏链接和胶囊链接以测试下拉项。
</p>
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">项目名称</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">另一个链接</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">另一个链接</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">另一个链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!-- /navbar-example -->
<ul class="nav nav-pills">
<li class="active"><a href="#">规则的链接</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">另一个链接</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">另一个链接</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">另一个链接</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
<hr>
<h2>使用bootstrap-dropdown.js</h2>
<p>通过javascript调用下拉项：</p>
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
<h3>标记</h3>
<p>
包含bootstrap-dropdown.js，然后设置 <code>data-toggle="dropdown"</code> 可以为任何元素添加并激活下拉项
</p>
<div class="alert alert-info">
<strong>强调！</strong>
可以使用 <code>data-target="#id"</code> 或 <code>href="#id"</code> 激活某个下拉项，如下
</div>
<ul class="nav nav-pills">
<li><a href="#">规则的链接</a></li>
<li class="dropdown" id="menutest1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">
下拉项
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</li>
<li class='active'>
<a data-toggle="dropdown" href="#menutest1">
点击我看看
</a>
</li>
</ul>
<pre class="prettyprint linenums">
<ul class="nav nav-pills">
<li><a href="#">规则的链接</a></li>
<li class="dropdown" id="menutest1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">
下拉项
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</li>
<li class='active'>
<a data-toggle="dropdown" href="#menutest1">点击我看看</a>
</li>
</ul></pre>
<h3>方法</h3>
<h4>$().dropdown()</h4>
<p>用于激活某个导航条/标签页导航栏下的菜单</p>
</div>
</div>
</section>
<!-- ScrollSpy
================================================== -->
<section id="scrollspy">
<div class="page-header">
<h1>滚动侦测 <small>bootstrap-scrollspy.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<p>滚动侦测会根据当前滚动条位置而自动更新导航栏中的链接状态。</p>
<a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">下载文件</a>
</div>
<div class="span9 columns">
<h2>使用滚动侦测的导航条例子</h2>
<p>
滚动下面的内容区域，然后观察导航条状态，导航条中的菜单甚至下拉项都会同步高亮。试一下！
</p>
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">项目名称</a>
<ul class="nav">
<li><a href="#fat">红利</a></li>
<li><a href="#mdo">哈芬</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">党国大事 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#one">遛狗</a></li>
<li><a href="#two">失踪</a></li>
<li class="divider"></li>
<li><a href="#three">耳光</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
<h4 id="fat">红利</h4>
<p>
中方向美方承诺提高国有企业红利上缴比例，增加上缴利润的中央国企和省级国企的数量，将国有资本经营预算纳入国家预算体系。还承诺，鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。<br /><br />
美方认为，提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支，从而有可能降低中国人大量储蓄的必要性，让他们提高消费支出，从而达到刺激中国内需的目的。
</p>
<h4 id="mdo">哈芬</h4>
<p>
据估，中国高铁槽道市场约十几亿元，德国哈芬占70%。业内人士称，中铁设计院的铁道图纸，直接指定使用哈芬，而非技术标准。哈芬在德国使用成本高昂的不锈钢，在中国则是碳钢。更有业内人士证实，目前中国高铁用的实为国内生产，原产几乎不足四分之一。（财新）
</p>
<h4 id="one">遛狗</h4>
<p>
近日，拍摄于四川绵阳街头的一张照片引起热议，一辆在路上行驶的法院警车，车窗里伸出一个宠物狗的脑袋，四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知，这是我国新近引进的一批特殊品种警犬，为麻痹犯罪分子，故意化妆成宠物狗的样子。
</p>
<h4 id="two">失踪</h4>
<p>
4月25日，19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时，竟然发现这一区域已先后有8名青少年失踪，其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车，被扔进黑砖窑强迫劳动，后逃离黑砖窑重获自由。
</p>
<h4 id="three">耳光</h4>
<p>
30多岁女人直接吐东西在刚扫过的地上，环卫大姐上去说了两句，结果挨了三巴掌三脚。见到被打的环卫大姐时，她精神不好，坐在凳子上不说话，左脸的伤痕还很显眼，工友在一旁照料她。2012年5月4日，浙江省，杭州市。
</p>
<p>
尹大姐说：“小孩子都知道不能在街上乱吐。”那女人说：那不就是你们环卫应该做的事情吗？尹大姐说：难道我们环卫工人就低人一等吗？”话音刚落，“啪”“啪”“啪”三个巴掌落在尹大姐脸上。
</p>
</div>
<hr>
<h2>使用bootstrap-scrollspy.js</h2>
<p>通过javascript调用滚动侦测：</p>
<pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
<h3>标记</h3>
<p>
在想侦测的元素(往往是body)上添加 <code>data-spy="scroll"</code> 就很容易在置顶导航条上实现滚动侦测。
</p>
<pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre>
<div class="alert alert-info">
<strong>强调！</strong>
导航条链接必须指向一个可解析的元素id。举个例子，导航中的 <code><a href="#home">home</a></code> 必须对应着dom中一个真实存在的id='home'元素，比如 <code><div id="home"></div></code> 。
</div>
<h3>选项</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">名称</th>
<th style="width: 100px;">类型</th>
<th style="width: 50px;">默认</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>数字</td>
<td>10</td>
<td>计算滚动位置时相对顶端的偏移量</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Tabs
================================================== -->
<section id="tabs">
<div class="page-header">
<h1>可切换的标签页 <small>bootstrap-tab.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<p>
该插件通过点击标签页和胶囊链接切换显示不同容器中的内容。
</p>
<a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">下载文件</a>
</div>
<div class="span9 columns">
<h2>标签页例子</h2>
<p>
点击下面的标签(包括下拉菜单项)切换显示不同面板中的内容。
</p>
<ul id="tab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#profile" data-toggle="tab">介绍</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">智慧</a></li>
<li><a href="#dropdown2" data-toggle="tab">夜壶</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>
5月6日，北京，一对新人启用直升机接亲。该直升机是欧洲直升机公司系列，机型为AS350B3，该公司北京唯一可承接低空飞行业务的航空公司，此次为首次承接婚礼。据悉，首次空中婚礼总费用为5万元。定价包括飞行时间和申报审批等费用，飞行时间按照1小时3万元计算。
</p>
</div>
<div class="tab-pane fade" id="profile">
<p>
法国代表社会党参选的奥朗德今晨在大选中获得胜利，成为法兰西第五共和国第七位总统，法国也在17年之后迎来首位左翼总统。萨科齐在5年任内因政绩不佳引发不满，选前处于民调落后的劣势。萨科齐虽试图打造“危机总统”形象，但终未能实现逆转。奥朗德现年58岁，至今未婚，与社会党前总统选举候选人罗亚尔同居30多年，育有4子女，多年来坚持骑车上下班。对华关系持强硬立场。
</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>
平壤某鱼肉样板店经理日云硕（音），在去年金正日和金正恩来店视察时，曾目睹这样一幕：金正恩将父亲让进电梯，然后自己嗖嗖地爬上三层楼梯，电梯再次打开时，他立正向父亲致意。日云硕动情地回忆说：“我被他的忠诚与智慧折服了...”
</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>
不是政府人士，永远不要去做政府的吹鼓手，因为吹鼓手在政府眼里永远只值一个夜壶铜钿，尿急了拿出来用一下，用完了将夜壶放到最角落地方；你吹得越起劲，不仅公众看不起你，政府更看不起你，所以吹鼓手都没有好下场。-----杜月笙
</p>
</div>
</div>
<hr>
<h2>使用bootstrap-tab.js</h2>
<p>通过javascript启动可切换的标签页：</p>
<pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
<h3>标记</h3>
<p>
在某个元素上设置 <code>data-toggle="tab"</code> 或 <code>data-toggle="pill"</code> 而无须编写javascript，就可以激活标签页或是胶囊链接
</p>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#profile" data-toggle="tab">介绍</a></li>
<li><a href="#messages" data-toggle="tab">消息</a></li>
<li><a href="#settings" data-toggle="tab">设置</a></li>
</ul></pre>
<h3>方法</h3>
<h4>$().tab</h4>
<p>
激活一个标签页元素和内容容器。标签页应该含有 <code>data-target='#id'</code> 或 <code>href='#id'</code> 属性以指向dom中的某个容器节点。
</p>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs">
<li class="active"><a href="#home">首页</a></li>
<li><a href="#profile">介绍</a></li>
<li><a href="#messages">消息</a></li>
<li><a href="#settings">设置</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<script>
$(function () {
$('.tabs a:last').tab('show')
})
</script></pre>
<h3>事件</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">事件</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>
该事件在标签开始展示时（尚未渲染完之前）触发。
<code>event.target</code> 指向要激活的标签， <code>event.relatedTarget</code> 提向之前已激活的标签（如果有的话）。
</td>
</tr>
<tr>
<td>shown</td>
<td>
该事件在标签已经呈现后（已渲染完成）触发。
<code>event.target</code> 指向要激活的标签， <code>event.relatedTarget</code> 提向之前已激活的标签（如果有的话）。
</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})</pre>
</div>
</div>
</section>
<!-- Tooltips
================================================== -->
<section id="tooltips">
<div class="page-header">
<h1>工具提示 <small>bootstrap-tooltip.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>工具提示介绍</h3>
<p>
受Jason Frame所写的出色的jQuery.tipsy插件所启发，我们编写了工具提示。做为前者的升级版，工具提示不依赖于图像，
使用css3显示动画效果，利用data-属性对标题做本地化存储。
</p>
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">下载文件</a>
</div>
<div class="span9 columns">
<h2>工具提示的用例</h2>
<p>鼠标经过下面链接时显示工具提示：</p>
<div class="tooltip-demo well">
<p class="muted" style="margin-bottom: 0;">
“这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。”
——<a href="#" rel="tooltip" title="柴静始终站在离新闻最近的地方，她以她的犀利和敏锐、坚定与坚持，最终历练成为一名优秀的新闻工作者。 ">柴静</a>《看见》专访<a href="#" rel="tooltip" title="1954年8月16日生于加拿大的著名电影导演，擅长拍摄动作片以及科幻电影。">卡梅隆</a>
</p>
</div>
<hr>
<h2>使用bootstrap-tooltip.js</h2>
<p>通过javascript触发工具提示：</p>
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
<h3>选项</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">名称</th>
<th style="width: 100px;">类型</th>
<th style="width: 50px;">默认</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>布尔值</td>
<td>true</td>
<td>
为工具提示添加一个淡入的过渡。
</td>
</tr>
<tr>
<td>placement</td>
<td>字符串或函数</td>
<td>'top'</td>
<td>
工具提示的位置：top | bottom | left | right。
</td>
</tr>
<tr>
<td>selector</td>
<td>字符串</td>
<td>false</td>
<td class="tooltip-demo">
如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
</td>
</tr>
<tr>
<td>title</td>
<td>字符串或函数</td>
<td>''</td>
<td>如果'title'属性不存在的话，就使用该值做为默认的标题。</td>
</tr>
<tr>
<td>trigger</td>
<td>字符串</td>
<td>'hover'</td>
<td>工具提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)</td>
</tr>
<tr>
<td>delay</td>
<td>数字或对象</td>
<td>0</td>
<td>
<p>显示和隐藏时的延迟时间(以毫秒计)</p>
<p>如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。</p>
<p>如果是一个对象，其结构就是: <code>delay: { show: 500, hide: 100 }</code></p>
</td>