2-10 列表--无序列表、有序列表
本节编程练习不计算学习进度，请电脑登录imooc.com操作

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

无序列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用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行）。

任务

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

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

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

index.htmlstyle.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>普通列表、有序列表</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <h5>普通列表</h5>
  11. <ul>
  12.     <li>列表项目</li>
  13.     <li>列表项目</li>
  14.     <li>列表项目</li>
  15.     <li>列表项目</li>
  16.     <li>列表项目</li>
  17. </ul>
  18. <h5>有序列表</h5>
  19. <ol>
  20.       <li>项目列表一</li>
  21.       <li>项目列表二</li>
  22.       <li>项目列表三</li>
  23. </ol>
  24. <h5>有序列表嵌套</h5>
  25. <ol>
  26.     <li>有序列表</li>
  27.     <li>
  28.     有序列表
  29.         <ol>
  30.         <li>有序列表(2)</li>
  31.         <li>有序列表(2)</li>
  32.         </ol>
  33.     </li>
  34.     <li>有序列表</li>
  35. </ol>
  36. <!--下面是代码任务部分-->
  37.  
  38.  
  39.  
  40.  
  41.  
  42. </body>
  43. </html>
  1. body{margin:30px;padding:30px;}
下一节