Bootstrap中的Panel和Table全面解析

这篇文章主要介绍了Bootstrap中的Panel和Table全面解析的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下

在我们对一个页面进行设计时，分块是必须的，没有一个网站是一栏而下的，除非你是在看小说，否则你的页面设计一定是分块的，即它由于多个panel组件，在bootstrap里叫到栅格系统，而在每行每列进行宏观的布局后，就是在每一个大块里建立小块，而小块可以使用Panel来实现，下面看个例子

  Panel heading without title Panel content 

这是最简单的格式了，它运行后的效果

其实在我们设计自己的系统时，如果panel运行得当，也可以快速的建立一个页面，如下

它其实于一个栅格（1x2）和两个panel组件，缩减代码如下

    快速导航 
根
系统管理
角色管理
新建角色
管理角色
部门管理
管理部门
菜单管理
管理菜单管理
员工管理
新建员工
管理员工
导航管理
新建导航
管理导航
  

用户列表

  
 用户：  部门：
时间：    到      
 建立一个用户
 
 
 
编号 
用户名称 
真实姓名 
Email 
所属部门 
更新日期 
状态 
所在系统 
 
 
   查看 新建 编辑 删除 审核
 1 
 zzl 
 zzl
 No Info
 公司 
 2015/6/22 21:51 
 正常 
 1 
 
 
  .page_Standard { padding: 5px; margin: 0px; text-align: center; font-family: 0px; font-family: Arial; font-size: 12px; } .page_Standard a.cur{ background: none repeat scroll 0 0 #036cb4; border: 1px solid #036cb4; color: #fff; font-weight: bold; margin: 2px; padding: 2px 5px; } .page_Standard a { border: #eee 1px solid; padding: 2px 5px; margin: 2px; color: #036cb4; text-decoration: none; } .page_Standard A:hover { border: #999 1px solid; color: #666; } .page_Standard A:active { border: #999 1px solid; COLOR: #666; } .page_Standard span { border: #036cb4 1px solid; padding: 2px 5px; font-weight: bold; margin: 2px; color: #fff; background: #036cb4; } .page_Standard .disabled { border: #eee 1px solid; padding: 2px 5px; margin: 2px; color: #ddd; }   1/1  共1条

下面再来看一下表格table，bootstrap基本就是为它添加的css样式，没有什么特别的

  ... 

下面也有带边框的表格

  ... 

同时也集成了ＪＳ的悬浮效果

  ... 

ＯＫ，对于布局中的Panel和Table就介绍到这里，最后让大家看一下我的bootstrap的demo，感觉真的很简单，很方便！

以上所述是小编给大家介绍的Bootstrap中的Panel和Table的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

以上就是Bootstrap中的Panel和Table全面解析的详细内容，更多请关注本站其它相关文章！