Bootstrap 面板（Panels）

最新推荐文章于 2023-07-22 10:43:08 发布

原创最新推荐文章于 2023-07-22 10:43:08 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过引用Bootstrap的CSS和JS文件，在HTML中添加特定代码来创建具有不同颜色样式的面板，展示了Bootstrap Panels的使用方法及其效果。

引用bootstrap的css和js文件

在html添加以下代码可显示不同颜色的面板

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

展示的效果