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

面板--彩色面板

在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

  ☑  panel-primary：重点蓝

  ☑  panel-success：成功绿

  ☑ panel-info:信息蓝

  ☑ panel-warning：警告黄

  ☑ panel-danger：危险红

使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名：

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>

运行效果如下：

从效果中不难发现，这几个样式只是改变了面板的背景色、文本和边框颜色：具体源码可以查看bootstrap.css文件第5195行～第5302行。

任务

我来试试：在右侧修改代码，以实现下面效果图效果

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. <div class="panel panel-default">
  10.     <div class="panel-heading">图解CSS3</div>
  11. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  12. 	<div class="panel-footer">作者：大漠</div>
  13. </div>
  14. <div class="panel panel-default">
  15. 	<div class="panel-heading">图解CSS3</div>
  16. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  17. 	<div class="panel-footer">作者：大漠</div>
  18. </div>
  19. <div class="panel panel-default">
  20. 	<div class="panel-heading">图解CSS3</div>
  21. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  22. 	<div class="panel-footer">作者：大漠</div>
  23. </div>
  24. <div class="panel panel-default">
  25. 	<div class="panel-heading">图解CSS3</div>
  26. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  27. 	<div class="panel-footer">作者：大漠</div>
  28. </div>
  29. <div class="panel panel-default">
  30. 	<div class="panel-heading">图解CSS3</div>
  31. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  32. 	<div class="panel-footer">作者：大漠</div>
  33. </div>
  34. <div class="panel panel-default">
  35. 	<div class="panel-heading">图解CSS3</div>
  36. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  37. 	<div class="panel-footer">作者：大漠</div>
  38. </div>
  39. <script src="http://libs.baidu.com/jquery/1.9.0/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: 50px 10px;
  3. }
  4. .panel {
  5.     float: left;
  6.     width: 200px;
  7.     margin: 5px;
  8.   }
下一节