学习Bootstrap（四）——列表

六. 列表

来自慕课网
在HTML文档中，列表结构主要有三种：有序列表、无序列表和自定义列表。
Bootstrap根据平时的使用情形提供了六种形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去点列表

☑ 内联列表

☑ 描述列表

☑ 水平描述列表

---

6-1. 无序列表，有序列表及列表嵌套

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

6-2. 去点列表

摘自慕课网
Bootstrap通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。除了项目编号之外，还将列表默认的左边内距也清０了。

/*源码请查看bootstrap.css文件第580行~第583行*/
.list-unstyled {
padding-left: 0;
list-style: none;
}

例如任务代码：

<ol>
        <li>有序项目列表一</li>
        <li>有序项目列表二
            <ol class="list-unstyled">
                <li>有序二级项目列表一</li>
                <li>有序二级项目列表二
                    <ul>
                        <li>无序三级项目列表一</li>
                        <li>无序三级项目列表二
                            <ul class="list-unstyled">
                                <li>无序四级项目列表一</li>
                                <li>无序四级项目列表二</li>
                            </ul></li>
                        <li>无序三级项目列表三</li>
                    </ul></li>
                <li>有序二级项目列表三</li>
            </ol></li>
        <li>有序项目列表三</li>
    </ol>

6-3. 内联列表（水平导航）

来自慕课网
Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

/*源码查看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;
}

如：

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

6-4. 定义列表（dl dt dd）

来自慕课网
Bootstrap只是调整了行间距，外边距和字体加粗效果。

/*源码请查看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;
}

例如任务代码：

<dl>
    <dt>北京</dt>
    <dd>北京是中国首都，是政治文化集中地</dd>

    <dt>上海</dt>
    <dd>上海号称东方的巴黎</dd>
</dl>

水平定义列表

来自慕课网
水平定义列表就像内联列表一样，Bootstrap可以给dl添加类名“.dl-horizontal”给定义列表实现水平显示效果。

/*源码请查看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;
  }
}

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：

1. 将dt设置了一个左浮动，并且设置了一个宽度为160px
2. 将dd设置一个margin-left的值为180px，达到水平的效果
3. 当标题宽度超过160px时，将会显示三个省略号

如：

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
    <dt>慕课网</dt>
    <dd>一个专业的，真心实意在做培训的网站</dd>
    <dt>我来测试一个标题，我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>