7-18 列表组
本节编程练习不计算学习进度，请电脑登录imooc.com操作

列表组

列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件，所以也对应有自己独立源码：

  ☑  LESS版本：对应的源码文件 list-group.less

  ☑   Sass版本：对应的源码文件是 _list-group.scss

  ☑   编译出的Bootstrap版本：对应的源码bootstrap.css文件第4820行～第4994行

下面几个小节会对这几种列表组详细讲解，大家不要心急噢！

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>列表组</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>
  8.     body{padding:50px;}
  9. </style>
  10. </head>
  11. <body>
  12. <h3>基础列表组</h3>
  13. <ul class="list-group">
  14.     <li class="list-group-item">揭开CSS3的面纱</li>
  15.     <li class="list-group-item">CSS3选择器</li>
  16. 	<li class="list-group-item">CSS3边框</li>
  17. 	<li class="list-group-item">CSS3背景</li>
  18. 	<li class="list-group-item">CSS3文本</li>
  19. </ul>
  20. <h3>带徽章的列表组</h3>
  21. <ul class="list-group">
  22.     <li class="list-group-item">
  23.     	<span class="badge">13</span>揭开CSS3的面
  24. 	</li>
  25. 	<li class="list-group-item">
  26. 		<span class="badge">456</span>CSS3选择器
  27. 	</li>
  28. 	<li class="list-group-item">
  29. 		<span class="badge">892</span>CSS3边框
  30. 	</li>
  31. 	<li class="list-group-item">
  32. 		<span class="badge">90</span>CSS3背景
  33. 	</li>
  34. 	<li class="list-group-item">
  35. 		<span class="badge">1290</span>CSS3文本
  36. 	</li>
  37. </ul>
  38. <h3>带链接的列表组</h3>
  39. <ul class="list-group">
  40.     <li class="list-group-item">
  41.     	<a href="##">揭开CSS3的面</a>
  42. 	</li>
  43. 	<li class="list-group-item">
  44. 		<a href="##">CSS3选择器</a>
  45. 	</li>
  46. 	<li class="list-group-item">
  47. 		<a href="##">CSS3边框</a>
  48. 	</li>
  49. 	<li class="list-group-item">
  50. 		<a href="##">CSS3背景</a>
  51. 	</li>
  52. 	<li class="list-group-item">
  53. 		<a href="##">CSS3文本</a>
  54. 	</li>
  55. </ul>
  56. <h3>自定义列表组</h3>
  57. <div class="list-group">
  58.     <a href="##" class="list-group-item">
  59.     	<h4 class="list-group-item-heading">图解CSS3</h4>
  60. 		<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
  61. 	</a>
  62. 	<a href="##" class="list-group-item">
  63. 		<h4 class="list-group-item-heading">Sass中国</h4>
  64. 		<p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
  65. 	</a>
  66. </div>
  67. <h3>组合列表项的状态</h3>
  68. <div class="list-group">
  69.     <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
  70.     <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
  71. 	<a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
  72. 	<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
  73. </div>
  74. <h3>多彩列表组</h3>
  75. <div class="list-group">
  76.     <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
  77.     <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
  78. 	<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
  79. 	<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
  80. 	<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
  81. </div>
  82.   <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  83.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  84. </body>
  85. </html>
下一节