Bootstrap 面板

基本的面板：
<div class="panel panel-default">
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>

面板标题

<div class="panel panel-default">
   <div class="panel-heading">
      不带 title 的面板标题
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
         带有 title 的面板标题
      </h3>
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

带语境色彩的面板：

<div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-success">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-info">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-warning">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-danger">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>

带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

 

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>
<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>

带列表组的面板:

<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
      <div class="panel-body">
         <p>这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
		 这是一个基本的面板内容。这是一个基本的面板内容。
         </p>
   </div>
   <ul class="list-group">
      <li class="list-group-item">免费域名注册</li>
      <li class="list-group-item">免费 Window 空间托管</li>
      <li class="list-group-item">图像的数量</li>
      <li class="list-group-item">24*7 支持</li>
      <li class="list-group-item">每年更新成本</li>
   </ul>
</div>

面板跟列表组紧密结合，组成了实用的导航。如果没有包含 .panel-body 的 <div>，则列表组件会无中断地从面板头部下面。

<div class="panel panel-primary">
  <div class="panel-heading">
   <h2 class="panel-title">面板标题
  </div>

  <div class="list-group">
  <a href="#" class="list-group-item">免费域名注册</a>
  <a class="list-group-item">免费 Window 空间托管</a>
  <a class="list-group-item">图像的数量</a>
  <a class="list-group-item">24*7 支持</a>
  <a class="list-group-item">每年更新成本</a>
  </div>
</div>

@*在面板中，内容可以是列表组，也可以是表格。列表组和表格的主要区别就是表格中的链接默认是有下划线的，颜色是灰色字体的。（可以通过 style="text-decoration:none;color:black"），而列表组没有下划组。
还有列表组中的徽章默认是右对齐的，而表格中的徽章不是右对齐的（可以设置span class="badge pull-right" >例徽章靠右对齐）。*@

在asp.net mvc 视图实际应用到的例子：
带表格的面板：

@model IEnumerable<MajorConstruction.Models.IndexClickRangeOnCourseViewModel>

<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title"><span class="glyphicon glyphicon-list"> 热门课程</span></h2>
</div>

<table class="table table-hover table-responsive">
@*在面板中，内容可以是列表组，也可以是表格。列表组和表格的主要区别就是表格中的链接默认是有下划线的，颜色是灰色字体的。（可以通过 style="text-decoration:none;color:black"），而列表组没有下划组。
还有列表组中的徽章默认是右对齐的，而表格中的徽章不是右对齐的（可以设置span class="badge pull-right" >例徽章靠右对齐）。*@
@foreach (var course in Model)
{
<tr>
<td>
<a href="@Url.Action("Index", "Resource", new { courseID =course.CourseID, area = "" })" title="@course.CourseType 点击量 @course.CourseResourceTotalClickCount" style="text-decoration:none;color:black">
@*title属性这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。*@
@course.CourseName<span class="badge pull-right" >@course.CourseResourceCount</span>
</a>
</td>

</tr>

}
</table>

</div>

带列表组的面板：

@model IEnumerable<MajorConstruction.Models.IndexClickRangeOnCourseViewModel>

<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title"><span class="glyphicon glyphicon-list"> 热门课程</span></h2>
</div>

<div class="list-group">
@*在面板中，内容可以是列表组，也可以是表格。列表组和表格的主要区别就是表格中的链接默认是有下划线的，颜色是灰色字体的。（可以通过 style="text-decoration:none;color:black"），而列表组没有下划线。
还有列表组中的徽章默认是右对齐的，而表格中的徽章不是右对齐的（可以设置span class="badge pull-right" >例徽章靠右对齐）。并且列表组的高度要高一些。*@
@foreach (var course in Model)
{
<a href="@Url.Action("Index", "Resource", new { courseID =course.CourseID, area = "" })" title="@course.CourseType 点击量 @course.CourseResourceTotalClickCount" class="list-group-item" style="color:black">
@*title属性这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。*@
@course.CourseName<span class="badge" >@course.CourseResourceCount</span>
</a>
}
</div>

</div>