在HTML文檔中录粱，列表結(jié)構(gòu)主要有三種腻格，有序列表、無序列表和定義列表啥繁。具體使用的標(biāo)簽說明如下:
無序列表<ul><li>...</li></ul>
有序列表<ol><li>...</li></ol>
定義列表<dl><dt>...</dt><dd>...</dd></dl>
Bootstrap根據(jù)平時(shí)的使用情形提供了六種形式的列表：
無序列表
無序列表和有序列表使用方式和我們平時(shí)使用的一樣(無序列表使用ul,有序列表使用ol標(biāo)簽)菜职，在樣式方面，Bootstrap只是在此基礎(chǔ)上做了一些細(xì)微的優(yōu)化输虱，源碼請(qǐng)查看bootstrap.css文件的第569行~第579行:
ul,ol{margin-top:0;margin-bottom:10px;}
ul ul,ol ul,ul ol,ol ol{margin-bottom:0;}
從源碼上我們可以得知些楣，Bootstrap對(duì)于列表，只是在margin上面做了一些調(diào)整。
去點(diǎn)列表
在Bootstrap中默認(rèn)情況下無序列表和有序列表是帶有項(xiàng)目符號(hào)的愁茁，但在實(shí)際工作中很多時(shí)候蚕钦，我們的列表是不需要這個(gè)編號(hào)的，比如說用無序列表做導(dǎo)航的時(shí)候鹅很。Bootstrap為眾多開發(fā)者考慮的非常周道嘶居，通過給無序列表添加一個(gè)類名".list-unstyled",這樣就可以去除默認(rèn)的列表樣式的風(fēng)格。
/*源碼請(qǐng)查看bootstrap.css文件第580行~第583行*/
.list-unstyled{padding-left:0;list-style:none;}
從示例中可以看出促煮，除了項(xiàng)目編號(hào)之外邮屁，還將列表默認(rèn)的左邊內(nèi)距也清0了。
內(nèi)聯(lián)列表
Bootstrap像去點(diǎn)列表一樣菠齿，通過添加類名".list-inline"來實(shí)現(xiàn)內(nèi)聯(lián)列表佑吝，簡單點(diǎn)說就是把垂直列表換成水平列表，而且去掉項(xiàng)目符號(hào)(編號(hào)),保持水平顯示绳匀。也可以說內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生芋忿。
/*源碼查看bootstrap.css文件第584行~第593行*/
.list-inline{padding-left:0;margin-left:-5px;list-style:none;}
.list-inline > li{display:inline-block;padding-right:5px;padding-left:5px;}
定義列表
對(duì)于定義列表而言，Bootstrap并沒有做太多的調(diào)整疾棵，只是調(diào)整了行間距戈钢，外邊距和字體加粗效果
/*源碼請(qǐng)查看bootstrap.css文件第594行~第607行*/
dl{margin-top:0;margin-bottom:20px;}
dt,dd{line-height:1.42857143;}
dt{font-weight:bold;}
dd{margin-left:0;}
水平定義列表
水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給<dl>添加類名".dl-horizontal"給定義列表實(shí)現(xiàn)水平顯示效果是尔。
/*源碼請(qǐng)查看bootstrap.css文件第608行~第621行*/
@media(min-width:768px){
.dl-horizontal? dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap;}
.dl-horizontal dd{margin-left:180px;}
}
此處添加了一個(gè)媒體查詢殉了。也就是說，只有屏幕大于768px的時(shí)候拟枚，添加類名".dl-horizontal"才具有水平定義列表效果薪铜。其實(shí)現(xiàn)主要方式：
①.將dt設(shè)置了一個(gè)左浮動(dòng)，并且設(shè)置了一個(gè)寬度為160px;②.將dd設(shè)置了一個(gè)margin-left的值為180px,達(dá)到水平的效果;③.將標(biāo)題寬度超過160px時(shí)梨州，將會(huì)顯示三個(gè)省略號(hào)痕囱。
代碼
在Bootstrap主要提供了三種代碼風(fēng)格:
1.使用<code></code>來顯示單行內(nèi)聯(lián)代碼
2.使用<pre></pre>來顯示多行塊代碼
3.使用<kbd></kbd>來顯示用戶輸入代碼
預(yù)編譯版本的Bootstrap將代碼的樣式單獨(dú)提取出來:
1.LESS版本，請(qǐng)查閱code.less文件
2.Sass版本暴匠，請(qǐng)查閱_code.scss文件
編譯出來的CSS代碼請(qǐng)查閱bootstrap.css文件第688行~第730行鞍恢，由于代碼太長，此處不一一例舉每窖。
在使用代碼時(shí)帮掉，用戶可以根據(jù)具體的需求來使用不同的類型：
1.<code>:一般是針對(duì)單個(gè)單詞或單個(gè)句子的代碼
2.<pre>：一般是針對(duì)多行代碼(也就是成塊的代碼)
3.<kbd>：一般是表示用戶通過鍵盤輸入的內(nèi)容
雖然不同的類型風(fēng)格不一樣，但其使用方法是類似的窒典。
code風(fēng)格：
<div><code>&It;... ...></code></div>
pre風(fēng)格:
<div><pre>&It;... ...></pre></div>
kbd風(fēng)格:
<div>請(qǐng)輸入<kbd>...</kbd></div>
不管使用哪種代碼風(fēng)格蟆炊，在代碼中碰到小于號(hào)(<)要使用硬編碼"&It;"替代，大于號(hào)(>)使用">"來替代瀑志。而且對(duì)于<pre>代碼塊風(fēng)格涩搓，標(biāo)簽前面留多少個(gè)空格污秆，在顯示效果中就會(huì)留多少個(gè)空格。建議間編寫HTML標(biāo)簽時(shí)昧甘，就控制好良拼。
正如前面所示，<pre>元素一般用于顯示大塊的代碼充边，并且保證原有格式不變庸推。但有時(shí)候代碼太多，而且不想讓其占有太大的頁面篇幅浇冰，就想控制代碼塊的大小贬媒。Bootstrap也考慮到這一點(diǎn)，你只需要在pre標(biāo)簽上添加類名".pre-scrollable"肘习，就可以控制代碼塊區(qū)域最大高度為340px际乘，一旦超出這個(gè)高，就會(huì)在Y軸出現(xiàn)滾動(dòng)條井厌。
/*源碼請(qǐng)查看bootstrap.css第731行~第734行*/
.pre-scrollable{max-height:340px;overflow-y:scroll;}
