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

面板--面板中嵌套列表组

在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组，我们简单的来看一个示例：

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>

运行效果如下：

优化代码：

和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来：

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <ul class="list-group">
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
    </ul>
    <div class="panel-footer">作者：大漠</div>
</div>

运行效果如下：

同样的道理，Bootstrap将嵌套在面板中的列表组做了一定的样式优化。具体源码可以查看bootstrap.css文件第5031行～第5053行。

任务

index.htmlstyle.css 
  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. </head>
  8. <body>
  9.  
  10. <h3>面板中嵌套列表组（一）</h3>
  11. <div class="panel panel-default">
  12.     <div class="panel-heading">图解CSS3</div>
  13. 	<div class="panel-body">
  14. 		<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  15. 		</p>
  16. 		<ul class="list-group">
  17. 			<li class="list-group-item">我是列表项</li>
  18. 			<li class="list-group-item">我是列表项</li>
  19. 			<li class="list-group-item">我是列表项</li>
  20. 		</ul>
  21. 	</div>
  22. 	<div class="panel-footer">作者：大漠</div>
  23. </div>
  24.  
  25. <h3>面板中嵌套列表组（二）</h3>
  26. <div class="panel panel-default">
  27. 	<div class="panel-heading">图解CSS3</div>
  28. 	<div class="panel-body">
  29. 		<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  30. 		</p>
  31. 	</div>
  32. 	<ul class="list-group">
  33. 		<li class="list-group-item">我是列表项</li>
  34. 		<li class="list-group-item">我是列表项</li>
  35. 		<li class="list-group-item">我是列表项</li>
  36. 	</ul>
  37. 	<div class="panel-footer">作者：大漠</div>
  38. </div>
  39.   <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  40.   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  41. </body>
  42. </html>
  1. body{
  2.   padding: 30px;
  3. }
下一节