Bootstrap列表

用一张思维导图简单介绍一下Bootstrap列表吧

Bootstrap六种列表样式.png

---

1. 无序列表###

<h3>无序列表</h3>
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ul>

无序.png

2. 有序列表###

<h3>有序列表</h3>
<ol>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>

有序.png

会发现有序和无序列表的使用方式和我们平时使用的一样（无序列表使用ul，有序列表使用ol标签），在样式方面，Bootstrap只是在此基础上做了一些细微的优化，源码请查看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上做了一些调整。

3. 去点列表###

<h3>去点列表</h3>
<ol class="list-unstyled">
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>

去点.png

添加 .list-unstyled 属性 ，有序列表则去掉了序号变成去点列表

4.内联列表###

<h3>内联列表</h3>
<ul class="list-inline">
    <li><a>语文</a></li>
    <li><a>数学</a></li>
    <li><a>英语</a></li>
</ul>

内联.png

添加 .list-inline属性 变为内联列表，简单点说就是把垂直方向的列表变为水平方向。内联列表一般用作菜单（导航）样式

5.dl列表###

<h3>dl列表</h3>
<dl>
    <dt>娃哈哈</dt>
    <dd>娃哈哈是个老品牌，深受大家的喜爱</dd>
    <dt>爽歪歪</dt>
    <dd>爽歪歪是个老品牌，深受大家的喜爱</dd>
</dl>

dl.png

<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”: 定义标题)和<dd>标(“definition description”: 定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。

6.水平列表###

<h3>水平列表</h3>
<dl class="dl-horizontal">
    <dt>娃哈哈</dt>
    <dd>娃哈哈是个老品牌，深受大家的喜爱</dd>
    <dt>爽歪歪</dt>
    <dd>爽歪歪是个老品牌，深受大家的喜爱</dd>
    <dt>营养快线</dt>
    <dd>营养快线是个老品牌，深受大家的喜爱</dd>
</dl>

水平.png

添加.dl-horizontal属性变成水平列表。观察上面的水平列表，是由标题+内容组成，即前面<dt>给定标题，后面<dd>给一段描述。

好了，以上就是Bootstrap列表的六种样式。

每天都努力一点
谢谢你看完

---