Bootstrap-列表

1、无序列表和有序列表使用方法与原来相同（也可以嵌套），只不过bootstrap对它样式的margin值进行了调整；

源码：

ul,ol { margin-top: 0;margin-bottom: 10px;}
ul ul,ol ul,ul ol,ol ol {margin-bottom: 0;}

2、去点列表，通过给有序列表和无序列表添加类名list-unstyled去除默认样式

源码：

.list-unstyled {padding-left: 0;list-style: none;}

（左内边距也清零了）

3、内联列表，通过添加类名list-inline来实现，（垂直列表换成水平列表，并且去除项目符号，保持水平显示，专门制作水平导航等）

源码：

.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}
.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}

用法：

<ul class="list-inline">
    <li>北京</li>
    <li>上海</li>
    <li>南京</li>
    <li>厦门</li>
</ul>

4、定义列表，调整了行间距、外边距、字体加粗效果

源码：

dl {margin-top: 0;margin-bottom: 20px;}
dt,dd {line-height: 1.42857143;}
dt {font-weight: bold;}
dd {margin-left: 0;}

用法：（与原来相同）

<dl>
    <dt>北京</dt>
    <dd>北京市中国的首都，是政治文化集中地</dd>
    <dt>上海</dt>
    <dd>上海号称东方的巴黎</dd>    
</dl>

5、水平定义列表，实现定义列表水平排列效果，通过添加类名dl-horizantal实现

源码：

@media (min-width: 768px) //添加媒体查询，表明只有在屏幕大于768px时，添加类名dl-horizantal才有水平定义列表效果
{
.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; }
}

          说明：给dt设置做浮动，并且设置宽度为160px；

                     给dd设置margin-left的值为180px；

                     当标题宽度为160px时，会显示三个省略号。

用法：

<dl class="dl-horizontal">
    <dt>标题一：</dt>
    <dd>描述内容</dd>
    <dt>标题二是什么呢是什么呢我也不知道哇为什么写这么长呢因为想让他的宽度大于160像素嘛现在有木有160像素啦</dt>
    <dd>描述内容</dd>
</dl>

          说明：在小窗口浏览时，会回复到原始的状态。