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>
