Bootstrap 面板--Panels

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

努力挣钱的Dora

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

阅读量714

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/beixiaohaizi/article/details/93039020

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了Bootstrap基本面板的相关CSS样式，如.panel、.panel-default等，将面板分为头部、身体和尾部，并说明了各部分对应的类名。还提及带语境色彩的面板样式，以及表格和无序列表的相关类。最后总结其主要是在布局中增加了一些CSS样式。

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

基本面板的两个CSS：
.panel
.panel-default
.panel-body
将面板分为：头部+身体+尾
.panel-heading 头
.panel-title，标题，一般配合h1~h6标签一起使用，语义化
.panel-footer:尾

<div class="panel panel-default">
	<div class="panel-heading">
		不带 title 的面板标题
	</div>
	<div class="panel-heading">
		<h3 class="panel-title">
			带有 title 的面板标题
		</h3>
	</div>
	<div class="panel-heading panel-title"> 
		带有 title 的面板标题 
	</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板脚注</div>
</div>

在这里插入图片描述
面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。

带语境色彩的面板
.panel-primary
.panel-success
.panel-info
.panel-warning
.panel-danger

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

在这里插入图片描述
4. 表格
.table

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">这是一个基本的面板</div>
	<table class="table">
		<tr><th>产品</th><th>价格 </th></tr>
		<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">
		<tr><th>产品</th><th>价格 </th></tr>
		<tr><td>产品 A</td><td>200</td></tr>
		<tr><td>产品 B</td><td>400</td></tr>
	</table>
</div>

在这里插入图片描述
5. 无序列表
.list-group
.list-group-item

<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
   <div class="panel-body"> 
   	这是一个基本的面板内容。body。 
   </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>

在这里插入图片描述
6. 总结
写了那么多，觉得好像就是布局里面，多了一写样式,就是多了一些CSS样式