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

面板--基础面板

基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容:

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
</div>

运行效果如下:

原理分析:

“panel“主要对边框,间距和圆角做了一定的设置:

/*bootstrap.css文件第4995行~第5005行*/
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}

任务

我来试试:制作一个基础面板


 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta 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.  
  11.  
  12.  
  13.  
  14. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  15. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  16. </body>
  17. </html>
  1. body{
  2. padding: 30px;
  3. }
下一节