The panel assembly is used to insert DOM component into a box. 1> We can user the following two ways to add the panel header: Frist ,using .panel-heading class can easily add a heading container to your panel. Second ,使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题 2> panel-primary,panel-success,panel-info,panel-warning,panel-danger,panel-default 每个panel带着着不同的颜色 3> 带表格的面板: <table class="table"> 4> 带列表组的面板 <ul class="list-group"> <li class="list-group-item">1</li> <li class="list-group-item">2</li>
<div class="panel panel-default"> <div class="panel-heading"> the header of panel </div> <!-- 上面所示与下面效果一致 <div class="panel-heading"> <h1 class="panel-title"> 带有 title 的面板标题 </h1> </div> --> <div class="panel-body"> this is a basic panel. </div> <div class="panel-footer"> the footer of panel </div> </div>