-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbase-css.html
2243 lines (2043 loc) · 96.2 KB
/
base-css.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="active">
<a href="./base-css.html">기본 CSS</a>
</li>
<li class="">
<a href="./components.html">화면 구성요소</a>
</li>
<li class="">
<a href="./javascript.html">자바스크립트</a>
</li>
<li class="">
<a href="./customize.html">맞춤 다운로드</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>기본 CSS</h1>
<p class="lead">스타일을 입힌 HTML 기본 태그들과 확장 클래스들.</p>
<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="#typography"><i class="icon-chevron-right"></i> 타이포그래피</a></li>
<li><a href="#code"><i class="icon-chevron-right"></i> 코드</a></li>
<li><a href="#tables"><i class="icon-chevron-right"></i> 표</a></li>
<li><a href="#forms"><i class="icon-chevron-right"></i> 양식 입력요소</a></li>
<li><a href="#buttons"><i class="icon-chevron-right"></i> 버튼</a></li>
<li><a href="#images"><i class="icon-chevron-right"></i> 그림</a></li>
<li><a href="#icons"><i class="icon-chevron-right"></i> 글리피콘스 아이콘</a></li>
</ul>
</div>
<div class="span9">
<!-- 타이포그래피
================================================== -->
<section id="typography">
<div class="page-header">
<h1>타이포그래피</h1>
</div>
<h2 id="headings">제목</h2>
<p><code><h1></code>부터 <code><h6></code>까지 모든 HTML 제목이 있다.</p>
<div class="bs-docs-example">
<h1>h1. 제목 1</h1>
<h2>h2. 제목 2</h2>
<h3>h3. 제목 3</h3>
<h4>h4. 제목 4</h4>
<h5>h5. 제목 5</h5>
<h6>h6. 제목 6</h6>
</div>
<h2 id="body-copy">본문</h2>
<p>부트스크랩 기본 <code>font-size</code>는 <strong>14px</strong>이고, <code>line-height</code>는 <strong>20px</strong>이다. 이 설정은 <code><body></code>와 모든 단락에 적용된다. 추가로 <code><p></code>(단락)은 자신의 행높이 절반만큼 (기본값이라면 10px) 하단 여백을 둔다.</p>
<div class="bs-docs-example">
<p>생체막을 통해 외부에서 세포 내로 물질을 받아들이는 방법에는 여러 가지가 있다. 그 중 고형물을 세포 내에 받아들이는 현상을 식세포 작용, 액상체를 받아들이는 현상을 음세포 작용이라 한다.</p>
<p>두 작용은 본질적으로는 같은 구조로 행해지기 때문에 이를 합쳐 식작용이라고 부르는 경우도 있다. 식세포 작용은 대부분의 원생 동물과 후생 동물의 일부에서 볼 수 있다. 원생 동물에서는 식세포 작용은 영양 공급이라는 의미를 갖고 있지만, 후생 동물에서는 오히려 이물질을 제거하고 소화한다.</p>
<p>이른바 방어 기능으로서의 의의가 크다. 식세포 작용은 고형물이 세포막에 흡착하는 과정과 세포막의 함입(陷入)으로 그 물질을 세포내에 받아들여 세포질 내에 유리하는 과정의 두 가지로 나눌 수 있다.</p>
</div>
<pre class="prettyprint"><p>...</p></pre>
<h3>도입부 본문</h3>
<p><code>.lead</code>을 추가하여 단락을 두드러지게 한다.</p>
<div class="bs-docs-example">
<p class="lead">18세에 소지선사 밑에서 승려가 되었으며, 혜명 국사로부터 불법을 배운 뒤 묘향산의 금강굴에서 수도하였다.</p>
</div>
<pre class="prettyprint"><p class="lead">...</p></pre>
<h3>Less로 컴파일</h3>
<p>타이포그래피 기준은 <strong>variables.less</strong>에 있는 두 LESS 변수 <code>@baseFontSize</code>와 <code>@baseLineHeight</code>가 결정한다. 전자는 전체적으로 사용하는 기본 글꼴 크기이고, 후자는 기본 행높이이다. 우리는 이 변수를 가지고 다른 모든 여백과 패딩과 행높이를 간단히 계산한다. 부트스트랩을 맞춤 다운로드하면 된다.</p>
<hr class="bs-docs-separator">
<h2 id="emphasis">강조</h2>
<p>HTML 기본 강조 태그와 경량 스타일을 사용할 수 있다.</p>
<h3><code><small></code></h3>
<p>본문 인라인이나 블록을 덜 강조하려면 <small>small 태그를 사용한다.</small></p>
<div class="bs-docs-example">
<p><small>이 본문 줄은 작은 글꼴로 의도했다.</small></p>
</div>
<pre class="prettyprint">
<p>
<small>이 본문 줄은 작은 글꼴로 의도했다.</small>
</p>
</pre>
<h3>굵은 글꼴</h3>
<p>본문의 일부를 두꺼운 font-weight로 강조한다.</p>
<div class="bs-docs-example">
<p>다음에 나오는 본문은 <strong>굵은 글씨로 보인다</strong>.</p>
</div>
<pre class="prettyprint"><strong>굵은 글씨로 보인다</strong></pre>
<h3>이탤릭체</h3>
<p>본문의 일부를 이탤릭체로 강조한다.</p>
<div class="bs-docs-example">
<p>다음에 나오는 본문은 <em>이탤릭체로 보인다</em>.</p>
</div>
<pre class="prettyprint"><em>이탤릭체로 보인다</em></pre>
<p><span class="label label-info">주의!</span> HTML5에서 <code><b></code와 <code><i></code>를 사용해도 된다. <code><b></code>는 중요성을 함축하지 않고 단어나 구절을 강조하는 목적이고, <code><i></code>는 목소리나 기술 용어 등을 위해 사용한다.</p>
<h3>정렬 클래스</h3>
<p>정렬 클래스를 사용하여 본문을 구성요소로 쉽게 재정렬할 수 있다.</p>
<div class="bs-docs-example">
<p class="text-left">좌측 정렬 본문.</p>
<p class="text-center">중앙 정렬 본문.</p>
<p class="text-right">우측 정렬 본문.</p>
</div>
<pre class="prettyprint linenums">
<p class="text-left">좌측 정렬 본문.</p>
<p class="text-center">중앙 정렬 본문.</p>
<p class="text-right">우측 정렬 본문.</p>
</pre>
<h3>강조 클래스</h3>
<p>몇가지 강조 도움 클래스를 가지고 색깔로 의미를 전달한다.</p>
<div class="bs-docs-example">
<p class="muted">소싸움경기장에서 싸움소간의 힘겨루기를 말한다.</p>
<p class="text-warning">소싸움경기투표 적중자에게 환급금을 교부하는 행위를 말한다.</p>
<p class="text-error">소싸움경기에 출전하게 할 목적으로 소싸움경기시행자에게 등록된 소를 말한다.</p>
<p class="text-info">싸움소를 소유하거나 소유할 목적으로 소싸움경기시행자에게 등록한 자를 말한다.</p>
<p class="text-success">소싸움경기시행자의 면허를 받아 싸움소를 관리하고 조련시키는 자를 말한다.</p>
</div>
<pre class="prettyprint linenums">
<p class="muted">소싸움경기장에서 싸움소간의 힘겨루기를 말한다.</p>
<p class="text-warning">소싸움경기투표 적중자에게 환급금을 교부하는 행위를 말한다.</p>
<p class="text-error">소싸움경기에 출전하게 할 목적으로 소싸움경기시행자에게 등록된 소를 말한다.</p>
<p class="text-info">싸움소를 소유하거나 소유할 목적으로 소싸움경기시행자에게 등록한 자를 말한다.</p>
<p class="text-success">소싸움경기시행자의 면허를 받아 싸움소를 관리하고 조련시키는 자를 말한다.</p>
</pre>
<hr class="bs-docs-separator">
<h2 id="abbreviations">축약어</h2>
<p>HTML <code><abbr></code> 태그에 스타일을 입혀서 축약어나 두문자에 마우스를 올리면 원문이 보인다. 태그에 <code>title</code> 속성은 사용하면, 연한 점선 밑줄이 생기고 마우스를 올리면 도움말 커서와 추가 내용이 보인다.</p>
<h3><code><abbr></code></h3>
<p><code>title</code> 속성을 추가하면, 축약어에 오래 마우스를 올릴 때 추가 본문이 보인다.</p>
<div class="bs-docs-example">
<p><abbr title="attribute">attr</abbr>은 단어 attribute의 축약어이다.</p>
</div>
<pre class="prettyprint"><abbr title="attribute">attr</abbr></pre>
<h3><code><abbr class="initialism"></code></h3>
<p>축약어를 약간 작은 글꼴로 보이려면 <code>.initialism</code>을 더한다.</p>
<div class="bs-docs-example">
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr>은 식빵이후 최고의 것이다.</p>
</div>
<pre class="prettyprint"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></pre>
<hr class="bs-docs-separator">
<h2 id="addresses">주소</h2>
<p>작품 전체나 작품에 맞붙여 연락처 정보를 보여준다.</p>
<h3><code><address></code></h3>
<p>줄마다 <code><br></code>로 끝내서 형식을 유지한다.</p>
<div class="bs-docs-example">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
</div>
<pre class="prettyprint linenums">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
</pre>
<hr class="bs-docs-separator">
<h2 id="blockquotes">인용</h2>
<p>문서 안에 다른 출처의 내용을 인용한다.</p>
<h3>기본 인용</h3>
<p>인용하려면 아무 <abbr title="HyperText Markup Language">HTML</abbr>이나 <code><blockquote></code>로 두른다. 일반적인 인용으로 <code><p></code>를 권한다.</p>
<div class="bs-docs-example">
<blockquote>
<p>그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.</p>
</blockquote>
</div>
<pre class="prettyprint linenums">
<blockquote>
<p>그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.</p>
</blockquote>
</pre>
<h3>인용 옵션</h3>
<p>표준 인용을 살짝 변경하는 스타일.</p>
<h4>출처 명시</h4>
<p><code><small></code> 태그로 출처를 밝힌다. 작품명은 <code><cite></code>로 감싼다.</p>
<div class="bs-docs-example">
<blockquote>
<p>그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.</p>
<small><cite title="올드보이">올드보이</cite>에서 오대수</small>
</blockquote>
</div>
<pre class="prettyprint linenums">
<blockquote>
<p>그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.</p>
<small><cite title="올드보이">올드보이</cite>에서 오대수</small>
</blockquote>
</pre>
<h4>다르게 표시</h4>
<p><code>.pull-right</code>를 사용하면, 우측 정렬된 유동 인용이 된다.</p>
<div class="bs-docs-example" style="overflow: hidden;">
<blockquote class="pull-right">
<p>그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.</p>
<small><cite title="올드보이">올드보이</cite>에서 오대수</small>
</blockquote>
</div>
<pre class="prettyprint linenums">
<blockquote class="pull-right">
...
</blockquote>
</pre>
<hr class="bs-docs-separator">
<!-- Lists -->
<h2 id="lists">목록</h2>
<h3>순서 없음</h3>
<p>명시적인 순서가 중요하지 않는 항목들의 목록.</p>
<div class="bs-docs-example">
<ul>
<li>우세르카프</li>
<li>사후레</li>
<li>네페리르카레 카카이</li>
<li>솁세스카레</li>
<li>네페레프레
<ul>
<li>라네프에르에프</li>
<li>마네토의 연대기</li>
<li>토리노 파피루스</li>
<li>미로슬라프 베르너</li>
</ul>
</li>
<li>니우세르레</li>
<li>멘카우호르</li>
<li>제드카레</li>
</ul>
</div>
<pre class="prettyprint linenums">
<ul>
<li>...</li>
</ul>
</pre>
<h3>순서 있음</h3>
<p>명시적인 순서가 중요한 항목들의 목록.</p>
<div class="bs-docs-example">
<ol>
<li>우세르카프</li>
<li>사후레</li>
<li>네페리르카레 카카이</li>
<li>솁세스카레</li>
<li>네페레프레</li>
<li>니우세르레</li>
<li>멘카우호르</li>
<li>제드카레</li>
</ol>
</div>
<pre class="prettyprint linenums">
<ol>
<li>...</li>
</ol>
</pre>
<h3>스타일 없음</h3>
<p>기본 <code>list-style</code>과 목록 항목의 왼쪽 패딩을 없앤다. (바로 아래 항목에만 적용된다.)</p>
<div class="bs-docs-example">
<ul class="unstyled">
<li>우세르카프</li>
<li>사후레</li>
<li>네페리르카레 카카이</li>
<li>솁세스카레</li>
<li>네페레프레
<ul>
<li>라네프에르에프</li>
<li>마네토의 연대기</li>
<li>토리노 파피루스</li>
<li>미로슬라프 베르너</li>
</ul>
</li>
<li>니우세르레</li>
<li>멘카우호르</li>
<li>제드카레</li>
</ul>
</div>
<pre class="prettyprint linenums">
<ul class="unstyled">
<li>...</li>
</ul>
</pre>
<h3>인라인</h3>
<p><code>inline-block</code>을 사용하면, 모든 목록 항목을 약간 패딩을 사이에 두고 한 줄에 둔다.</p>
<div class="bs-docs-example">
<ul class="inline">
<li>우세르카프</li>
<li>사후레</li>
<li>네페리르카레 카카이</li>
</ul>
</div>
<pre class="prettyprint linenums">
<ul class="inline">
<li>...</li>
</ul>
</pre>
<h3>단어 설명</h3>
<p>각각에 설명이 붙은 단어 목록.</p>
<div class="bs-docs-example">
<dl>
<dt>단어 설명 목록</dt>
<dd>단어 설명 목록을 단어를 정의하는 목적으로 안성맞춤이다.</dd>
<dt>백제고분제</dt>
<dd>백제전기왕들의 신령께 제를 드리는 행사로 석촌동 백제초기 적석총(사적 제243호)에서 개최한다.</dd>
<dd>1996년부터는 격년제로 개최하고 있다.</dd>
<dt>서울세계불꽃축제</dt>
<dd>2000년 이후 매년 여의도에서 열리는 축제 중 하나이다.</dd>
</dl>
</div>
<pre class="prettyprint linenums">
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
</pre>
<h4>수직 단어 설명</h4>
<p><code><dl></code> 양편에 단어와 설명을 줄세운다.</p>
<div class="bs-docs-example">
<dl class="dl-horizontal">
<dt>단어 설명 목록</dt>
<dd>단어 설명 목록을 단어를 정의하는 목적으로 안성맞춤이다.</dd>
<dt>백제고분제</dt>
<dd>백제전기왕들의 신령께 제를 드리는 행사로 석촌동 백제초기 적석총(사적 제243호)에서 개최한다.</dd>
<dd>1996년부터는 격년제로 개최하고 있다.</dd>
<dt>서울세계불꽃축제</dt>
<dd>2000년 이후 매년 여의도에서 열리는 축제 중 하나이다.</dd>
<dt>인사동 포도대장과 그 순라군들</dt>
<dd>순라군은 총 18명으로 구성돼 있으며 전통복장과 육모방망이, 함거, 오라줄, 검, 삼지창 등의 순라장비를 두루 갖추었다.</dd>
</dl>
</div>
<pre class="prettyprint linenums">
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
</pre>
<p>
<span class="label label-info">주의!</span>
수직 단어 설명 목록에서 너무 길어서 왼쪽 열에 맞지 않는 단어는 <code>text-overflow</code>로 줄인다. 좁은 화면에서는 위아래로 쌓인 기본 레이아웃이 된다.
</p>
</section>
<!-- 코드
================================================== -->
<section id="code">
<div class="page-header">
<h1>코드</h1>
</div>
<h2>인라인</h2>
<p>인라인 코드 조각은 <code><code></code>로 감싼다.</p>
<div class="bs-docs-example">
예를 들어, <code><section></code>은 인라인으로 감싸야 한다.
</div>
<pre class="prettyprint linenums">
예를 들어, <code>&lt;section&gt;</code>은 인라인으로 감싸야 한다.
</pre>
<h2>기본 블록</h2>
<p>여러 줄 코드는 <code><pre></code>를 사용한다. 코드 안에 나오는 부등호가 제대로 보이도록 예외처리해야 한다.</p>
<div class="bs-docs-example">
<pre><p>여기에 아무 글이나...</p></pre>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
<pre>
&lt;p&gt;여기에 아무 글이나...&lt;/p&gt;
</pre>
</pre>
<p><span class="label label-info">주의!</span> <code><pre></code> 태그 안에 코드는 최대한 왼쪽으로 붙여야 한다. 이 태그는 탭도 모두 보여준다.</p>
<p><code>.pre-scrollable</code> 클래스를 더하면, max-height가 350px로 고정되고 세로 방향 스크롤막대가 생긴다.</p>
</section>
<!-- 표
================================================== -->
<section id="tables">
<div class="page-header">
<h1>표</h1>
</div>
<h2>기본 스타일</h2>
<p>아무 <code><table></code>에 <code>.table</code> 클래스를 더하면 패딩이 약간 있고 수평으로만 구분선을 그은 기본 스타일을 적용한다.</p>
<div class="bs-docs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>이름</th>
<th>성</th>
<th>사용자명</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>마크</td>
<td>오토</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>제이콥</td>
<td>손턴</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>래리</td>
<td>새</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums">
<table class="table">
…
</table>
</pre>
<hr class="bs-docs-separator">
<h2>선택적인 클래스</h2>
<p>아래 클래스들을 <code>.table</code> 기본 클래스에 더할 수 있다.</p>
<h3><code>.table-striped</code></h3>
<p>(IE7~8에는 없는) <code>:nth-child</code> CSS 선택자를 사용하여 표 <code><tbody></code> 안에 있는 모든 행에 얼룩말 무늬를 넣는다.</p>
<div class="bs-docs-example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>이름</th>
<th>성</th>
<th>사용자명</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>마크</td>
<td>오토</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>제이콥</td>
<td>손턴</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>래리</td>
<td>새</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
<table class="table table-striped">
…
</table>
</pre>
<h3><code>.table-bordered</code></h3>
<p>표에 둘레와 둥그런 모서리를 더한다.</p>
<div class="bs-docs-example">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>이름</th>
<th>성</th>
<th>사용자명</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>마크</td>
<td>오토</td>
<td>@mdo</td>
</tr>
<tr>
<td>마크</td>
<td>오토</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>제이콥</td>
<td>손턴</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">새 래리</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums">
<table class="table table-bordered">
…
</table>
</pre>
<h3><code>.table-hover</code></h3>
<p>표 <code><tbody></code> 안의 행에 마우스 올림 상태를 적용한다.</p>
<div class="bs-docs-example">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>이름</th>
<th>성</th>
<th>사용자명</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>마크</td>
<td>오토</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>제이콥</td>
<td>손턴</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">새 래리</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
<table class="table table-hover">
…
</table>
</pre>
<h3><code>.table-condensed</code></h3>
<p>셀 패딩을 절반으로 줄여서 표를 더 촘촘하게 만든다.</p>
<div class="bs-docs-example">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>이름</th>
<th>성</th>
<th>사용자명</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>마크</td>
<td>오토</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>제이콥</td>
<td>손턴</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">새 래리</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
<table class="table table-condensed">
…
</table>
</pre>
<hr class="bs-docs-separator">
<h2>선택적인 행 클래스</h2>
<p>클래스를 사용하여 표의 특정 행에 색을 입힌다.</p>
<table class="table table-bordered table-striped">
<colgroup>
<col class="span1">
<col class="span7">
</colgroup>
<thead>
<tr>
<th>클래스</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.success</code>
</td>
<td>성공이나 긍정적인 행동을 나타낸다.</td>
</tr>
<tr>
<td>
<code>.error</code>
</td>
<td>위험하거나 잠재적으로 부정적인 행동을 나타낸다.</td>
</tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>주의가 필요한 경고를 나타낸다.</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>기본 스타일에 대체로 사용한다.</td>
</tr>
</tbody>
</table>
<div class="bs-docs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>제품</th>
<th>결제일</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - 월간</td>
<td>01/04/2012</td>
<td>승인</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - 월간</td>
<td>02/04/2012</td>
<td>거부</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - 월간</td>
<td>03/04/2012</td>
<td>보류</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - 월간</td>
<td>04/04/2012</td>
<td>전화로 확인</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums">
...
<tr class="success">
<td>1</td>
<td>TB - 월간</td>
<td>01/04/2012</td>
<td>승인</td>
</tr>
...
</pre>
<hr class="bs-docs-separator">
<h2>지원하는 표 마크업</h2>
<p>지원하는 HTML 표 태그 목록과 사용법이다.</p>
<table class="table table-bordered table-striped">
<colgroup>
<col class="span1">
<col class="span7">
</colgroup>
<thead>
<tr>
<th>태그</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><table></code>
</td>
<td>
안에 포함한 정보를 표 형식으로 보여주는 태그
</td>
</tr>
<tr>
<td>
<code><thead></code>
</td>
<td>
열들의 제목이 들어가는 표 제목행(<code><tr></code>)을 담는 태그
</td>
</tr>
<tr>
<td>
<code><tbody></code>
</td>
<td>
표 행(<code><tr></code>)들을 담는 태그
</td>
</tr>
<tr>
<td>
<code><tr></code>
</td>
<td>
한 행에 보이는 표 셀(<code><td></code> 혹은 <code><th></code>)들을 담는 태그
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
기본 표 셀
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
열 (혹은 범위와 위치에 따라 행) 제목을 위한 특별한 표 셀
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
특히 화면읽기 프로그램에 유용한, 표 내용에 대한 설명이나 요약
</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</pre>
</section>
<!-- 양식 입력요소
================================================== -->
<section id="forms">
<div class="page-header">
<h1>양식 입력요소</h1>
</div>
<h2>기본 스타일</h2>
<p>약식 입력요소들은 <code><form></code>에 기본 클래스나 마크업상 큰 변화 없이도 스타일 적용을 받는다. 그래서 라벨은 양식 입력요소 위에 왼쪽 정렬한다.</p>
<form class="bs-docs-example">
<fieldset>
<legend>범례</legend>
<label>라벨명</label>
<input type="text" placeholder="아무거나 입력…">
<span class="help-block">블록 수준 도움말은 여기에.</span>
<label class="checkbox">
<input type="checkbox"> 나 좀 봐
</label>
<button type="submit" class="btn">제출</button>
</fieldset>
</form>
<pre class="prettyprint linenums">
<form>
<fieldset>
<legend>범례</legend>
<label>라벨명</label>
<input type="text" placeholder="아무거나 입력…">
<span class="help-block">블록 수준 도움말은 여기에.</span>
<label class="checkbox">
<input type="checkbox"> 나 좀 봐
</label>
<button type="submit" class="btn">제출</button>
</fieldset>
</form>
</pre>
<hr class="bs-docs-separator">
<h2>레이아웃 선택</h2>
<p>부트스트랩에는 일상적인 용도를 위해 세가지 선택적인 레이아웃이 들어있다.</p>
<h3>검색 양식</h3>
<p>양식에 <code>.form-search</code>를 더하고 <code><input></code>에 <code>.search-query</code>를 더하면, 테두리가 둥근 문자 입력요소가 된다.</p>
<form class="bs-docs-example form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">검색</button>
</form>
<pre class="prettyprint linenums">
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">검색</button>
</form>
</pre>
<h3>인라인 양식</h3>
<p>작은 레이아웃을 위해 <code>.form-inline</code>을 더하면, 라벨을 왼쪽 정렬하고 블록 입력요소를 인라인한다.</p>
<form class="bs-docs-example form-inline">
<input type="text" class="input-small" placeholder="이메일">
<input type="password" class="input-small" placeholder="암호">
<label class="checkbox">
<input type="checkbox"> 로그인 유지
</label>
<button type="submit" class="btn">로그인</button>
</form>
<pre class="prettyprint linenums">
<form class="form-inline">
<input type="text" class="input-small" placeholder="이메일">
<input type="password" class="input-small" placeholder="암호">
<label class="checkbox">
<input type="checkbox"> 로그인 유지
</label>
<button type="submit" class="btn">로그인</button>
</form>
</pre>
<h3>수직 양식</h3>
<p>오른쪽 정렬된 라벨을 왼쪽으로 유동시켜 입력요소와 같은 줄에 보이게 만든다. 기본 양식에서 마크업 변화가 가장 많이 필요하다.</p>
<ul>
<li>양식에 <code>.form-horizontal</code> 추가</li>
<li><code>.control-group</code>으로 라벨과 입력요소 둘러쌈</li>
<li>라벨에 <code>.control-label</code> 추가</li>
<li>연관된 입력요소들을 <code>.controls</code>로 감싸서 적절히 정렬</li>
</ul>
<form class="bs-docs-example form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">이메일</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="이메일">
</div>
</div>
<div class="control-group">