Bootstrap面板（Panels）的简单实现代码

本文实例为大家分享了Bootstrap面板展示的具体代码，供大家参考，具体内容如下

一、基本的面板

html代码

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap list-group</title> 
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 <style> 
 body{ 
  margin-top:30px; 
  font-family: '楷体'; 
 } 
 p{ 
  font-size: 18px; 
 } 
 </style> 
</head> 
  
<body> 
 
<div class="container"> 
     <!--基本的面板--> 
 <div class="panel panel-danger"> 
  <a href="#" rel="external nofollow" rel="external nofollow" class="list-group-item active" > 
   <h3 class="list-group-item-heading">这是一个基本的面板</h3> 
   <p>只需要向 div元素添加 class .panel 和 class .panel-default </p> 
  </a> 
 </div> 
     <!--标题面板--> 
 <div class="panel panel-default"> 
  <div class="panel-heading">不带 title 的面板标题 </div> 
  <div class="panel-body"> 面板内容 </div> 
 </div> 
 <div class="panel panel-default"> 
  <div class="panel-heading"> 
   <h3 class="panel-title">带 title 的面板标题 </h3> 
  </div> 
  <div class="panel-body"> 面板内容 </div> 
 </div> 
     <!--面板脚注--> 
 <div class="panel panel-danger"> 
  <a href="#" rel="external nofollow" rel="external nofollow" class="list-group-item" > 
   <h3 class="list-group-item-heading">这是一个基本的面板</h3> 
   <div class="panel panel-footer">.panel panel-footer面板脚注</div> 
  </a> 
 </div> 
     <!--带语境色彩的面板--> 
 <div class="panel panel-primary"> 
  <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div> 
  <div class="panel-body">这是一个基本的面板 </div> 
 </div> 
 <div class="panel panel-info"> 
  <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div> 
  <div class="panel-body">这是一个基本的面板 </div> 
 </div> 
 <div class="panel panel-warning"> 
  <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div> 
  <div class="panel-body">这是一个基本的面板 </div> 
 </div> 
</div> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

效果图

二、带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

<div class="panel panel-default"> 
  <div class="panel-heading"> 
   <h3 class="panel-title">带 title 的面板标题 </h3> 
  </div> 
  <div class="panel-body"> 面板内容 </div> 
  <table class="table"> 
   <tr> 
    <th>姓名</th> 
    <th>年龄</th> 
   </tr> 
   <tr> 
    <td>李白</td> 
    <td>25</td> 
   </tr> 
   <tr> 
    <td>李白</td> 
    <td>25</td> 
   </tr> 
  </table> 
 </div>

效果图

三、带列表组的面板

我们可以在任何面板中包含列表组，通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。

<div class="panel panel-default"> 
  <div class="panel-heading"> 
   <h3 class="panel-title">面板标题 </h3> 
  </div> 
  <div class="panel-body">这是一个面板。这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  </div> 
  <ul class="list-group"> 
   <li class="list-group-item">唐代诗人李白</li> 
   <li class="list-group-item">唐代诗人李白</li> 
   <li class="list-group-item">唐代诗人李白</li> 
   <li class="list-group-item">唐代诗人李白</li> 
  </ul>  
  
 </div>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap # 面板 # Panels # Bootstrap面板学习使用 # Bootstrap面板使用方法 # Bootstrap源码解读媒体对象、列表组和面板（10） # Bootstrap基本组件学习笔记之面板(14) # 基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard # 浅析Bootstrap组件之面板组件 # Bootstrap每天必学之面板 # 这是一个 # 李白 # 我们可以 # 有个 # 只需 # 并在 # 如果没有 # 不带 # 大家分享 # 要向 # 创建一个 # 具体内容 # 大家多多 # link # rel # stylesheet # utf # group # meta # charset

返回目录在线咨询

上一篇：利用“我爱你”域名建站推广个人品牌或业务的有效策略有哪些？
下一篇：php数组打印出来方法_php数组内容显示输出技巧【解析】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Bootstrap面板（Panels）的简单实现代码

您的项目需求