-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbase-css.html
1865 lines (1792 loc) · 67.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="en">
<head>
<meta charset="utf-8">
<title>基础CSS · 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="active">
<a href="./base-css.html">基础CSS</a>
</li>
<li class="">
<a href="./components.html">组件</a>
</li>
<li class="">
<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>基础CSS</h1>
<p class="lead">
在框架的基础上，对HTML基础元素进行样式定义，并利用可扩展的class增强其展示效果，从而提供形式新颖，风格一致的外观和体验。
</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#typography">排版</a></li>
<li><a href="#code">代码</a></li>
<li><a href="#tables">表格</a></li>
<li><a href="#forms">表单</a></li>
<li><a href="#buttons">按钮</a></li>
<li><a href="#icons">图标</a></li>
</ul>
</div>
</header>
<!-- Typography
================================================== -->
<section id="typography">
<div class="page-header">
<h1>排版 <small>标题，段落，列表，以及其他行级元素</small></h1>
</div>
<h2>标题 & body copy</h2>
<!-- Headings & Paragraph Copy -->
<div class="row">
<div class="span4">
<h3>排版尺度</h3>
<p>
整个排版系统的单位尺度都取决于variables.less文件中的两个Less变量：<code>@baseFontSize</code> 和 <code>@baseLineHeight</code>。
前者决定全局的默认字体大小font-size，后者决定默认的行高line-height。
</p>
<p>
我们利用这些变量，配合一些数学运算，就可以得到定义样式时所需的margins, paddings, line-heights等等。
</p>
</div>
<div class="span4">
<h3>body text例子</h3>
<p>
许小年：政府掌握了越来越多的资源，制订了日益烦琐的管理方法，为了获得企业发展所需要的资源，或者是仅仅为了生活下去，企业不得不按照潜规则与企业打交道。我非常赞同绿公司提出的要“守本分”，但是要想企业守本分，首先政府要守本分，“逼良为娼”还不是最可怕的，回过头来的“扫黄”才是致命的一击！
</p>
<p>
余华：在涉及敏感话题时，我以前总是希望别人说出我想说的话。别人有风险，自已很安全。后来意识到如果人人都和我一样，那么我们可能长久生活在风险里。要想抵达安全，风险是必经之路。所以我开始自已说了，越来越多的人已经在自己说了……荷马史诗里描述黑压压的兵勇前进时的情景：他们将大地踩得轰然作响。
</p>
</div>
<div class="span4">
<div class="well">
<h1>h1. 中国共产党万岁</h1>
<h2>h2. 千年王八万年龟</h2>
<h3>h3. 我们在下一盘很大的棋</h3>
<h4>h4. 官人，你这麻将打成相公了</h4>
<h5>h5. 发言人：谁说中国互联网不自由了？</h5>
<h6>h6. 404 error 网址找不到</h6>
</div>
</div>
</div>
<!-- Misc Elements -->
<h2>强调，地址，缩写</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>元素</th>
<th>用法</th>
<th>选项</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><strong></code>
</td>
<td>
<strong>加粗强调</strong>一组文字
</td>
<td>
<span class="muted">无</span>
</td>
</tr>
<tr>
<td>
<code><em></code>
</td>
<td>
<em>倾斜强调</em>一组文字
</td>
<td>
<span class="muted">无</span>
</td>
</tr>
<tr>
<td>
<code><abbr></code>
</td>
<td>
包装缩写词，当鼠标经过时显示缩写词完整含义。比如<abbr title="中国共产党少年先锋敢死队">少先队</abbr>
</td>
<td>
<p>可使用 <code>title</code> 属性存放完整字词信息</p>
使用 <code>.initialism</code> 类可以将缩略词大写。
</td>
</tr>
<tr>
<td>
<code><address></code>
</td>
<td>
用于包装联系信息的最外层元素或整个信息。
</td>
<td>
使用 <code><br></code> 换行以保持格式不变
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="span4">
<h3>强调文字的例子</h3>
<p><a href="#">李宗苗</a>：车辆年检，<strong>195元/辆</strong>，<em>全深圳300万辆</em>，年收5.85亿元。</p>
<p><a href="#">杨佩昌</a>：在德国，汽车、公司都<strong>无需年检</strong>。我问德国人：汽车不年检，<em>坏了怎么办？</em>答：自己修车。问：企业不年检，公司倒闭如潮怎么办？德国人答：你看德国是这样的吗？我问：德国政府为何不强制年检？德国人反问：<strong>谁给了政府这个权力？如果政府对年检感兴趣，说明这种事对它有好处。</strong></p>
<p>
<strong>注意：</strong> 在HTML5仍可以使用 <code><b></code> 和 <code><i></code> 标签，但是它们的用途已经发生了改变。
<code><b></code> 仅仅用来加粗单词或短语，没有任何语义上的含义。而 <code><i></code> 主要用在语音和技术等方面。
</p>
</div>
<div class="span4">
<h3>地址的例子</h3>
<p>这有两个使用 <code><address></code> 标签的例子：</p>
<address>
<strong>TVlike文化有限公司</strong><br>
哪个省哪个市无名大道404号<br>
佚名大厦89层64号<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>有关负责人</strong><br>
<a href="mailto:#">giveme.money@chinagov.com</a>
</address>
</div>
<div class="span4">
<h3>缩写的例子</h3>
<p>
使用 <code>title</code> 属性的缩写词会带有点状(dotted)底边线，鼠标经过时会显示带问号的箭头，并提示完整的字词信息。
</p>
<p>
对缩写词元素应用 <code>.initialism</code> 会减小一号字体大小，以协调排版效果。
</p>
<p>例子：<abbr title="HyperText Markup Language 超文本标记语言" class="initialism">Html</abbr> 是自切片面包问世以来最棒的发明。</p>
<p>例子：<abbr title="中国共产党铁血忠义青年团">共青团</abbr>是一个光荣而伟大的组织哟~</p>
</div>
</div>
<!-- Blockquotes -->
<h2>引用</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>元素</th>
<th>用法</th>
<th>选项</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><blockquote></code>
</td>
<td>
用于引用外部内容的块级元素
</td>
<td>
<p> <code>cite</code> 属性存放来源URL</p>
<code>.pull-left</code> 和 <code>.pull-right</code> 决定是内容居左还是居右
</td>
</tr>
<tr>
<td>
<code><small></code>
</td>
<td>
可选元素，用于添加针对用户的引用，通常用于引言的作者。
</td>
<td>
可以将引言或出处置于 <code><cite></code> 标签内。
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="span4">
<p>
用 <code><blockquote></code> 嵌套 <abbr title="HyperText Markup Language">HTML</abbr> 即可实现引用。
对于连续的引用内容，建议使用 <code><p></code> 标签。
</p>
<p>
还可以添加一个可选的 <code><small></code> 元素来表示引用的出处，该元素会利用样式在内容前加入宽度为一个字长的破折号 <code>&mdash;</code> 。
</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
<blockquote>
<p>一天吃六个胶囊，一天三次、一次两个，没有吃掉多少铬。</p>
<small>卫生部合理用药专家孙忠实</small>
</blockquote>
</pre>
</div>
</div><!--/row-->
<h3>引用的例子</h3>
<div class="row">
<div class="span6">
<p>默认引用样式如下:</p>
<blockquote>
<p>
一天吃六个胶囊，一天三次、一次两个，没有吃掉多少铬。
</p>
<small>
卫生部合理用药专家孙忠实 于<cite title="">人民网强国论坛</cite>
</small>
</blockquote>
</div>
<div class="span6">
<p>用 <code>class="pull-right"</code> 将引用内容居右:</p>
<blockquote class="pull-right">
<p>我曾沾的光使我终身受益，因家庭牵连，我被关进监狱。五年的监狱生活，使我经受了磨难，锻炼了意志，学会了思考，懂得了公平，民主，法制对一个社会是多么重要；温饱，自由，尊严对一个人是多么重要！</p>
<small>薄熙来 于<cite title="">1993年3月于大连经贸会</cite></small>
</blockquote>
</div>
</div>
<!-- Lists -->
<h2>列表</h2>
<div class="row">
<div class="span4">
<h3>无序号</h3>
<p><code><ul></code></p>
<ul>
<li>Django是个好框架</li>
<li>Pyramid是个好框架</li>
<li>Tornado是个好框架</li>
<li>Flask是个好框架</li>
<li>Uliweb是个好框架
<ul>
<li>MVT模型</li>
<li>组织结构</li>
<li>资源共享的处理方式</li>
<li>URL映射</li>
<li>View和Template</li>
<li>ORM</li>
<li>I18N</li>
<li>功能扩展</li>
<li>命令行工具</li>
<li>运行环境支持</li>
<li>其它特点</li>
</ul>
</li>
<li>Bottle是个好框架</li>
<li>Rails是个好框架</li>
<li>Yii是个好框架</li>
</ul>
</div>
<div class="span4">
<h3>无样式</h3>
<p><code><ul class="unstyled"></code></p>
<ul class="unstyled">
<li>以动手实践为荣 , 以只看不练为耻;</li>
<li>以打印日志为荣 , 以单步跟踪为耻;</li>
<li>以空格缩进为荣 , 以制表缩进为耻;</li>
<li>以单元测试为荣 , 以人工测试为耻;
<ul>
<li>UnitTest很不错</li>
<li>Nose也很好用</li>
<li>配合Profile很爽</li>
<li>配合pdb也不错</li>
</ul>
</li>
<li>以模块复用为荣 , 以复制粘贴为耻;</li>
<li>以多态应用为荣 , 以分支判断为耻;</li>
<li>以Pythonic为荣 , 以冗余拖沓为耻;</li>
<li>以总结分享为荣 , 以跪求其解为耻;</li>
</ul>
</div>
<div class="span4">
<h3>有序号</h3>
<p><code><ol></code></p>
<ol>
<li>以热爱祖国为荣，以危害祖国为耻吗？</li>
<li>以服务人民为荣，以背离人民为耻吗？</li>
<li>以崇尚科学为荣，以愚昧无知为耻吗？</li>
<li>以辛勤劳动为荣，以好逸恶劳为耻吗？</li>
<li>以团结互助为荣，以损人利己为耻吗？</li>
<li>以诚实守信为荣，以见利忘义为耻吗？</li>
<li>以遵纪守法为荣，以违法乱纪为耻吗？</li>
<li>以艰苦奋斗为荣，以骄奢淫逸为耻吗？</li>
</ol>
</div>
</div><!-- /row -->
<br>
<div class="row">
<div class="span4">
<h3>描述</h3>
<p><code><dl></code></p>
<dl>
<dt>描述列表</dt>
<dd>适用于术语的定义/解释</dd>
<dt>Django</dt>
<dd>Django 是一种高级的基于python的web开发框架；</dd>
<dd>Django推崇一种快速,整洁而且实用主义哲学的设计及开发方式</dd>
<dt>Tornado</dt>
<dd>Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本。</dd>
</dl>
</div>
<div class="span8">
<h3>水平状态的描述</h3>
<p><code><dl class="dl-horizontal"></code></p>
<dl class="dl-horizontal">
<dt>描述列表</dt>
<dd>适用于术语的定义/解释</dd>
<dt>Django</dt>
<dd>Django 是一种高级的基于python的web开发框架；</dd>
<dd>Django推崇一种快速,整洁而且实用主义哲学的设计及开发方式</dd>
<dt>Tornado</dt>
<dd>Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本。</dd>
</dl>
</div>
</div><!-- /row -->
</section>
<!-- Code
================================================== -->
<section id="code">
<div class="page-header">
<h1>代码 <small>行级/块状代码片段</small></h1>
</div>
<div class="row">
<div class="span4">
<h2>行级代码片段</h2>
<p>使用 <code><code></code> 包装行级代码片段</p>
<pre class="prettyprint linenums">
例如，<code>section</code> 应该被做为行级代码包装。
</pre>
</div><!--/span-->
<div class="span4">
<h2>基本块状内容</h2>
<p>
使用<code><pre></code> 对多行代码进行包装。 切记一定要对代码中的每个<>进行转义，这样方能得到正常的渲染结果。
</p>
<pre>
<p>示范文本...</p>
</pre>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
<pre>
&lt;p&gt;示范文本...&lt;/p&gt;
</pre>
</pre>
<p><strong>注意：</strong> 尽可能地让 <code><pre></code> 左对齐；因为会渲染所有空格和tab（就是你键盘左边的那个tab键）。</p>
<p>
还可以使用 <code>.pre-scrollable</code> 给代码区域设置350px的最大高度并设置一个纵向滚动条。</p>
</div><!--/span-->
<div class="span4">
<h2>Google Prettify 美化代码</h2>
<p>在 <code><pre></code> 元素上应用 <code>.prettyprint</code> 和 <code>.linenums</code> 增强代码渲染效果。 <code>.linenums</code> 用于显示行号。</p>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
<p>示范文本...</p>
</pre>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
<pre class="prettyprint
linenums">
&lt;p&gt;示范文本...&lt;/p&gt;
</pre>
</pre>
<p><a href="http://code.google.com/p/google-code-prettify/">下载 google-code-prettify</a> 并查看 <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">使用指南</a>.</p>
</div><!--/span-->
</div><!--/row-->
</section>
<!-- Tables
================================================== -->
<section id="tables">
<div class="page-header">
<h1>表格 <small>适用于展示扁平化的列表数据</small></h1>
</div>
<h2>表格标记</h2>
<div class="row">
<div class="span8">
<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> or <code><th></code>)
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
默认的表格单元格
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
用于列头(或是行，取决于标签所在位置和区域)的特殊标签<br />
必须置于 <code><thead></code> 标签内。
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
表格用途的描述或摘要，对屏幕阅读器（视障人士读屏软件）非常有用
</td>
</tr>
</tbody>
</table>
</div>
<div class="span4">
<pre class="prettyprint linenums">
<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
</table>
</pre>
</div>
</div>
<h2>表格选项</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>名称</th>
<th>类</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>默认</td>
<td class="muted">None</td>
<td>无样式，仅仅有列和行</td>
</tr>
<tr>
<td>基本</td>
<td>
<code>.table</code>
</td>
<td>行与行之间以水平线相隔</td>
</tr>
<tr>
<td>有边线</td>
<td>
<code>.table-bordered</code>
</td>
<td>表格外围均有外边框</td>
</tr>
<tr>
<td>间隔背景</td>
<td>
<code>.table-striped</code>
</td>
<td>奇数行背景设为浅灰色</td>
</tr>
<tr>
<td>紧凑</td>
<td>
<code>.table-condensed</code>
</td>
<td>竖直方向padding缩减一半，从8px变为4px，所有的 <code>td</code> 和 <code>th</code> 元素都受影响</td>
</tr>
</tbody>
</table>
<h2>表格的例子</h2>
<h3>1. 默认表格样式</h3>
<div class="row">
<div class="span4">
<p>
仅使用一组边线对表格进行格式化，以保证可读性并维持表格结构不变。
从 2.0 版本开始, 该效果不再做为默认，必须使用 <code>.table</code> 。
</p>
<pre class="prettyprint linenums">
<table class="table">
…
</table></pre>
</div>
<div class="span8">
<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>2010</td>
</tr>
<tr>
<td>2</td>
<td>邪恶力量</td>
<td>悬疑魔幻</td>
<td>2005</td>
</tr>
<tr>
<td>3</td>
<td>神探伽俐略</td>
<td>推理探案</td>
<td>2008</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>2. 背景交替的表格</h3>
<div class="row">
<div class="span4">
<p>
添加 <code>.table-striped</code> 让表格变得生动一点。
</p>
<p class="muted"><strong>注意：</strong>
该效果要用到 <code>:nth-child</code> CSS 选择器，IE7-IE8不支持该特性，因而也无法呈现效果。
</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
<table class="table table-striped">
…
</table></pre>
</div>
<div class="span8">
<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>2010</td>
</tr>
<tr>
<td>2</td>
<td>邪恶力量</td>
<td>悬疑魔幻</td>
<td>2005</td>
</tr>
<tr>
<td>3</td>
<td>神探伽俐略</td>
<td>推理探案</td>
<td>2008</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>3. 有边线的表格</h3>
<div class="row">
<div class="span4">
<p>
为整个表格添加边线，出于美观考虑，每个边角都呈现圆角。
</p>
<pre class="prettyprint linenums">
<table class="table table-bordered">
…
</table></pre>
</div>
<div class="span8">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>电视剧</th>
<th>类型</th>
<th>年代</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>爱情公寓</td>
<td>都市爱情喜剧</td>
<td>2010</td>
</tr>
<tr>
<td>2</td>
<td>邪恶力量</td>
<td>悬疑魔幻</td>
<td>2005</td>
</tr>
<tr>
<td>3</td>
<td>神探伽俐略</td>
<td>推理探案</td>
<td>2008</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>4. 紧凑表格</h3>
<div class="row">
<div class="span4">
<p>
添加 <code>.table-condensed</code> 让表格更加紧凑，所有表格单元的padding都会减半(从8px到4px)
</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
<table class="table table-condensed">
…
</table></pre>
</div>
<div class="span8">
<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>2010</td>
</tr>
<tr>
<td>2</td>
<td>邪恶力量</td>
<td>悬疑魔幻</td>
<td>2005</td>
</tr>
<tr>
<td>3</td>
<td>神探伽俐略</td>
<td>推理探案</td>
<td>2008</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>5. 组合使用</h3>
<div class="row">
<div class="span4">
<p>
自由组合搭配表格类以实现不同的外观。
</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
<table class="table table-striped table-bordered table-condensed">
...
</table></pre>
</div>
<div class="span8">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>#</th>
<th>电视剧</th>
<th>类型</th>
<th>年代</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>爱情公寓</td>
<td>都市爱情喜剧</td>
<td>2010</td>
</tr>
<tr>
<td>2</td>
<td>邪恶力量</td>
<td>悬疑魔幻</td>
<td>2005</td>
</tr>
<tr>
<td>3</td>
<td>神探伽俐略</td>
<td>推理探案</td>
<td>2008</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Forms
================================================== -->
<section id="forms">
<div class="page-header">
<h1>表单</h1>
</div>
<div class="row">
<div class="span4">
<h2>灵活的HTML和CSS</h2>
<p>
Bootstrap的优异之处在于：不管我们在应用中怎样使用表单输入元素和控件，其展示效果都特别棒！
无需使用过多的HTML，况且我们已经还内置了几种常用模式。
</p>
<p>
更复杂的布局可以用简单而可扩展的类实现，更利于样式化和事件绑定。
</p>
</div>
<div class="span4">
<h2>包含四种布局</h2>
<p>
Bootstrap提供了下列四种表单布局:
</p>
<ul>
<li>垂直式布局 (默认)</li>
<li>搜索式布局</li>
<li>行式布局</li>
<li>水平式布局</li>
</ul>
<p>
四种布局虽然在标记上有不些许同，但都使用同样的表单控件，在表单行为上也是一致的。
</p>
</div>
<div class="span4">
<h2>控件状态以及其他</h2>
<p>
Bootstrap对于所有的基本表单控件（如input,textarea,select等等）都进行了样式定义。
同时也提供了一组自定义组件，比如前置/后置输入框和复合选框列表。
</p>
<p>
每种表单控件都有 error, warning, success 等不同状态，Bootstrap还包括了控件禁用时的样式。
</p>
</div>
</div>
<h2>四种表单</h2>
<p>
Bootstrap为四种常用表单提供了简单的标记和样式
</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>名称</th>
<th>类</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<th>垂直式 (默认)</th>
<td><code>.form-vertical</code> <span class="muted">(非必填，默认)</span></td>
<td>堆叠式的，所有控件的标签文字都左对齐</td>
</tr>
<tr>
<th>行式</th>
<td><code>.form-inline</code></td>
<td>标签文字左对齐，控件以inline-block紧凑形式存在</td>
</tr>
<tr>
<th>搜索式</th>
<td><code>.form-search</code></td>
<td>
经典的搜索美化方案，对文本框进行圆化
</td>
</tr>
<tr>
<th>水平式</th>
<td><code>.form-horizontal</code></td>
<td>左浮动，标签与其对应的控件居于同一行，标签文字右对齐</td>
</tr>
</tbody>
</table>
<h2>表单单例 <small>仅仅使用表单控件，无须额外标记</small></h2>
<div class="row">
<div class="span3">
<h3>基本表单</h3>
<p>2.0版本开始使用更为简洁灵活的表单默认样式，只使用表单控件，无须额外标记。</p>
</div>
<div class="span9">
<form class="well form-search">
<label>标签名称</label>
<input type="text" class="span3" placeholder="请输入文字..."> <span class="help-inline">相关提示信息</span>
<p class="help-block">块状帮助文字...</p>
<label class="checkbox">
<input type="checkbox"> 选我选我
</label>
<button type="submit" class="btn">提交</button>
</form>
<pre class="prettyprint linenums">
<form class="well">
<label>标签名称</label>
<input type="text" class="span3" placeholder="请输入文字...">
<span class="help-inline">相关提示信息</span>
<p class="help-block">块状帮助文字...</p>
<label class="checkbox">
<input type="checkbox"> 选我选我
</label>
<button type="submit" class="btn">Submit</button>
</form>
</pre>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<h3>表单表单</h3>
<p>
借鉴了Webkit的默认样式，使用 <code>.form-search</code> 圆化搜索文本框
</p>
</div>
<div class="span9">
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">搜索</button>
</form>
<pre class="prettyprint linenums">
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">搜索</button>
</form>
</pre>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<h3>行级表单</h3>
<p>使用 <code>.form-inline</code> 和 <code>.form-horizontal</code> 将原始的块状文本框样式变成 inline-block。</p>
</div>
<div class="span9">
<form class="well form-inline">
<input type="text" class="input-small" placeholder="邮件">
<input type="password" class="input-small" placeholder="密码">
<label class="checkbox">
<input type="checkbox"> 记住我
</label>