Bootstrap 组件-面板

最新推荐文章于 2023-06-28 19:55:44 发布

litengbin

最新推荐文章于 2023-06-28 19:55:44 发布

阅读量310

点赞数

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1 : 基本面板
2 : 面板标题
3 : 面板脚注
4 : 面板颜色

基本面板

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="panel panel-default">
  <div class="panel-body">
    面板内容
  </div>
</div>

面板标题

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容
  </div>
</div>

面板脚注

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    面板内容
  </div>
  <div class="panel-footer">面板脚注</div>
</div>

面板颜色

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="panel panel-default">
  <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>