-
Notifications
You must be signed in to change notification settings - Fork 1
/
javascript.html
1807 lines (1592 loc) · 98.3 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="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트 · 부트스트랩</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- 스타일 -->
<link href="assets/css/bootstrap-ko.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs-ko.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- IE6~8에서 HTML5 태그를 지원하기위한 HTML5 shim -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<!-- 파비콘과 앱 아이콘 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<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">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="./index.html">부트스트랩</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">대문</a>
</li>
<li class="">
<a href="./getting-started.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">자바스크립트</a>
</li>
<li class="">
<a href="./customize.html">맞춤 다운로드</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Subhead
================================================== -->
<header class="jumbotron subhead">
<div class="container">
<h1>자바스크립트</h1>
<p class="lead">이제 13개 맞춤 jQuery 플러그인을 사용하여 부트스트랩 화면 구성요소에 활력을 넣는다.
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
</header>
<div class="container">
<div class="alert alert-danger bs-alert-old-docs">
<strong>주의!</strong> 더 이상 공식지원하지 않는 v2.3.2 문서입니다. <a href="http://getbootstrap.com">최신 버전 부트스트랩을 확인하세요!</a>
</div>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#overview"><i class="icon-chevron-right"></i> 개요</a></li>
<li><a href="#transitions"><i class="icon-chevron-right"></i> 전환</a></li>
<li><a href="#modals"><i class="icon-chevron-right"></i> 모달</a></li>
<li><a href="#dropdowns"><i class="icon-chevron-right"></i> 드롭다운</a></li>
<li><a href="#scrollspy"><i class="icon-chevron-right"></i> 스크롤 추적 (scrollspy)</a></li>
<li><a href="#tabs"><i class="icon-chevron-right"></i> 탭</a></li>
<li><a href="#tooltips"><i class="icon-chevron-right"></i> 툴팁</a></li>
<li><a href="#popovers"><i class="icon-chevron-right"></i> 팝오버</a></li>
<li><a href="#alerts"><i class="icon-chevron-right"></i> 경고</a></li>
<li><a href="#buttons"><i class="icon-chevron-right"></i> 버튼</a></li>
<li><a href="#collapse"><i class="icon-chevron-right"></i> 숨김 (collapse)</a></li>
<li><a href="#carousel"><i class="icon-chevron-right"></i> 회전광고판 (carousel)</a></li>
<li><a href="#typeahead"><i class="icon-chevron-right"></i> 자동완성 (typeahead)</a></li>
<li><a href="#affix"><i class="icon-chevron-right"></i> 애픽스 메뉴</a></li>
</ul>
</div>
<div class="span9">
<!-- Overview
================================================== -->
<section id="overview">
<div class="page-header">
<h1>부트스트랩 속 자바스크립트</h1>
</div>
<h3>개별 혹은 컴파일된 결과</h3>
<p>플러그인을 개별로 (일부 의존관계와 함께) 하나씩 포함할 수 있고, 한번에 모두 포함할 수도 있다. <strong>bootstrap.js</strong>와 <strong>bootstrap.min.js</strong>는 파일 하나에 모든 플러그인을 담고 있다.</p>
<h3>Data 속성</h3>
<p>자바스크립트를 한 줄도 쓰지 않고 순수하게 마크업 API로만 모든 부트스트랩 플러그인을 사용할 수 있다. 이 방법은 부트스트랩에서 자동으로 동작하며 플러그인을 사용할 때 제임 처음으로 고려할 방법이다.</p>
<p>그러나 이 기능을 끄고 싶을 경우가 있다. 그래서 data 속성 API를 비활성하는 기능을 제공한다. 이렇게 body에 있는 `'data-api'` 이름공간의 모든 이벤트를 해제하면 된다.
<pre class="prettyprint linenums">$('body').off('.data-api')</pre>
<p>특정 플러그인을 지칭하려면, 이렇게 플러그인 이름과 data-api를 함께 이름공간으로 작성한다.</p>
<pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
<h3>API 사용</h3>
<p>또한 순수하게 자바스크립트 API만으로 모든 부트스트랩 플러그인을 사용할 수 있다. 모든 공개 API는 하나로 연속된 메소드이고, 자신의 적용 대상을 반환한다.</p>
<pre class="prettyprint linenums">$(".btn.danger").button("toggle").addClass("fat")</pre>
<p>모든 메소드는 파라미터로 옵션 객체나 특정 메소드를 지칭하는 문자열을 받을 수 있다. 파라미터가 없다면 기본 행동으로 플러그인을 시작한다.</p>
<pre class="prettyprint linenums">
$("#myModal").modal() // 기본값으로 초기화
$("#myModal").modal({ keyboard: false }) // 키보드 없이 초기화
$("#myModal").modal('show') // 초기화하고 즉시 show를 호출</p>
</pre>
<p>또, 모든 플러그인은 `생성자` 속성 <code>$.fn.popover.Constructor</code>에 자신의 원래 생성자를 노출한다. <code>$('[rel=popover]').data('popover')</code> 식으로 태그로 부터 직접 특정 플러그인 인스턴스를 얻을 수 있다.</p>
<h3>충돌 방지</h3>
<p>부트스트랩 플러그인을 다른 UI 프레임워크와 함께 사용하는 경우가 있다. 이런 상황에서 가끔 이름공간 충돌이 일어날 수 있다. 충돌이 발생하면, 되돌리고 싶은 플러그인에 <code>.noConflict</code>를 호출한다.</p>
<pre class="prettyprint linenums">
var bootstrapButton = $.fn.button.noConflict() // $.fn.button 을 이전에 할당한 값으로 되돌린다
$.fn.bootstrapBtn = bootstrapButton // $().bootstrapBtn 에 부트스트랩 기능을 대입한다
</pre>
<h3>이벤트</h3>
<p>부트스트랩은 플러그인의 고유 행동 대부분에 이벤트를 붙인다. 보통 이벤트 이름은 현재형과 과거분사형이다. 현재형(예, <code>show</code>)은 이벤트가 시작할 때 발동하고, 과거분사형(예, <code>shown</code>)은 행동이 마친 뒤 발동한다.</p>
<p>모든 현재형 이벤트는 preventDefault 기능이 있다. 이 기능은 행동이 시작하기 전에 행동의 실행을 중지한다.</p>
<pre class="prettyprint linenums">
$('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // 모달이 보이지 않게 막는다
})
</pre>
</section>
<!-- 전환
================================================== -->
<section id="transitions">
<div class="page-header">
<h1>전환 <small>bootstrap-transition.js</small></h1>
</div>
<h3>전환이란</h3>
<p>간단한 전환 효과를 원한다면, 다른 자바스크립트 파일과 함께 <strong>bootstrap-transition.js</strong>를 한번 포함하라. 컴파일된 (혹은 최소화된) <strong>bootstrap.js</strong>를 사용한다면 이미 들어있기 때문에 포함할 필요가 없다.</p>
<h3>용도</h3>
<p>전환 플러그인의 몇가지 사용예.</p>
<ul>
<li>모달 슬라이드와 페이드인</li>
<li>탭 페이드아웃</li>
<li>경고 페이드아웃</li>
<li>회전광고판 슬라이드</li>
</ul>
</section>
<!-- 모달
================================================== -->
<section id="modals">
<div class="page-header">
<h1>모달 <small>bootstrap-modal.js</small></h1>
</div>
<h2>사용예</h2>
<p>모달은 단순하지만 유연한 대화 상자이다. 필요한 최소 기능을 가지며 나머지를 똑똑하게 처리한다.</p>
<h3>정적 예제</h3>
<p>아래 보이는 모달은 제목과 본문과 꼬리말에 행동들이 있다.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<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>
<pre class="prettyprint linenums">
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<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>
<h3>라이브 시연</h3>
<p>아래 버튼을 클릭하면 자바스크립트로 모달을 켜고 끈다. 모달은 페이지 상단에서 슬라이드하고 페이드인한다.</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">모달 제목</h3>
</div>
<div class="modal-body">
<h4>모달 속 본문</h4>
<p>어느 틈에 기만이가 언덕을 내려와서 영신이가 앉은 맞은편 논둑에 가 버티고 섰다.</p>
<h4>모달 속 팝오버</h4>
<p>이 <a href="#" role="button" class="btn popover-test" title="제목" data-content="그리고 여기 놀라운 내용이 있다. 정말 마음에 들죠?">버튼</a>을 클릭하면 팝오버가 나타난다.</p>
<h4>모달 속 툴팁</h4>
<p><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>영신이도 아름드리 느티나무와 고목이 된 대추나무가 얼크러진 큰마을 편을 바라본다. 옥색 저고리를 입은 호리호리한 사나이가 안경을 번쩍거리며 기다란 살포를 지팡이삼아 짚고 언덕길을 어슬렁거리고 내려온다.</p>
<p>두 사람은 나란히 서서 기만의 등뒤를 돌아 멀리 바다가 내려다보이는 언덕으로 올라갔다. 논과 밭이 눈앞에 질펀히 깔렸는데 여기저기서 두레로 물을 푸는 소리와 소 모는 소리가 들린다.</p>
<p>남들은 다 벗고 들어서서 일을 하는데 저 혼자 외톨로 돌아다니며 구경하듯 하기가 미안스럽기도 하고 한편으로는 무료하기도 해서 이말 저말 묻는 것이다.</p>
<p>영신이도 아름드리 느티나무와 고목이 된 대추나무가 얼크러진 큰마을 편을 바라본다. 옥색 저고리를 입은 호리호리한 사나이가 안경을 번쩍거리며 기다란 살포를 지팡이삼아 짚고 언덕길을 어슬렁거리고 내려온다.</p> </div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">닫기</button>
<button class="btn btn-primary">변경사항 저장</button>
</div>
</div>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">모달 시연 시작</a>
</div>
<pre class="prettyprint linenums">
<!-- 모달을 켜고 끄는 버튼 -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">모달 시연 시작</a>
<!-- 모달 -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">모달 제목</h3>
</div>
<div class="modal-body">
<p>한 멋진 본문…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">닫기</button>
<button class="btn btn-primary">변경사항 저장</button>
</div>
</div>
</pre>
<hr class="bs-docs-separator">
<h2>사용 설명</h2>
<h3>data 속성으로</h3>
<p>자바스크립트를 작성하지 않고 모달을 만든다. 버튼 같은 제어 태그에 <code>data-toggle="modal"</code>을 붙이고, 켜고 끌 대상 모달을 <code>data-target="#foo"</code> 혹은 <code>href="#foo"</code>로 지시한다.</p>
<pre class="prettyprint linenums"><button type="button" data-toggle="modal" data-target="#myModal">모달 시작</button></pre>
<h3>자바스크립트로</h3>
<p>아래 자바스크립트 한 줄은 id가 <code>myModal</code>인 모달을 부른다.</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
<h3>옵션</h3>
<p>data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 <code>data-backdrop=""</code> 처럼 <code>data-</code> 뒤에 옵션 이름을 붙인다.</p>
<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>boolean</td>
<td>true</td>
<td>모달 주위 배경을 어둡게 만드는 modal-backdrop 태그를 포함한다. 혹시 배경을 클릭할 때 모달을 닫지 않고 싶다면 <code>static</code> 값을 사용한다.</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>이스케이프(escape) 키를 누르면 모달을 닫는다</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
<td>true</td>
<td>초기화시 모달을 보인다.</td>
</tr>
<tr>
<td>remote</td>
<td>경로</td>
<td>false</td>
<td><p>외부 url을 지정하면 jQuery <code>load</code> 메소드를 사용하여 읽어들인 본문을 <code>.modal-body</code>에 넣는다. data api를 사용한다면, <code>href</code> 태그로도 외부 출처를 지정할 수 있다. 아래가 그런 예제이다.</p>
<pre class="prettyprint linenums"><code><a data-toggle="modal" href="remote.html" data-target="#modal">여기를 클릭</a></code></pre></td>
</tr>
</tbody>
</table>
<h3>메소드</h3>
<h4>.modal(options)</h4>
<p>내용을 모달로 만든다. 선택적으로 options <code>객체</code>를 받는다.</p>
<pre class="prettyprint linenums">
$('#myModal').modal({
keyboard: false
})
</pre>
<h4>.modal('toggle')</h4>
<p>직접 모달을 켜고 끈다.</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>부트스트랩 모달 클래스는 모달 기능과 연결된 몇가지 이벤트를 가진다.</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 () {
// 무언가를 한다…
})
</pre>
</section>
<!-- 드롭다운
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>드롭다운 <small>bootstrap-dropdown.js</small></h1>
</div>
<h2>사용예</h2>
<p>이 간단한 플러그인을 사용하여 탐색막대, 탭, 알약 등 거의 모든 곳에 드롭다운 메뉴를 붙인다.</p>
<h3>탐색막대에서</h3>
<div class="bs-docs-example">
<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" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">드롭다운 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">다른 행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">여기에는 또 다른</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">따로 떨어진 링크</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">드롭다운 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">다른 행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">여기에는 또 다른</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">따로 떨어진 링크</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">드롭다운 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">다른 행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">여기에는 또 다른</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">따로 떨어진 링크</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!-- /navbar-example -->
</div>
<h3>탭에서</h3>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">일반 링크</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">드롭다운 <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">다른 행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">여기에는 또 다른</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">따로 떨어진 링크</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">드롭다운 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">다른 행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">여기에는 또 다른</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">따로 떨어진 링크</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">드롭다운 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">다른 행동</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">여기에는 또 다른</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">따로 떨어진 링크</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
</div>
<hr class="bs-docs-separator">
<h2>사용 설명</h2>
<h3>data 속성으로</h3>
<p>드롭다운을 켜고 끌 링크나 버튼에 <code>data-toggle="dropdown"</code>을 더한다.</p>
<pre class="prettyprint linenums">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">드롭다운 작동</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
</pre>
<p>URL을 그대로 두려면 <code>href="#"</code> 대신 <code>data-target</code> 속성을 사용한다.</p>
<pre class="prettyprint linenums">
<div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
드롭다운
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
</pre>
<h3>자바스크립트로</h3>
<p>자바스크립트로 드롭다운을 부른다.</p>
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
<h3>옵션</h3>
<p><em>없음</em></p>
<h3>메소드</h3>
<h4>$().dropdown('toggle')</h4>
<p>해당 탐색막대나 탭의 메뉴를 켜고 끄는 api.</p>
</section>
<!-- 스크롤 추적
================================================== -->
<section id="scrollspy">
<div class="page-header">
<h1>스크롤 추적 (scrollspy) <small>bootstrap-scrollspy.js</small></h1>
</div>
<h2>탐색막대 속 사용예</h2>
<p>스크롤 추적 플러그인은 스크롤 위치에 따라 자동으로 탐색의 선택 대상을 변경한다. 탐색막대 아래 영역을 스크롤하며 현재 클래스 변화를 보라. 드롭다운 하위 항목도 마찬가지로 강조한다.</p>
<div class="bs-docs-example">
<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">@fat</a></li>
<li><a href="#mdo">@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">@fat</h4>
<p>삼층 이십이호실에 들어 있던 젊은 회사원이 오늘 방을 내어놓았다. 얼마 전에 결혼을 하였는데 그 동안 마땅한 집이 없어서 아내는 친정에, 그리고 남편인 자기는 그전에 들어 있던 이 아파트에 그대로 갈라져서 신혼생활답지 않게 지내 오다가 이번에 돈암정 어디다 집을 사고 신접살림을 차려 놓기로 되었다 한다. 오후 여섯시가 가까운 시각, 아마도 회사의 퇴근시간을 이용하여 양주가 어디서 만난 것인지 해가 그믈그믈해서야 회사원은 색시 티가 나는 아내와 함께 짐을 가지러 트럭과 인부를 데리고 왔다.</p>
<h4 id="mdo">@mdo</h4>
<p>인부가 한 사람 있다고는 하지만 삼층에서 밑바닥까지 세간을 나르고 그것을 다시 트럭에 싣고 하기에는 이럭저럭 한 시간이 걸렸다. 최무경(崔武卿)이는 아파트의 사무원일 뿐 아니라 회사원이 있던 방이 바로 제가 들어 있는 옆방이어서 여자의 몸으로 별로 손을 걷고 거들어 줄 것은 없다고 하여도 짐이 다 실리는 동안 아래층 사무실에 남아 있어서 그들의 이사하는 모양을 바라보고 있었다.</p>
<h4 id="one">하나</h4>
<p>사무실에서 일을 보는 늙은 강영감이 제법 위아래로 오르내리며 짐을 챙겨도 주고 양복장이며 책장이며 탁자며 하는 육중한 것은 한 귀를 맞들어서 인부와 회사원과 함께 운반에 힘을 돕기도 하였다. 짐을 대충 실어 놓고 회사원은 아내와 같이 사무실로 들어왔다. "부금(敷金) 일백오 원 중에서 이번 달 치가 오늘까지 이십팔 원, 그것을 제하고 칠십칠 원이올시다." 미리 준비해 두었던 지폐를 손금고에서 꺼내서 최무경이는 그것을 회사원에게로 건네었다.</p>
<h4 id="two">둘</h4>
<p>회사원은 한 손으로 받아서 약간 치켜들듯 하여 사의를 표하고 그것을 그대로 주머니에 넣으려고 한다. "세어 보세요." 그러한 말에 회사원은, 무어 세어 보나마나 하는 표정을 지어 보았으나 다시 어떻게 생각하였는지 넣으려던 지폐를 꺼내서 불빛에다 대고 손가락에 침도 묻히지 않으면서 한장 두장 세어 보고 있다. "꼭 맞습니다." 하고 낯을 들었을 때 무경이는 펜과 영수증을 놓으면서, "영수증이올시다. 사인하시고 도장 쳐주십시오. 수입인지는 아파트 쪽에서 한턱내었습니다." 하고는 회사원의 아내를 바라보며 웃었다. 젊은 아내는 무경이의 웃음에 따라서 흰 이를 내놓고 웃었다.</p>
<h4 id="three">셋</h4>
<p>"고맙습니다." 영수증을 받아서 서류와 함께 금고에 챙긴 뒤에 무경이는 두 신혼부부의 낯을 새삼스레 쳐다보았다. 행복에 넘친 듯한 얼굴들이다. 진부한 형용이지만 역시 행복에 넘쳐 있는 표정이라는 말이 제일 적절할 것처럼 무경이는 생각하는 것이다. "저어 돈암정 바로 삼선평이올시다. 거기서 바른쪽으로 향해서 들어가면 새로 분할한 주택지가 있습니다. 큰 골목으로 접어들어서 다시 셋째 번 골목 둘째 집이 저희들 집이올시다. 사백오십번지의 십칠호. 한번 교외에 산보 나오시는 일이 계시건 찾아 주시기 바랍니다."</p>
<p>아무리 총명한 사람일지라도 이러한 지도의 설명을 잊지 않을 사람이 없을 것이건만 사람들은 노상에서 만난 친구들께 곧잘 이러한 방식으로 저의 집의 주소를 가르쳐 준다. 그러나 듣는 사람도 또 지금 말하는 설명을 모두 머릿속에 챙겨 넣기나 한 듯이, "네 네, 한번 나가면 꼭 들르겠습니다." 하고 대답하는 것이었다. 신접살림이라 무어든 간 새로 준비했을 것이니 홀아비살림 때에 쓰던 것으로 소용이 없을 것은 공연히 짐이나 된다고 이렇게 내버려두고 가는 것이리라, 강영감은 그것을 모아다가 넝마장수에게 팔기도 하고 저의 집에 가져다 쓰기도 하는 것이었다.
</p>
</div>
</div>
<hr class="bs-docs-separator">
<h2>사용 방법</h2>
<h3>data 속성으로</h3>
<p>화면 상단 탐색막대에 스크롤 추적 기능을 넣으려면, 추적할 대상 (대부분 body) 태그에 <code>data-spy="scroll"</code>를 더하고 <code>data-target=".navbar"</code>로 탐색막대를 선택한다. <code>.nav</code> 화면 구성요소에도 스크롤 추적을 사용할 수 있다.</p>
<pre class="prettyprint linenums"><body data-spy="scroll" data-target=".navbar">...</body></pre>
<h3>자바스크립트로</h3>
<p>자바스크립트로 스크롤 추적을 부른다.</p>
<pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
<div class="alert alert-info">
<strong>주의!</strong>
탐색막대 링크는 유효한 id 대상이 있어야 한다. 예를 들어, <code><a href="#home">대문</a></code>은 어딘가 <code><div id="home"></div></code> 식의 dom에 대응해야 한다.
</div>
<h3>메소드</h3>
<h4>.scrollspy('refresh')</h4>
<p>DOM에서 태그를 추가하거나 빼면서 스크롤 추적을 사용한다면, 이렇게 refresh 메소드를 호출해야 한다.</p>
<pre class="prettyprint linenums">
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
</pre>
<h3>옵션</h3>
<p>data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 <code>data-offset=""</code> 처럼 <code>data-</code> 뒤에 옵션 이름을 붙인다.</p>
<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>number</td>
<td>10</td>
<td>스크롤 위치를 계산할 때 상단에 추가할 픽셀.</td>
</tr>
</tbody>
</table>
<h3>이벤트</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">이벤트</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>activate</td>
<td>이 이벤트는 스크롤 추적이 새 항목을 선택할 때 발동한다.</td>
</tr>
</tbody>
</table>
</section>
<!-- 탭
================================================== -->
<section id="tabs">
<div class="page-header">
<h1>켜고 끄는 탭 <small>bootstrap-tab.js</small></h1>
</div>
<h2>탭 예제</h2>
<p>내용이 있는 판들 사이를 전환하는 빠르고 동적인 탭 기능을 더한다. 심지어 드롭다운 메뉴도 탭으로 동작한다.</p>
<div class="bs-docs-example">
<ul id="myTab" 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">@fat</a></li>
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>미스터 방의 증조가 타관에서 떠들어온 명색 없는 사람이었다. 그 조부가 고을의 아전을 다녔다. 그 아비가 짚신장수였다. 칠십에, 고로롱고로롱, 아직도 살아 있지만, 시방도 짚신 곱게 삼기로 고을에서 첫째가는 방첨지가 바로 그였다. 그러나마 삼십을 바라보도록 남의 집 머슴살이로, 이집 저집 살고 다니는 코삐뚤이 삼복이었다. 물론 낫 놓고 기역자도 못 그리는 판무식이었다. 백주사는 생각하자니 속으로 이렇게 분개스럽지 않을 수가 없었다.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>백주사는 생각하자니 속으로 이렇게 분개스럽지 않을 수가 없었다. 그러나 일변으로는, 그러던 코삐뚤이 삼복이가 그야말로 선영이 명당엘 들었단 말인지, 무슨 조화를 지녔단 말인지, 불과 몇 달지간에 이렇게 훌륭히 되고, 부자가 되고, 미스터 방인지 구리다 방인지가 되고 하여 가지고는, 갖은 호강 다 하며 천하에 무설 것이 없고 기광이 나서 막 이러니, 한편 생각하면 신기하기도 하고 부럽기도 하고 또한 안타깝기도 하였다. '사람의 운수란 참 모를 일이야.' 백주사는 속으로 절절히 이렇게 탄복도 아니치 못하였다. 코삐뚤이 삼복의 이 눈부신 발신은, 그러나 백주사가 희한히 여기는 것처럼 무슨 명당 바람이 났다거나 조화를 지녔다거나 그런 신기한 곡절이 있는 바가 아니요, 지극히 간단하고도 수월한 것이었었다. '사람의 운수란 참 모를 일이야.'</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>이날도 신기료장수 방삼복은 종로의 공원 건너편 응달에 앉아서, 구두 징을 박으면서, 해방의 날을 맞이하였다. 그러나 삼복은 감격한 줄도 기쁜 줄도 모르겠었다. 지나가는 행인이, 서로 모르던 사람끼리면서 덤쑥 서로 껴안고 기뻐하고 눈물을 흘리고 하는 것이, 삼복은 속을 모르겠고 차라리 쑥스러 보일 따름이었다. 몰려 닫는 군중이 오히려 성가시고, 만세 소리가 귀가 아파 이맛살이 지푸려질 지경이었다. 몰려다니고 만세를 부르고 하기에 미쳐 날뛰느라고 정신이 없어, 손님이 없어, 손님이 부쩍 줄었다. "우랄질! 독립이 배부른가?" 이삼 일 지나면서부터야 삼복에게도 삼복에게다운 해방의 혜택이 나누어졌다.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>총총히 집으로 돌아가, 마누라를 시켜 구두 고치는 연장 일습과 재료 남은 것에다 이불이며 헌옷가지 해서 한 짐을 동네 아는 가게에다 맡기고는 한 달 기한으로 돈 백 원을 서푼 변으로 취해 오게 하였다. 그 돈 백 원을 가지고 삼복은 흔한 넝마전으로 가서 백 원 돈이 꼭 차는 한도까지에 양복이란 명색 한 벌과 모자를 샀다. 신발은 부득이 안방 사람의 병정구두 사 신은 것을 이 다음 창갈이 거저 해주겠다는 조건으로, 닷새만 제 것과 바꾸어 신기로 하였다. 한주먹 보기 좋게 갈겨 넘어뜨리고는, 찌부러진 오두막집을 나서 종로로 향을 잡았다.</p>
</div>
</div>
</div>
<hr class="bs-docs-separator">
<h2>사용 방법</h2>
<p>자바스크립트로 켜고 끄는 탭을 만든다. 탭마다 따로 만들어야 한다.</p>
<pre class="prettyprint linenums">
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})</pre>
<p>여러 방법으로 개별 탭을 지칭할 수 있다.</p>
<pre class="prettyprint linenums">
$('#myTab a[href="#profile"]').tab('show'); // 이름으로 탭 선택
$('#myTab a:first').tab('show'); // 첫번째 탭 선택
$('#myTab a:last').tab('show'); // 마지막 탭 선택
$('#myTab li:eq(2) a').tab('show'); // 세번째 탭 선택 (순서는 0부터)
</pre>
<h3>마크업</h3>
<p>자바스크립트를 전혀 작성하지 않고 태그에 <code>data-toggle="tab"</code> 혹은 <code>data-toggle="pill"</code>을 명시하기만 하면 탭이나 알약 탐색이 생긴다. 탭 <code>ul</code>에 <code>nav</code>와 <code>nav-tabs</code> 클래스를 추가하면 부트스트랩 탭 스타일이 적용된다.</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>
탭 태그와 탭내용을 보여준다. 탭은 DOM의 탭내용을 지칭하는 <code>data-target</code>이나 <code>href</code>가 필요하다.
</p>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs" id="myTab">
<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 () {
$('#myTab 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>이 이벤트는 탭 show를 호출했지만 새로운 탭이 보이기 전에 발동한다. <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 // 새로 선택된 탭
e.relatedTarget // 이젠 탭
})
</pre>
</section>
<!-- 툴팁
================================================== -->
<section id="tooltips">
<div class="page-header">
<h1>툴팁 <small>bootstrap-tooltip.js</small></h1>
</div>
<h2>사용예</h2>
<p>제이슨 프레임이 만든 훌륭한 jQuery tipsy 플러그인에서 영감을 받았다. 그림을 의존하지 않고 CSS3로 애니메이션을 하며 data 속성을 제목으로 사용하도록 툴팁을 변경했다.</p>
<p>성능상 이유 때문에 툴팁과 팝오버 data api는 동의가 필요하다. <strong>직접 이들 플러그인을 초기화해야 한다</strong>.</p>
<p>툴팁을 보려면 링크 위로 마우스를 올린다.</p>
<div class="bs-docs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">어제 아침을 멀건 죽 한 <a href="#" data-toggle="tooltip" title="기본 툴팁">보시기로 때우고</a>, 점심은 늘 없어왔거니와 저녁과 오늘 아침을 끓이지 못하였으니, 하루낫 하룻밤이요 꼬바기 세 끼를 굶은 참이었다. 그러니, 시장하긴들 조옴 시장하련마는, 굶기에 단련이 되어 그런지 글에 정신이 쏠리어 그런지, <a href="#" data-toggle="tooltip" title="다른 툴팁">혹은 참으며</a> 내색을 아니하여 그러는지, 아뭏든 허생은 별로 시장하여 하는 빛이 없고, 글 읽는 소리도 한결같이 낭랑하다. 서울 남산 밑 묵적골이라고 하면, 가난하고 명색 없는 양반 나부랑이와 궁하고 <a href="#" data-toggle="tooltip" title="여기 이 매우 긴 툴팁은 우리가 적용한 max-width 결과를 보여준다.">불우한 선비와</a> 이런 사람들만 모여 살기로 예로부터 이름난 동네였다. 집이라는 것은 열이면 열 다 쓰러져가는 <a href="#" data-toggle="tooltip" title="마지막 툴팁!">오막살이 초가집이</a> 몇해씩을 이엉을 덮지 못하여 지붕은 움푹움푹 골이 패이고, 비가 오면 철철 들이 새고 하였다.
</p>
</div>
<h3>네가지 방향</h3>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="위쪽 툴팁">위쪽 툴팁</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="오른쪽 툴팁">오른쪽 툴팁</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="아래쪽 툴팁">아래쪽 툴팁</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="왼쪽 툴팁">왼쪽 툴팁</a></li>
</ul>
</div>
<h3>input 그룹 속 툴팁</h3>
<p>부트스트랩 input 그룹에서 툴팁과 팝오버를 사용한다면, 원하지 않는 부작용을 막기위해 (아래에서 설명) <code>container</code> 옵션을 사용해야 한다.</p>
<hr class="bs-docs-separator">
<h2>사용 방법</h2>
<p>자바스크립트로 툴팁을 켜고 끈다.</p>
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
<h3>옵션</h3>
<p>data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 <code>data-animation=""</code> 처럼 <code>data-</code> 뒤에 옵션 이름을 붙인다.</p>
<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>boolean</td>
<td>true</td>
<td>툴팁에 css 페이드 전환을 적용한다</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>툴팁에 html을 넣는다. false이면, jquery의 <code>text</code> 메소드를 사용하여 dom에 내용을 넣는다. XSS 공격을 걱정한다면 html을 사용하지 마라.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
<td>툴팁의 위치 - top | bottom | left | right</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>선택자를 지정하면, 해당 대상이 툴팁 객체를 담당한다</td>
</tr>
<tr>
<td>title</td>
<td>string | function</td>
<td>''</td>
<td>`title` 태그가 없을 때 제목으로 사용할 기본값</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>툴팁 동작 방식 - click | hover | focus | manual. 여러 종류를 공백으로 구분하여 사용할 수 있다.</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>툴팁을 보이고 숨기는 지연 시간 (ms 단위) - manual 동작 방식은 해당 없음</p>
<p>숫자를 사용하면, 숨기고 보일 때 모두 같은 지연 시간을 적용한다</p>
<p>객체는 이렇게 사용한다. <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>툴팁을 특정 태그에 붙인다 <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">
<strong>주의!</strong>
data 속성을 사용하여 툴팁마다 다른 옵션을 지정할 수 있다.
</div>
<h3>마크업</h3>
<pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="첫번째 툴팁">여기에 마우스 올림</a></pre>
<h3>메소드</h3>
<h4>$().tooltip(options)</h4>
<p>태그들에 툴팁 처리자를 붙인다.</p>
<h4>.tooltip('show')</h4>
<p>태그의 툴팁을 보인다.</p>
<pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
<h4>.tooltip('hide')</h4>
<p>태그의 툴팁을 숨긴다.</p>
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
<h4>.tooltip('toggle')</h4>
<p>태그의 툴팁을 켜고 끈다.</p>
<pre class="prettyprint linenums">$('#element').tooltip('toggle')</pre>
<h4>.tooltip('destroy')</h4>
<p>태그의 툴팁을 숨기고 파괴한다.</p>
<pre class="prettyprint linenums">$('#element').tooltip('destroy')</pre>
</section>
<!-- 팝오버
================================================== -->
<section id="popovers">
<div class="page-header">
<h1>팝오버 <small>bootstrap-popover.js</small></h1>
</div>
<h2>사용예</h2>
<p> 아이패드와 비슷하게, 부가 정보를 담은 모든 태그에 작은 내용을 덧붙인다. 팝오버를 보이려면 버튼 위로 마우스를 가져간다. <strong>사용하려면 <a href="#tooltips">툴팁</a>이 필요하다.</strong></p>
<h3>정적 팝오버</h3>
<p>top, right, bottom, left, 네가지 정렬 옵션이 있다.</p>
<div class="bs-docs-example bs-docs-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<p>자는 운장, 허둥 출신으로 장 비·유 비와 함께 의형제를 맺었다. 한때 조 조에게 포로가 되어 우대를 받고 한수정후로 봉함받았다.</p>
</div>
</div>
<div class="popover right">
<div class="arrow"></div>
<h3 class="popover-title">Popover right</h3>
<div class="popover-content">
<p>자는 운장, 허둥 출신으로 장 비·유 비와 함께 의형제를 맺었다. 한때 조 조에게 포로가 되어 우대를 받고 한수정후로 봉함받았다.</p>
</div>
</div>
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
<p>자는 운장, 허둥 출신으로 장 비·유 비와 함께 의형제를 맺었다. 한때 조 조에게 포로가 되어 우대를 받고 한수정후로 봉함받았다.</p>
</div>
</div>
<div class="popover left">
<div class="arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>자는 운장, 허둥 출신으로 장 비·유 비와 함께 의형제를 맺었다. 한때 조 조에게 포로가 되어 우대를 받고 한수정후로 봉함받았다.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<p>자바스크립트와 <code>data</code> 속성값으로 팝오버를 만들기 때문에 보여줄 마크업이 없다.</p>
<h3>라이브 시연</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="제목" data-content="그리고 여기 놀라운 내용이 있다. 정말 마음에 들죠?">팝오버를 켜고 끄려면 클릭</a>
</div>
<h4>네가지 방향</h4>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="1923년부터 칸딘스키의 영향을 받아 초현실주의 화풍으로 바뀌었다." title="위쪽 팝오버">위쪽 팝오버</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="1923년부터 칸딘스키의 영향을 받아 초현실주의 화풍으로 바뀌었다." title="오른쪽 팝오버">오른쪽 팝오버</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="1923년부터 칸딘스키의 영향을 받아 초현실주의 화풍으로 바뀌었다." title="아래쪽 팝오버">아래쪽 팝오버</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="1923년부터 칸딘스키의 영향을 받아 초현실주의 화풍으로 바뀌었다." title="왼쪽 팝오버">왼쪽 팝오버</a></li>
</ul>
</div>
<hr class="bs-docs-separator">
<h2>사용 방법</h2>
<p>자바스크립트로 팝오버를 만드는 방법이다.</p>
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>옵션</h3>
<p>data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 <code>data-animation=""</code> 처럼 <code>data-</code> 뒤에 옵션 이름을 붙인다.</p>
<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>boolean</td>
<td>true</td>
<td>팝오버에 css 페이드 전환을 적용한다</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>팝오버에 html을 넣는다. false이면, jquery의 <code>text</code> 메소드를 사용하여 dom에 내용을 넣는다. XSS 공격을 걱정한다면 html을 사용하지 마라.</td>
</tr>
<tr>