用一張思維導圖簡單介紹一下Bootstrap列表吧
Bootstrap六種列表樣式.png
1. 無序列表###
<h3>無序列表</h3>
<ul>
<li>語文</li>
<li>數(shù)學</li>
<li>英語</li>
</ul>
無序.png
2. 有序列表###
<h3>有序列表</h3>
<ol>
<li>語文</li>
<li>數(shù)學</li>
<li>英語</li>
</ol>
有序.png
會發(fā)現(xiàn)有序和無序列表的使用方式和我們平時使用的一樣（無序列表使用ul峻仇，有序列表使用ol標簽）席镀，在樣式方面，Bootstrap只是在此基礎上做了一些細微的優(yōu)化澈歉，源碼請查看bootstrap.css文件的第569行~第579行：ul,ol { margin-top: 0; margin-bottom: 10px;}ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}從源碼上我們可以得知，Bootstrap對于列表，只是在margin上做了一些調(diào)整。
3. 去點列表###
<h3>去點列表</h3>
<ol class="list-unstyled">
<li>語文</li>
<li>數(shù)學</li>
<li>英語</li>
</ol>
去點.png
添加 .list-unstyled 屬性 蜕琴，有序列表則去掉了序號變成去點列表
4.內(nèi)聯(lián)列表###
<h3>內(nèi)聯(lián)列表</h3>
<ul class="list-inline">
<li><a>語文</a></li>
<li><a>數(shù)學</a></li>
<li><a>英語</a></li>
</ul>
內(nèi)聯(lián).png
添加 .list-inline屬性 變?yōu)閮?nèi)聯(lián)列表，簡單點說就是把垂直方向的列表變?yōu)樗椒较蛳Α?nèi)聯(lián)列表一般用作菜單（導航）樣式
5.dl列表###
<h3>dl列表</h3>
<dl>
<dt>娃哈哈</dt>
<dd>娃哈哈是個老品牌凌简，深受大家的喜愛</dd>
<dt>爽歪歪</dt>
<dd>爽歪歪是個老品牌，深受大家的喜愛</dd>
</dl>
dl.png
<dl>標記定義了一個定義列表恃逻，定義列表中的條目是通過使用<dt>標記(“definition title”: 定義標題)和<dd>標(“definition description”: 定義描述)創(chuàng)建的雏搂。<dt>給出了術語名，<dd>標記給出了術語的定義寇损。
6.水平列表###
<h3>水平列表</h3>
<dl class="dl-horizontal">
<dt>娃哈哈</dt>
<dd>娃哈哈是個老品牌凸郑，深受大家的喜愛</dd>
<dt>爽歪歪</dt>
<dd>爽歪歪是個老品牌，深受大家的喜愛</dd>
<dt>營養(yǎng)快線</dt>
<dd>營養(yǎng)快線是個老品牌矛市，深受大家的喜愛</dd>
</dl>
水平.png
添加.dl-horizontal屬性變成水平列表芙沥。觀察上面的水平列表，是由標題+內(nèi)容組成浊吏，即前面
<dt>給定標題而昨，后面<dd>給一段描述。
好了找田，以上就是Bootstrap列表的六種樣式歌憨。
每天都努力一點
謝謝你看完
