Bootstrap 3 之 Bootstrap 面板

Bootstrap 面板是一个非常常用的组件，用于在网页上显示信息或内容块。面板可以用来展示警告信息、通知、内容摘要等。在 Bootstrap 3 中，面板有两种类型：基本面板和面板组。

基本面板

基本面板是一个简单的面板，用于展示单个内容块。它有一个白色背景和圆角边框。

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

在上面的示例中，panel panel-default 类用于定义一个基本面板，panel-heading 类用于定义面板的标题，panel-body 类用于定义面板的内容。

面板样式

除了基本面板外，Bootstrap 还提供了不同样式的面板，包括主要面板、成功面板、信息面板、警告面板和危险面板。

主要面板

主要面板用于突出显示重要内容。

<div class="panel panel-primary">
  <div class="panel-heading">主要面板</div>
  <div class="panel-body">主要内容</div>
</div>

成功面板

成功面板用于显示成功或正面信息。

<div class="panel panel-success">
  <div class="panel-heading">成功面板</div>
  <div class="panel-body">成功内容</div>
</div>

信息面板

信息面板用于显示一般信息。

<div class="panel panel-info">
  <div class="panel-heading">信息面板</div>
  <div class="panel-body">信息内容</div>
</div>

警告面板

警告面板用于显示警告信息。

<div class="panel panel-warning">
  <div class="panel-heading">警告面板</div>
  <div class="panel-body">警告内容</div>
</div>

危险面板

危险面板用于显示危险或负面信息。

<div class="panel panel-danger">
  <div class="panel-heading">危险面板</div>
  <div class="panel-body">危险内容</div>
</div>

以上是 Bootstrap 面板的基本用法和样式，你可以根据自己的需求选择合适的面板类型来展示内容。