Bootstrap~Panel和Table-白红宇

Bootstrap~Panel和Table

阅读量：7222 次

发布时间：2019-06-29

本文共 1313 字，大约阅读时间需要 4 分钟。

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


       
      
       Panel heading without title
      
  
      
           Panel content

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

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

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


              
                   
                        
         
          快速导航
         
                    
                                 
          
           根
            
             系统管理
              
               角色管理
                
                 新建角色
                 管理角色
                
               部门管理
                
                 管理部门
                
               菜单管理
                
                 管理菜单管理
                
               员工管理
                
                 新建员工
                 管理员工
                
               导航管理
                
                 新建导航
                 管理导航
                
              
            
          
                    
         
                
        
        
       
        
                   
                        
         
                                  用户列表                
         
                
                             
              用户：  部门：
          时间：    到      
                  建立一个用户
              
           
                                                        编号                用户名称                真实姓名                Email                所属部门                更新日期                状态                所在系统               
             
                                          
                
                查看  
                新建  
                编辑  
                删除  
                审核 
               
                 1                 zzl                 zzl                 No Info                 公司                 2015/6/22 21:51                 正常                 1               
             
                                            
               
               
                  1/1  共1条

	编号	用户名称	真实姓名	Email	所属部门	更新日期	状态	所在系统
查看新建编辑删除审核	1	zzl	zzl	No Info	公司	2015/6/22 21:51	正常	1
1/1 共1条

View Code

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

...

下面也有带边框的表格

...

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

...

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

转载于:https://www.cnblogs.com/lori/p/4637661.html

你可能感兴趣的文章

翻译连载 | 附录 A：Transducing（上）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...