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

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、雅安服务器托管、营销软件、网站建设、南阳网站维护、网站推广。

一、基本的面板

html代码

 
 
 
 Bootstrap list-group 
  
  
  
 
  
 
 
 
      
  
   
   这是一个基本的面板 
   只需要向 div元素添加 class .panel 和 class .panel-default  
   
  
      
  
  不带 title 的面板标题  
   面板内容  
  
  
   
   带 title 的面板标题  
   
   面板内容  
  
      
  
   
   这是一个基本的面板 
   .panel panel-footer面板脚注 
   
  
      
  
  面板标题 
  这是一个基本的面板  
  
  
  面板标题 
  这是一个基本的面板  
  
  
  面板标题 
  这是一个基本的面板

效果图

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

二、带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个

包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的

，则组件会无中断地从面板头部移动到表格。

 
   
   带 title 的面板标题  
   
   面板内容  
   
    
    姓名 
    年龄 
    
    
    李白 
    25 
    
    
    李白 
    25

姓名	年龄
李白	25
李白	25

效果图

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

三、带列表组的面板

我们可以在任何面板中包含列表组，通过在

元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。

 
   
   面板标题  
   
  这是一个面板。这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
   
   
   唐代诗人李白 
   唐代诗人李白 
   唐代诗人李白 
   唐代诗人李白

效果图

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