Bootstrap 面板（Panels）

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

lstingou

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

阅读量1.6k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap

本文链接：https://blog.youkuaiyun.com/csdn_tingou/article/details/82853254

版权

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用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>

展示的效果