列表--无序列表、有序列表，玩转Bootstrap（基础）教程-慕课网

列表--无序列表、有序列表

无序列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用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上做了一些调整。我们来看一个简单的示例(右侧代码编辑器10-16行)。

列表嵌套

在Bootstrap中列表也是可以嵌套的，如右侧编辑器中的代码就是有序列表（25-35行）。

我也来试试：完成下面任务

在右侧代码编辑器输入正确的代码，实现下图列表效果：

备注:这一小节没有正确性验证，请查看结果窗口与本任务所给的结果图片是否一致，从而判断输入代码是否正确。

?不会了怎么办

参考代码：

<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>

提交

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求