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

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

一、基本的面板

html代码

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

效果图

二、带表格的面板

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

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

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

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

效果图

三、带列表组的面板

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

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

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

效果图

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