基础面板非常简单,就是一个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; }
我来试试:制作一个基础面板
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>面板--基础面板</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <!--下面是代码任务部分--> <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
body{ padding: 30px; }