宜宾网站建设公司

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

效果图

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

三、带列表组的面板

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

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

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

效果图

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

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


本文标题：Bootstrap面板（Panels）的简单实现代码
网页链接：http://hbruida.cn/article/gsiphi.html

其他资讯