当前位置:>>
早期在CSS不是很盛行的时候，就有很多朋友在追求着做细线表格的方法，网上也流传着一些方法，记得以前我这个乡下人也收集过，不过不知道有没有放在 blog里，人懒也就不去翻了，有兴趣的朋友随便就翻翻吧。不过今天呢，我想跟大家说说的捏就是以前我自己是没接触的一个方法，不知道大家晓得不啦。如果晓得那就甭看下去了，浪费宝贵时间不好；如果不晓得的朋友可以借鉴一下，还不错的哦。
首先呢还是给大家看一下以前个人比较常用一个方法，表格套表格你也模糊挖。简单说一下这个方法：最外面一个大的一行一列的表格，设置单元格颜色（也就是后面的边框色）；然后套一个你需要的表格，间距为1就，并把每个单元格的背景色设置为白色。
这里方法麻烦的就是表格套表格，而且代码也比较多比较杂，当然也是可以用CSS来简化一下，可惜简化的也只能是样式，没办法解决表格套表格的问题。
&table width=&600& border=&0& cellpadding=&0& cellspacing=&0& bgcolor=&#FF0000&&
&&& &td&&table width=&600& border=&0& cellspacing=&1& cellpadding=&0&&
&&&&&&& &tr&
&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&& &/tr&
&&&&&&& &tr&
&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&& &/tr&
&&&&& &/table&&/td&
然后呢再说一下今天的&主角&，用CSS样式来控制表格，把它变成细线表格。大家都知道在CSS中border是可以控制边框的样式跟颜色的，但是如果用一个表格加上border样式的话，那是要加在table呢还是tr或者是td里呢，如
&table style=&border:1px solid #F00&&
&tr style=&border:1px solid #F00&&或者
& &td style=&border:1px solid #F00&&，其实加哪个都不好，如果是table那就是外边框有细线了，如果是tr那就是该行是细线了，而如果是td呢，那基本上可以说满足我们的需求了，但是可以发现有的地方线条是粗的。为什么呢，其实很简单，因为td跟td之间有重叠的位置啊，所以就是2px而不是我们要的1px线了；那如果针对td做的 border不是四边而是对border-top、border-right、border-bottom、border-left分别在需要的位置设置呢，这个当然可以实现要求了，不过这样的话，代码就增加了很多。
&&& 其实简单的方法还是有的，只要把td跟td之间的重叠位置的线条合并在一起就可以了，先看一下这个效果。
&&& &table width=&600& border=&0& cellpadding=&0& cellspacing=&0& bgcolor=&#FF0000&&
&&&&& &tr&
&&&&&&& &td&&table width=&600& border=&0& cellspacing=&1& cellpadding=&0&&
&&&&&&&&&&& &tr&
&&&&&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&&&& &/tr&
&&&&&&&&&&& &tr&
&&&&&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&&&&&& &td bgcolor=&#FFFFFF&&&/td&
&&&&&&&&&&& &/tr&
&&&&&&&&& &/table&&/td&
&&&&& &/tr&
&&& &/table&
下一篇: |返回列表|上一篇：
相关模板：
栏目导航：
模板说明:-利用css实现细线表格(table)边框。如何用CSS设置table中td中的图片边框？
[问题点数：20分，结帖人xiyaozi]
如何用CSS设置table中td中的图片边框？
[问题点数：20分，结帖人xiyaozi]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
本帖子已过去太久远了，不再提供回复功能。24939人阅读
表格和表单是网页中非常重要的两个元素，我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。
首先表格中的标记：我们看一下代码：
&title&年度收入&/title&
caption-side:
&table summary=&This table shows the yearly income for years 2004 through 2007& border=&1&&
&caption&年度收入 2010 - 2012&/caption&
&th scope=&col&&2004&/th&
&th scope=&col&&2005&/th&
&th scope=&col&&2006&/th&
&th scope=&col&&2007&/th&
&th scope=&row&&拨款&/th&
&td&11,980&/td&
&td&12,650&/td&
&td&9,700&/td&
&td&10,600&/td&
&th scope=&row&&捐款&/th&
&td&4,780&/td&
&td&4,989&/td&
&td&6,700&/td&
&td&6,590&/td&
&th scope=&row&&投资&/th&
&td&8,000&/td&
&td&8,100&/td&
&td&8,760&/td&
&td&8,490&/td&
&th scope=&row&&募捐&/th&
&td&3,200&/td&
&td&3,120&/td&
&td&3,700&/td&
&td&4,210&/td&
&th scope=&row&&销售&/th&
&td&28,400&/td&
&td&27,100&/td&
&td&27,950&/td&
&td&29,050&/td&
&th scope=&row&&杂费&/th&
&td&2,100&/td&
&td&1,900&/td&
&td&1,300&/td&
&td&1,760&/td&
&th scope=&row&&总计&/th&
&td&58,460&/td&
&td&57,859&/td&
&td&58,110&/td&
&td&60,700&/td&
这是一个年度输入的表格，正文部分首先是一个table标记开始表示的是整个表格，一个caption表示的一个表格的标题，tr表示一个表格的行，而th表示的是一个表格的比较重要的第一行，后面th表示表格的竖着的比较重要的那个行，td表格一个一个的单元格，我们看一下效果，便明白。
这些标记：tr、th、td都是组成表格不可缺少的元素。
刚才的表格非常淡雅，我们仅仅只是为了表示表格的标记，那么CSS是如何控制表格的颜色的呢：我们看一下代码
&title&年度收入&/title&
background-color:#ebf5 /* 页面背景色 */
margin:0 padding:4
text-align:
/* 居中对齐（IE有效） */
.datalist{
color:#0046a6;
/* 表格文字颜色 */
background-color:#d2e8 /* 表格背景色 */
font-family:A
/* 表格字体 */
.datalist caption{
font-size:18
/* 标题文字大小 */
font-weight:
/* 标题文字粗体 */
.datalist th{
color:#003e7e;
/* 行、列名称颜色 */
background-color:#7bb3 /* 行、列名称的背景色 */
&table summary=&This table shows the yearly income for years 2004 through 2007& border=&1& class=&datalist&&
&caption&年度收入 2008 - 2011&/caption&
&th scope=&col&&2008&/th&
&th scope=&col&&2009&/th&
&th scope=&col&&2010&/th&
&th scope=&col&&2011&/th&
&th scope=&row&&拨款&/th&
&td&11,980&/td&
&td&12,650&/td&
&td&9,700&/td&
&td&10,600&/td&
&th scope=&row&&捐款&/th&
&td&4,780&/td&
&td&4,989&/td&
&td&6,700&/td&
&td&6,590&/td&
&th scope=&row&&投资&/th&
&td&8,000&/td&
&td&8,100&/td&
&td&8,760&/td&
&td&8,490&/td&
&th scope=&row&&募捐&/th&
&td&3,200&/td&
&td&3,120&/td&
&td&3,700&/td&
&td&4,210&/td&
&th scope=&row&&销售&/th&
&td&28,400&/td&
&td&27,100&/td&
&td&27,950&/td&
&td&29,050&/td&
&th scope=&row&&杂费&/th&
&td&2,100&/td&
&td&1,900&/td&
&td&1,300&/td&
&td&1,760&/td&
&th scope=&row&&总计&/th&
&td&58,460&/td&
&td&57,859&/td&
&td&58,110&/td&
&td&60,700&/td&
在table这里用一个class=“datalist”来将整个表格的CSS定义出来，body设置了背景颜色以及对齐方式；dataList设置了表格文字颜色、表格背景色以及表格字体；datalist caption设置了标题……我们看一下效果：
对于大量的数据，表格有非常多的行和非常多的列，如果表格的每一行都采用相同的颜色，对于长期面对显示器的人来说，是经常找不到数据的。而隔行变色就能解决这个问题，我们看这个效果：
下面我们看隔行表示显示的代码：
&title&Member List&/title&
.datalist{
border:1px solid #0058a3; /* 表格边框 */
font-family:A
border-collapse: /* 边框重叠 */
background-color:#eaf5 /* 表格背景色 */
font-size:14
.datalist caption{
padding-bottom:5
font:bold 1.4
text-align:
.datalist th{
border:1px solid #0058a3; /* 行名称边框 */
background-color:#4 /* 行名称背景色 */
color:#FFFFFF;
/* 行名称颜色 */
font-weight:
padding-top:4 padding-bottom:4
padding-left:12 padding-right:12
text-align:
.datalist td{
border:1px solid #0058a3; /* 单元格边框 */
text-align:
padding-top:4 padding-bottom:4
padding-left:10 padding-right:10
.datalist tr.altrow{
background-color:#c7e5 /* 隔行变色 */
&table class=&datalist& summary=&list of members in EE Studay&&
&caption&Member List&/caption&
&th scope=&col&&Name&/th&
&th scope=&col&&Class&/th&
&th scope=&col&&Birthday&/th&
&th scope=&col&&Constellation&/th&
&th scope=&col&&Mobile&/th&
&!-- 奇数行 --&
&td&isaac&/td&
&td&W13&/td&
&td&Jun 24th&/td&
&td&Cancer&/td&
&td&1118159&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&girlwing&/td&
&td&W210&/td&
&td&Sep 16th&/td&
&td&Virgo&/td&
&td&1307994&/td&
&!-- 奇数行 --&
&td&tastestory&/td&
&td&W15&/td&
&td&Nov 29th&/td&
&td&Sagittarius&/td&
&td&1095245&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&lovehate&/td&
&td&W47&/td&
&td&Sep 5th&/td&
&td&Virgo&/td&
&td&6098017&/td&
&!-- 奇数行 --&
&td&slepox&/td&
&td&W19&/td&
&td&Nov 18th&/td&
&td&Scorpio&/td&
&td&0658635&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&smartlau&/td&
&td&W19&/td&
&td&Dec 30th&/td&
&td&Capricorn&/td&
&td&0006621&/td&
&!-- 奇数行 --&
&td&whaler&/td&
&td&W19&/td&
&td&Jan 18th&/td&
&td&Capricorn&/td&
&td&1851918&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&shenhuanyan&/td&
&td&W25&/td&
&td&Jan 31th&/td&
&td&Aquarius&/td&
&td&0621827&/td&
&!-- 奇数行 --&
&td&tuonene&/td&
&td&W210&/td&
&td&Nov 26th&/td&
&td&Sagittarius&/td&
&td&0091704&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&ArthurRivers&/td&
&td&W91&/td&
&td&Feb 26th&/td&
&td&Pisces&/td&
&td&0468357&/td&
&!-- 奇数行 --&
&td&reconzansp&/td&
&td&W09&/td&
&td&Oct 13th&/td&
&td&Libra&/td&
&td&3643041&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&linear&/td&
&td&W86&/td&
&td&Aug 18th&/td&
&td&Leo&/td&
&td&6398341&/td&
&!-- 奇数行 --&
&td&laopiao&/td&
&td&W41&/td&
&td&May 17th&/td&
&td&Taurus&/td&
&td&1254004&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&dovecho&/td&
&td&W19&/td&
&td&Dec 9th&/td&
&td&Sagittarius&/td&
&td&1892013&/td&
&!-- 奇数行 --&
&td&shanghen&/td&
&td&W42&/td&
&td&May 24th&/td&
&td&Gemini&/td&
&td&1544254&/td&
&tr class=&altrow&&
&!-- 偶数行 --&
&td&venessawj&/td&
&td&W45&/td&
&td&Apr 1st&/td&
&td&Aries&/td&
&td&1523753&/td&
&!-- 奇数行 --&
&td&lightyear&/td&
&td&W311&/td&
&td&Mar 23th&/td&
&td&Aries&/td&
&td&1002908&/td&
正文部分把奇数行和偶数行都写上了。属性值大家自己看，这里不再一一介绍了，值得一提的是这里的altrow,如果设置了这个的属性，那么他将覆盖他父亲的颜色，而是用自己的颜色，这就实现了隔行变色的效果。
那么接下来我们再看看CSS是如何控制表单的呢：代码
&title&表单&/title&
border: 1px dotted #AAAAAA;
padding: 3px 6px 3px 6
font:14px A
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
textarea {
width: 200
height: 40
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
&form method=&post&&
&p&请输入您的姓名:&br&&input type=&text& name=&name& id=&name&&&/p&
&p&请选择你最喜欢的颜色:&br&
&select name=&color& id=&color&&
&option value=&red&&红&/option&
&option value=&green&&绿&/option&
&option value=&blue&&蓝&/option&
&option value=&yellow&&黄&/option&
&option value=&cyan&&青&/option&
&option value=&purple&&紫&/option&
&/select&&/p&
&p&请问你的性别:&br&
&input type=&radio& name=&sex& id=&male& value=&male&&男&br&
&input type=&radio& name=&sex& id=&female& value=&female&&女&/p&
&p&你喜欢做些什么:&br&
&input type=&checkbox& name=&hobby& id=&book& value=&book&&看书
&input type=&checkbox& name=&hobby& id=&net& value=&net&&上网
&input type=&checkbox& name=&hobby& id=&sleep& value=&sleep&&睡觉&/p&
&p&我要留言:&br&&textarea name=&comments& id=&comments& cols=&30& rows=&4&&&/textarea&&/p&
&p&&input type=&submit& name=&btnSubmit& id=&btnSubmit& value=&Submit&&&/p&
正文部分是一个表单，他以form标志开始，其中里边有输入框，有下拉菜单，有单选项，有复选框，有文字的输入框，有按钮，我们看显示的效果：
在CSS中的代码大家自己理解，和之前讲的都是一样的。
我们接下来看像文字一样的按钮
我们先看一下效果：
下面我们看一下代码是如何达到这个效果的，
&title&像文字一样的按钮&/title&
background-color:#
/* 页面背景色 */
margin:0 padding:0
font:14px A
border-bottom:1px solid #005aa7; /* 下划线效果 */
color:#005aa7;
border-top:0 border-left:0
border-right:0
background-color:
/* 背景色透明 */
background-color:
/* 背景色透明 */
/* 边框取消 */
&form method=&post&&
请输入您的信息: &input type=&text& name=&name& id=&name& class=&txt&&
&input type=&submit& name=&btnSubmit& id=&btnSubmit& value=&Submit&&& class=&btn&&
其实我们的border-bottom设置为1px，其他的border-top、border-left、border-right边框都设置为了0.然后设置一个颜色和背景色就实现了这个按钮。而这个按钮，我们讲四个边框都设置为0，而背景色设置为透明来实现像文字一样的按钮；通过这个我们可以看到，巧妙的使用CSS，能达到许多意想不到的效果。
Excel表格是在office软件中非常受大家欢迎的一个软件，而在网页中我们来模拟。我们先看看这个显示效果：
我们可以像在office里边的excel一样随意的输入东西，而不再有繁琐的什么输入框。下面我们来看一下这个代码：
&title&直接输入的Excel表格&/title&
table.formdata{
border:1px solid #5F6F7E;
border-collapse:
font-family:A
table.formdata caption{
text-align:
padding-bottom:6
table.formdata th{
border:1px solid #5F6F7E;
background-color:#E2E2E2;
color:#000000
text-align:
font-weight:
padding:2px 8px 2px 6
table.formdata td{
border:1px solid #ABABAB; /* 单元格边框 */
table.formdata input{
padding:1px 3px 1px 3
/* 输入框不要边框 */
font-family:A
border:1px solid #0083f2;
font-family:A
&form method=&post&&
&table class=&formdata&&
&caption&公司销售统计表 &/caption&
&th scope=&col&&2004&/th&
&th scope=&col&&2005&/th&
&th scope=&col&&2006&/th&
&th scope=&col&&2007&/th&
&th scope=&row&&硬盘(Hard Disk)&/th&
&td&&input type=&text& name=&harddisk2004& id=&harddisk2004&&&/td&
&td&&input type=&text& name=&harddisk2005& id=&harddisk2005&&&/td&
&td&&input type=&text& name=&harddisk2006& id=&harddisk2006&&&/td&
&td&&input type=&text& name=&harddisk2007& id=&harddisk2007&&&/td&
&th scope=&row&&主板(Mainboard)&/th&
&td&&input type=&text& name=&mainboard2004& id=&mainboard2004&&&/td&
&td&&input type=&text& name=&mainboard2005& id=&mainboard2005&&&/td&
&td&&input type=&text& name=&mainboard2006& id=&mainboard2006&&&/td&
&td&&input type=&text& name=&mainboard2007& id=&mainboard2007&&&/td&
&th scope=&row&&内存条(Memory Disk)&/th&
&td&&input type=&text& name=&memory2004& id=&memory2004&&&/td&
&td&&input type=&text& name=&memory2005& id=&memory2005&&&/td&
&td&&input type=&text& name=&memory2006& id=&memory2006&&&/td&
&td&&input type=&text& name=&memory2007& id=&memory2007&&&/td&
&th scope=&row&&机箱(Case)&/th&
&td&&input type=&text& name=&case2004& id=&case2004&&&/td&
&td&&input type=&text& name=&case2005& id=&case2005&&&/td&
&td&&input type=&text& name=&case2006& id=&case2006&&&/td&
&td&&input type=&text& name=&case2007& id=&case2007&&&/td&
&th scope=&row&&电源(Power)&/th&
&td&&input type=&text& name=&power2004& id=&power2004&&&/td&
&td&&input type=&text& name=&power2005& id=&power2005&&&/td&
&td&&input type=&text& name=&power2006& id=&power2006&&&/td&
&td&&input type=&text& name=&power2007& id=&power2007&&&/td&
&th scope=&row&&CPU风扇(CPU Fan)&/th&
&td&&input type=&text& name=&cpufan2004& id=&cpufan2004&&&/td&
&td&&input type=&text& name=&cpufan2005& id=&cpufan2005&&&/td&
&td&&input type=&text& name=&cpufan2006& id=&cpufan2006&&&/td&
&td&&input type=&text& name=&cpufan2007& id=&cpufan2007&&&/td&
&th scope=&row&&总计(Total)&/th&
&td&&input type=&text& name=&total2004& id=&total2004&&&/td&
&td&&input type=&text& name=&total2005& id=&total2005&&&/td&
&td&&input type=&text& name=&total2006& id=&total2006&&&/td&
&td&&input type=&text& name=&total2007& id=&total2007&&&/td&
&p&&input type=&submit& name=&btnSubmit& id=&btnSubmit& value=&Add Data& class=&btn&&
&input type=&reset& value=&Reset All& class=&btn&&&/p&
我们说说是如何实现这个效果的思路，首先正文部分是用一个表格来进行搭建，而将表单嵌套在表格里边，每一项都设置一个id，一个name。最后是一个按钮；我们看CSS代码，在表格中，我们将td单元格他的边框设置，而对于input这个文本框，我们将他的border设置为none，那么这样所实现的效果就是输入的边框被取消掉了，而真正取而代之的是表格的边框，从而实现了这么一个小技巧。通过这个实例，我们可以看到，巧妙的设置CSS，能达到很多你意想不到的效果。
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：470085次
积分：5320
积分：5320
排名：第2328名
原创：62篇
评论：1637条
阅读：16289
文章：11篇
阅读：52987
文章：11篇
阅读：75175
(9)(5)(6)(4)(4)(3)(4)(8)(4)(8)(7)(4)(1)当前位置 &
CSS样式描述表格Table边框
　表格边框的处理是CSS网页布局中经常会遇到的内容，在中也有过相关的介绍，除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。&
&html&&head&&title&HTML Table&/title&&/head&
&style type=&text/css&&
background:
border-collapse:
border-spacing: 10
border-top: 15
border-left: 15
border-right: 5
border-bottom: 10 }
background:
border: outset 5
horizontal-align: }
border: ridge 5
border-top: ridge 10 }
&/style&&body&
&table summary=& - Tables and CSS&&
&caption&First Quarter Sales&/caption&
&thead&&tr&
&thabbr=&salesperson& scope=&col&&Person&/th&
&thabbr=&sales& scope=&col&&Sales&/th&
&/tr&&/thead&
&tbody&&tr&
&td&Mr. Jin&/td&
&td&600.00&/td&
&td&Mr. Jones&/td&
&td&0000.00&/td&
&td&Ms. Williams&/td&
&td&0000.00&/td&
&/tr&&/tbody&
&tfoot&&tr&
&td colspan=&2&&Let's sale, sale, sale!&/td&
&/tr&&/tfoot&&/table&&/body&&/html&
　　您可能注意到了整个CAPTION元素的边框定义为蓝色5磅的脊线效果，而CAPTION边框的顶部设定为10磅。如果单独的边框设定（左边、右边、顶部、底部）出现在后面将覆盖原有的整体边框设定。&
　　除此以外，在上一个例子中，通过分配TABLE元素的边框属性，可以在一个表格中实现多重边框（锚标记、表格主体、表头、单独的单元格等等）。&
　　您可以通过边框间距属性来指定相邻的单元格之间的距离，您可以指定一个或两个值，如果指定了一个值，那么水平和垂直间距都将使用这一个值；如果指定了两个值，那么第一个值规定了水平间距而第二个值指定了垂直间距。这些值不能是负值，我在这个例子中使用了10磅的间距值。&
　　边框的collapse属性设定了表格的边框模型，该属性的默认值是独立的边框模型，单独的边框模型使用border-spacing属性作为不同边框之间的间距，该间距使用表格元素作为填充背景。&
　　对于边框模型中，万维网联盟（World&Wide&Web&Consortium）定义了以下的规则来解决表格样式的冲突：&
　　&使用&隐藏&边框属性的边框优先于其他的边框属性，任何使用&隐藏&属性的边框比其它的边框属性处理优先级要高。
　　使用&无样式&边框的优先级最低，如果在同一位置所有元素的边框属性都是&无样式&，表格边框才会被忽略。（注意，&无样式&是边框样式的默认值。）
　　如果没有样式设置为&隐藏&而且至少有一个样式没有设置为&无样式&，那么宽边框的优先级高于细边框。边框样式的优先级如下：双实线、单实线、虚线、点线、脊线、外凸、槽线，级别最低的是内凹。
　　如果边框样式只有颜色不同，那么单元格的样式优先级高于行的优先级，而且高于行组、列、列组和整个表格。&
　　表格和其他的HTML元素一样，拥有很多CSS样式选项。表格和单元格的边框是一个很好的例子，CSS应当可以满足您对表格样式的需要。但是使用CSS格式化的表格在不同的浏览器中会显示出不同的效果，因此需要进行广泛的测试。&
视频教程列表
文章教程搜索
输入您的搜索字词
提交搜索表单
div+css推荐教程
tel:<font color="#FF30058HTML中定义的所有标题标签, 从&h1& 到 &h6& 都是可用的。
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Bootstrap定义的全局 font-size 是 14px，line-height 是 20px。这些样式应用到了 &body& 和所有的段落上。另外，对 &p& (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
&p&...&/p&
Lead body copy
通过添加 .lead 让段落突出显示
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
&p class="lead"&...&/p&
使用Less工具构建
variables.less文件中定义的两个LESS变量决定了排版尺寸: @baseFontSize 和 @baseLineHeight。第一个变量定义了全局font-size基准，第二个变量是line-height基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的margin、
padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。
直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。
对于不需要强调的inline或block类型的文本，使用small标签。
This line of text is meant to be treated as fine print.
&small&This line of text is meant to be treated as fine print.&/small&
用增加font-weight值的方式加粗强调一段文本。
The following snippet of text is rendered as bold text.
&strong&rendered as bold text&/strong&
用斜体字强调一段文本。
The following snippet of text is rendered as italicized text.
&em&rendered as italicized text&/em&
在HTML5中可任意使用&b& 和 &i&。&b&是为了高亮词或短语而不会赋予重要含义，&i&主要被用来表示发言、技术术语等。
简单方便将文字对齐的类。
左对齐文字。
中间对其文字。
右侧对其文字。
&p class="text-left"&Left aligned text.&/p&
&p class="text-center"&Center aligned text.&/p&
&p class="text-right"&Right aligned text.&/p&
这些用去强调的工具类通过颜色来表示强调。
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
&p class="muted"&Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&/p&
&p class="text-warning"&Etiam porta sem malesuada magna mollis euismod.&/p&
&p class="text-error"&Donec ullamcorper nulla non metus auctor fringilla.&/p&
&p class="text-info"&Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&/p&
&p class="text-success"&Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&/p&
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML &abbr&元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
An abbreviation of the word attribute is attr.
&abbr title="attribute"&attr&/abbr&
&abbr class="initialism"&
为 &abbr& 标签添加 .initialism 类使其使用更小一些的字号。
HTML is the best thing since sliced bread.
&abbr title="HyperText Markup Language" class="initialism"&HTML&/abbr&
让联系信息以最接近日常使用的格式呈现。
在每行结尾添加&br&可以保留需要的样式。
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
&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&
&strong&Full Name&/strong&&br&
&a href="mailto:#"&first.&/a&
&/address&
在你的文档中引用其他来源的内容。
将任何HTML包裹在&blockquote&之中即可表现为引用。对于直接引用，我们建议用&p&标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
&blockquote&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&/p&
&/blockquote&
在标准的引用里，可以很简单的改变风格和内容。
添加&small&标签来注明引用来源。来源名称可以放在&cite& 标签里面。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
&blockquote&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&/p&
&small&Someone famous &cite title="Source Title"&Source Title&/cite&&/small&
&/blockquote&
另一种展示风格
使用.pull-right类，可以让引用展现出向右侧移动、对齐的效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
&blockquote class="pull-right"&
&/blockquote&
无序列表是 不关心 先后顺序的一组元素的集合。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&li&...&/li&
有序列表是 强调 顺序的一组元素的集合。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&li&...&/li&
无样式列表
移除了默认的list-style，并左侧填充列表(只对直接子节点项有效)。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&ul class="unstyled"&
&li&...&/li&
使用inline-block让列表项水平排列一行，同时每项都有少量的内补（padding）。
Lorem ipsum
Phasellus iaculis
Nulla volutpat
&ul class="inline"&
&li&...&/li&
对一个列表（条目）进行关联描述。
Description lists
A description list is perfect for defining terms.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
&dt&...&/dt&
&dd&...&/dd&
使&dl&中的每个条目和其描述一对一水平显示。
Description lists
A description list is perfect for defining terms.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
&dl class="dl-horizontal"&
&dt&...&/dt&
&dd&...&/dd&
通过加入text-overflow，水平描述列表将会对过长而无法在左栏中完全显示的列名截断掉一部分。而在较窄的视口（宽度）中，会改变成垂直(形式)表述，来适应当前屏幕。
通过&code&标签内嵌一小段代码。
For example, &section& should be wrapped as inline.
For example, &code&&section&&/code& should be wrapped as inline.
基本代码块
使用&pre&展示多行代码。为了能够正确展示，务必将代码中的任何尖括号做转义。
&p&Sample text here...&/p&
&p&Sample text here...&/p&
因为在&pre&标签里, tab会被算进去, 所以要保持代码尽可能的靠左侧
你也可以添加.pre-scrollable类，把该区域设置成最大高度为350px并带有一个Y轴滚动条。
为 &table& 标签增加基本样式--很少的内补(padding)并只增加水平分隔线--只要为其增加 .table 类即可。
First Name
&table class="table"&
下面所列出的类是为了补充
.table 类的基本样式的。
.table-striped
在&tbody&内，通过:nth-child CSS选择器 (IE7-8不支持)为表格中的行添加斑马纹样式。
First Name
&table class="table table-striped"&
.table-bordered
为表格增加边框(border)和圆角(rounded corner)。
First Name
@TwBootstrap
Larry the Bird
&table class="table table-bordered"&
.table-hover
为 &tbody& 中的每一行赋予鼠标悬停样式。
First Name
Larry the Bird
&table class="table table-hover"&
.table-condensed
每个单元格的内补(padding)减半可使表格更紧凑。
First Name
Larry the Bird
&table class="table table-condensed"&
可选的行属性
选择情景(contextual)类为表格添加颜色。
Description
表示成功或积极的行为。
表示一个危险或存有潜在危险的行为。
表示警告，可能需要注意。
作为一个默认样式的一个替代样式。
Payment Taken
TB - Monthly
01/04/2012
TB - Monthly
02/04/2012
TB - Monthly
03/04/2012
&tr class="success"&
&td&1&/td&
&td&TB - Monthly&/td&
&td&01/04/2012&/td&
&td&Approved&/td&
受支持的表格标签
受支持的表格标签列表以及使用方法。
包裹以表格形式展示数据的元素
包含表头(&tr&) 的容器
包含表格内容(&tr&)的容器
单元格 (&td& 或 &th&) 容器
默认的单元格
每列(或行，依赖于放置的位置)所对应的的label
用于对表的描述或总结，对屏幕阅读器特别有用
&caption&...&/caption&
&th&...&/th&
&th&...&/th&
&td&...&/td&
&td&...&/td&
无需对&form&添加任何类或改变标签结构，每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。
Label name
Example block-level help text here.
Check me out
&fieldset&
&legend&Legend&/legend&
&label&Label name&/label&
&input type="text" placeholder="Type something…"&
&span class="help-block"&Example block-level help text here.&/span&
&label class="checkbox"&
&input type="checkbox"& Check me out
&button type="submit" class="btn"&Submit&/button&
&/fieldset&
Bootstrap包含3个可选的常用表单布局。
为表单增加.form-search类，并为&input&增加.search-query类，可将输入框变成圆角状。
&form class="form-search"&
&input type="text" class="input-medium search-query"&
&button type="submit" class="btn"&Search&/button&
为表单增加.form-inline类， 结果是一个压缩型排列的表单，其中label左侧对齐、控件为inline-block类型。
Remember me
&form class="form-inline"&
&input type="text" class="input-small" placeholder="Email"&
&input type="password" class="input-small" placeholder="Password"&
&label class="checkbox"&
&input type="checkbox"& Remember me
&button type="submit" class="btn"&Sign in&/button&
右侧对齐并且左侧浮动的label和控件排列在同一行。这需要对默认的表单格式做修改：R
为表单添加.form-horizontal类
将label和控件包裹在.control-group中
为label添加.control-label类
将任何相关的控件包裹在.controls中，以确保最佳的对齐
Remember me
&form class="form-horizontal"&
&div class="control-group"&
&label class="control-label" for="inputEmail"&Email&/label&
&div class="controls"&
&input type="text" id="inputEmail" placeholder="Email"&
&div class="control-group"&
&label class="control-label" for="inputPassword"&Password&/label&
&div class="controls"&
&input type="password" id="inputPassword" placeholder="Password"&
&div class="control-group"&
&div class="controls"&
&label class="checkbox"&
&input type="checkbox"& Remember me
&button type="submit" class="btn"&Sign in&/button&
支持的表单控件
在此表单布局案例中包含了所被支持的标准表单控件。
输入框（Input）
大部分常用的表单控件、文本输入控件。包括所有HTML5所支持的：text、password、datetime、 datetime-local、date、 month、time、week、number、email、url、search、tel 和 color。
任何时候都需要指定type属性。
&input type="text" placeholder="Text input"&
文本域（Textarea）
此表单控件支持多行文本。可根据需要修改rows属性。
&textarea rows="3"&&/textarea&
复选框和单选框
复选框是用于在一个列表中选择一个或多个选项，而单选框是在众多选择中选择一个选项。
默认（堆叠式）
Option one is this and that&be sure to include why it's great
Option one is this and that&be sure to include why it's great
Option two can be something else and selecting it will deselect option one
&label class="checkbox"&
&input type="checkbox" value=""&
Option one is this and that&be sure to include why it's great
&label class="radio"&
&input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&
Option one is this and that&be sure to include why it's great
&label class="radio"&
&input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&
Option two can be something else and selecting it will deselect option one
行内复选框
为复选框或单选框控件添加.inline类，使他们排列在同一行。
&label class="checkbox inline"&
&input type="checkbox" id="inlineCheckbox1" value="option1"& 1
&label class="checkbox inline"&
&input type="checkbox" id="inlineCheckbox2" value="option2"& 2
&label class="checkbox inline"&
&input type="checkbox" id="inlineCheckbox3" value="option3"& 3
可使用默认的选项或者指定multiple="multiple"属性一次显示多个选项。
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
&select multiple="multiple"&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
扩展表单控件
除了现有的浏览器控件，Bootstrap还额外包含了一些有用的表单组件。
前缀和附加输入框
在任何文本输入框之前或之后添加文本或按钮。注意，select控件不支持。
将.add-on和input进行组合，可以将文本放倒输入框前或后面。
&div class="input-prepend"&
&span class="add-on"&@&/span&
&input class="span2" id="prependedInput" type="text" placeholder="Username"&
&div class="input-append"&
&input class="span2" id="appendedInput" type="text"&
&span class="add-on"&.00&/span&
同时使用两个类，并将两个.add-on放在输入框的前与后。
&div class="input-prepend input-append"&
&span class="add-on"&$&/span&
&input class="span2" id="appendedPrependedInput" type="text"&
&span class="add-on"&.00&/span&
按钮的情况
用.btn代替&span&即可将一个（或两个）按钮添加到输入框前或后。
&div class="input-append"&
&input class="span2" id="appendedInputButton" type="text"&
&button class="btn" type="button"&Go!&/button&
&div class="input-append"&
&input class="span2" id="appendedInputButtons" type="text"&
&button class="btn" type="button"&Search&/button&
&button class="btn" type="button"&Options&/button&
按钮下拉菜单
&div class="input-append"&
&input class="span2" id="appendedDropdownButton" type="text"&
&div class="btn-group"&
&button class="btn dropdown-toggle" data-toggle="dropdown"&
&span class="caret"&&/span&
&ul class="dropdown-menu"&
&div class="input-prepend"&
&div class="btn-group"&
&button class="btn dropdown-toggle" data-toggle="dropdown"&
&span class="caret"&&/span&
&ul class="dropdown-menu"&
&input class="span2" id="prependedDropdownButton" type="text"&
&div class="input-prepend input-append"&
&div class="btn-group"&
&button class="btn dropdown-toggle" data-toggle="dropdown"&
&span class="caret"&&/span&
&ul class="dropdown-menu"&
&input class="span2" id="appendedPrependedDropdownButton" type="text"&
&div class="btn-group"&
&button class="btn dropdown-toggle" data-toggle="dropdown"&
&span class="caret"&&/span&
&ul class="dropdown-menu"&
分段式下拉菜组
&div class="input-prepend"&
&div class="btn-group"&...&/div&
&input type="text"&
&div class="input-append"&
&input type="text"&
&div class="btn-group"&...&/div&
&form class="form-search"&
&div class="input-append"&
&input type="text" class="span2 search-query"&
&button type="submit" class="btn"&Search&/button&
&div class="input-prepend"&
&button type="submit" class="btn"&Search&/button&
&input type="text" class="span2 search-query"&
使用相对大小属性类，例如.input-large或者使用.span*类将输入框调整到网格列的大小。
块级输入框
让任何&input&或&textarea&元素表现为一个块级元素。
&input class="input-block-level" type="text" placeholder=".input-block-level"&
&input class="input-mini" type="text" placeholder=".input-mini"&
&input class="input-small" type="text" placeholder=".input-small"&
&input class="input-medium" type="text" placeholder=".input-medium"&
&input class="input-large" type="text" placeholder=".input-large"&
&input class="input-xlarge" type="text" placeholder=".input-xlarge"&
&input class="input-xxlarge" type="text" placeholder=".input-xxlarge"&
在未来的版本中，我们将会修改这些类的使用方式，让他们与按钮大小的表示方式一致。例如，.input-large将会使输入框的padding和font-size增大。
对输入框使用.span1 到 .span12 可以将输入框的大小对齐到网格大小。
&input class="span1" type="text" placeholder=".span1"&
&input class="span2" type="text" placeholder=".span2"&
&input class="span3" type="text" placeholder=".span3"&
&select class="span1"&
&select class="span2"&
&select class="span3"&
对于每行有多个输入框的情况，For multiple grid inputs per line, 使用 .controls-row 类为输入框增加合适的间距。通过浮动让输入框之间缩减一些空白，设置适当的边距，并清除浮动。
&div class="controls"&
&input class="span5" type="text" placeholder=".span5"&
&div class="controls controls-row"&
&input class="span4" type="text" placeholder=".span4"&
&input class="span1" type="text" placeholder=".span1"&
不可编辑的输入框
对于在表单中呈现不可编辑的数据，无需使用实际的表单控件。
Some value here
&span class="input-xlarge uneditable-input"&Some value here&/span&
将一组行为(按钮)放在表单尾部。当他们放置在.form-actions中时，这些按钮将会自动缩进，和其它表单控件对齐。
Save changes
&div class="form-actions"&
&button type="submit" class="btn btn-primary"&Save changes&/button&
&button type="button" class="btn"&Cancel&/button&
表单控件周围可以放置行内或块级元素展示帮助文本。
Inline help text
&input type="text"&&span class="help-inline"&Inline help text&/span&
如果帮助文本过长，可采用块级显示。
&input type="text"&&span class="help-block"&A longer block of help text that breaks onto a new line and may extend beyond one line.&/span&
表单控件状态
改变表单控件和label的反馈状态给用户或者访客提供反馈。
我们为一些表单控件移除了默认的outline样式，并且对他们的:focus状态设置了box-shadow样式。
&input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&
为输入框设置:invalid样式从而激发浏览器默认功能。如果输入框是必填的，可以指定一个type和required属性，（如果合适的话）甚至还可以指定pattern属性。
由于Internet Explorer 7-9不支持CSS伪类选择器，因此不能在这些浏览器中使用。
&input class="span3" type="email" required&
被禁用的输入框
给输入框添加disabled属性可阻止用户输入，并且输入框会呈现稍微不同的外观。
&input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&
Bootstrap包含了（错误）error、（警告）warning、（通知）info和（成功）success信息的样式。为.control-group添加适当的属性即可使用这些样式。
Input with warning
Something may have gone wrong
Input with error
Please correct the error
Input with success
&div class="control-group warning"&
&label class="control-label" for="inputWarning"&Input with warning&/label&
&div class="controls"&
&input type="text" id="inputWarning"&
&span class="help-inline"&Something may have gone wrong&/span&
&div class="control-group error"&
&label class="control-label" for="inputError"&Input with error&/label&
&div class="controls"&
&input type="text" id="inputError"&
&span class="help-inline"&Please correct the error&/span&
&div class="control-group info"&
&label class="control-label" for="inputInfo"&Input with info&/label&
&div class="controls"&
&input type="text" id="inputInfo"&
&span class="help-inline"&Username is already taken&/span&
&div class="control-group success"&
&label class="control-label" for="inputSuccess"&Input with success&/label&
&div class="controls"&
&input type="text" id="inputSuccess"&
&span class="help-inline"&Woohoo!&/span&
任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现&a& 和 &button& 页面元素。
带渐变的标准灰色按钮
btn btn-primary
提供额外的视觉感, 可在一系列的按钮中指出主要操作
btn btn-info
默认样式的替代样式
btn btn-success
表示成功或积极的动作
btn btn-warning
提醒应该谨慎采取这个动作
btn btn-danger
表示这个动作危险或存在危险
btn btn-inverse
备用的暗灰色按钮，不依赖于语义和用途
btn btn-link
简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为
浏览器兼容性
IE9 不支持圆角的背景渐变，所以我们干脆移除了。 IE9 jankifies 禁用了button元素， 显示文本为灰色并带有很垃圾的阴影，这个我们实在无法修复。
想使用更大或更小的按钮吗？添加.btn-large、.btn-small 或 .btn-mini即可改变按钮大小。
Large button
Large button
Default button
Default button
Small button
Small button
Mini button
Mini button
&button class="btn btn-large btn-primary" type="button"&Large button&/button&
&button class="btn btn-large" type="button"&Large button&/button&
&button class="btn btn-primary" type="button"&Default button&/button&
&button class="btn" type="button"&Default button&/button&
&button class="btn btn-small btn-primary" type="button"&Small button&/button&
&button class="btn btn-small" type="button"&Small button&/button&
&button class="btn btn-mini btn-primary" type="button"&Mini button&/button&
&button class="btn btn-mini" type="button"&Mini button&/button&
通过添加.btn-block类，可使按钮变为块级元素，同时会填充整个父级元素。
Block level button
Block level button
&button class="btn btn-large btn-block btn-primary" type="button"&Block level button&/button&
&button class="btn btn-large btn-block" type="button"&Block level button&/button&
颜色淡出50%，让按钮看起来无法点击。
给&a&元素添加.disabled类。
&a href="#" class="btn btn-large btn-primary disabled"&Primary link&/a&
&a href="#" class="btn btn-large disabled"&Link&/a&
我们将.disabled作为一个工具类，和常见的.active类一样，因此无需添加前缀。另外，这个类只是为了美观，你必须自己写JavaScript代码来禁止链接的行为。
给&button&添加disabled属性。
Primary button
&button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&Primary button&/button&
&button type="button" class="btn btn-large" disabled&Button&/button&
一个类支持多种标签
可以给&a&、&button&或&input&元素添加.btn类。
&a class="btn" href=""&Link&/a&
&button class="btn" type="submit"&Button&/button&
&input class="btn" type="button" value="Input"&
&input class="btn" type="submit" value="Submit"&
最佳实践是，根据使用环境，尝试找到一个合适的元素，以确保渲染的效果在各个浏览器保存基本一致。如果你正使用着一个input，那么你的按钮可使用 &input type="submit"&。
为&img&元素添加相应的类就可以很容易的给图片设置样式。
&img src="..." class="img-rounded"&
&img src="..." class="img-circle"&
&img src="..." class="img-polaroid"&
由于IE7-8不支持border-radius，因此.img-rounded 和 .img-circle无法正常使用。
Icon glyphs
下面展示的140个图标均提供了深灰色（默认）和白色两种颜色。由提供。
icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star-empty
icon-th-large
icon-th-list
icon-remove
icon-zoom-in
icon-zoom-out
icon-signal
icon-trash
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-bookmark
icon-print
icon-camera
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-share
icon-check
icon-step-backward
icon-fast-backward
icon-backward
icon-pause
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-minus
icon-asterisk
icon-exclamation-sign
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bullhorn
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
Glyphicons attribution
Halflings 一般是收费的，但是经过Bootstrap和Glyphicons作者之间的协商，允许开发人员不需要支付费用即可使用。作为对作者的感谢，希望你在使用的时候加个的链接。
每个图标都需要依附于一个&i&标签，并且赋予一个唯一的类（class）。使用时，将类似下面的代码放到任何需要的地方即可：
&i class="icon-search"&&/i&
也可以使用反色（白色）样式的图标，只需增加一个额外的类。我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果。
&i class="icon-search icon-white"&&/i&
当在文本旁边使用这些图标时，例如按钮或导航链接，务必在&i&标签后面 添加一个空格，这样能确保留有合适的间距。
这些图标可以使用在按钮、工具栏的按钮组、导航或表单的前缀输入框。
工具栏的按钮组
&div class="btn-toolbar"&
&div class="btn-group"&
&a class="btn" href="#"&&i class="icon-align-left"&&/i&&/a&
&a class="btn" href="#"&&i class="icon-align-center"&&/i&&/a&
&a class="btn" href="#"&&i class="icon-align-right"&&/i&&/a&
&a class="btn" href="#"&&i class="icon-align-justify"&&/i&&/a&
按钮组中下拉菜单
&div class="btn-group"&
&a class="btn btn-primary" href="#"&&i class="icon-user icon-white"&&/i& User&/a&
&a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&&span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li&&a href="#"&&i class="icon-pencil"&&/i& Edit&/a&&/li&
&li&&a href="#"&&i class="icon-trash"&&/i& Delete&/a&&/li&
&li&&a href="#"&&i class="icon-ban-circle"&&/i& Ban&/a&&/li&
&li class="divider"&&/li&
&li&&a href="#"&&i class="i"&&/i& Make admin&/a&&/li&
&a class="btn btn-large" href="#"&&i class="icon-star"&&/i& Star&/a&
&a class="btn btn-small" href="#"&&i class="icon-star"&&/i& Star&/a&
&a class="btn btn-mini" href="#"&&i class="icon-star"&&/i& Star&/a&
&ul class="nav nav-list"&
&li class="active"&&a href="#"&&i class="icon-home icon-white"&&/i& 首页&/a&&/li&
&li&&a href="#"&&i class="icon-book"&&/i& Library&/a&&/li&
&li&&a href="#"&&i class="icon-pencil"&&/i& Applications&/a&&/li&
&li&&a href="#"&&i class="i"&&/i& Misc&/a&&/li&
Email address
&div class="control-group"&
&label class="control-label" for="inputIcon"&Email address&/label&
&div class="controls"&
&div class="input-prepend"&
&span class="add-on"&&i class="icon-envelope"&&/i&&/span&
&input class="span2" id="inputIcon" type="text"&