Bootstrap 组件：面板组件（panel）

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

基础面板非常简单，就是一个div容器中运用了类.panel的样式，产生一个具有边框的文本显示块，由于panel不控制主题颜色，所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容。

默认样式

默认的.panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。其用法如下：

<div class="panel panel-default">
	<div class="panel-body">
		默认样式
    </div>
</div>

---

带标题的面版

通过.panel-heading可以很简单地为面板加入一个标题容器。你也可以通过添加设置了.panel-title类的<h1>-<h6>标签，添加一个预定义样式的标题。不过，<h1>-<h6>标签的字体大小将被.panel-heading的样式所覆盖。为了给链接设置合适的颜色，务必将链接放到带有.panel-title类的标题标签内。

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

---

带尾部的面版

把按钮或次要的文本放入.panel-footer容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

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