7-25 面板
本节编程练习不计算学习进度，请电脑登录imooc.com操作

面板

面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码：

  ☑  Less版本：对应的源码文件是 panels.less

  ☑  Sass版本：对应的源码文件是 _panels.scss

  ☑  编译后的Bootstrap：对应bootstrap.css文件第4995行～第5302行

任务

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. </head>
  8. <body>
  9. <h3>基础面板</h3>
  10. <div class="panel panel-default">
  11.     <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
  12. </div>
  13. <h3>带有头和尾的面板</h3>
  14. <div class="panel panel-default">
  15.     <div class="panel-heading">图解CSS3</div>
  16.     <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  17. 	</div>
  18. 	<div class="panel-footer">作者：大漠</div>
  19. </div>
  20. <h3>彩色面板</h3>
  21. <div class="panel panel-default">
  22.     <div class="panel-heading">图解CSS3</div>
  23.     <div class="panel-body">			详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  24. 	</div>
  25. 	<div class="panel-footer">作者：大漠</div>
  26. </div>
  27. <div class="panel panel-primary">
  28. 	<div class="panel-heading">图解CSS3</div>
  29. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  30. 	<div class="panel-footer">作者：大漠</div>
  31. </div>
  32. <div class="panel panel-success">
  33. 	<div class="panel-heading">图解CSS3</div>
  34. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  35. 	<div class="panel-footer">作者：大漠</div>
  36. </div>
  37. <div class="panel panel-info">
  38. 	<div class="panel-heading">图解CSS3</div>
  39. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  40. 	<div class="panel-footer">作者：大漠</div>
  41. </div>
  42. <div class="panel panel-warning">
  43. 	<div class="panel-heading">图解CSS3</div>
  44. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  45. 	<div class="panel-footer">作者：大漠</div>
  46. </div>
  47. <div class="panel panel-danger">
  48. 	<div class="panel-heading">图解CSS3</div>
  49. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  50. 	<div class="panel-footer">作者：大漠</div>
  51. </div>
  52. <h3>面板中嵌套表格</h3>
  53. <div class="panel panel-default">
  54.     <div class="panel-heading">图解CSS3</div>
  55.     <div class="panel-body">
  56. 		<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  57. 		</p>
  58. 		<table class="table table-bordered">
  59. 			<thead>
  60. 				<tr>
  61. 					<th>＃</th>
  62. 					<th>我的书</th>
  63. 					<th>发布时间</th>
  64. 				</tr>
  65. 			</thead>
  66. 			<tbody>
  67. 				<tr>
  68. 					<td>1</td>
  69. 					<td>《图解CSS3》</td>
  70. 					<td>2014-07-10</td>
  71. 				</tr>
  72. 			</tbody>
  73. 		</table>
  74. 	</div>
  75. 	<div class="panel-footer">作者：大漠</div>
  76. </div>
  77.   <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  78.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  79. </body>
  80. </html>
下一节