【Bootstrap】两个常用布局，居中布局和全屏左右布局，响应式布局

居中布局

居中布局，上面为菜单，下面为内容，内容居中，无论屏幕多宽，内容总是在中间

 

代码

    
    
    
    
    
    
    



    

        

            

                
                    
                    
                    
                
                Test
            
            

                

                    
菜单1
                    
菜单2
                    
菜单3
                

                

                    
注册
                    
登录
                
            
        
    
    


        
内容

        

        

            
© Test
        
    

    

    

 

全屏左右布局

 

参考：http://www.jq22.com/jquery-info4155

其中还用到Flat-UI(界面工具组件库)

https://www.runoob.com/manual/Flat-UI/

这种布局，根据浏览器大小显示，数据显示较全，适用于后台管理系统

代码

    
    
    
    
    

    
    
    


    

        

            

                

                    项目名称
                
            

            
账号管理
            
用户管理
            
修改密码

        

        

            
                
            
            


                

                    


                    

                        

                            

                                用户名
                            
                            

                                地区
                            
                            

                                真实姓名
                            
                            

                                电话
                            
                            

                                状态
                            
                            

                                操作
                            
                        
                        

                            

                                

                                    wwz
                                
                                

                                    地区
                                
                                

                                    哈哈
                                
                                

                                    13700000000
                                
                                

                                    状态
                                
                                

                                    修改
                                    删除
                                
                            
                        
                    

                
  
               

                        

  
                        
                        

                            

                                

                                    原密码：
                                    

                                        
                                    
                                
                                

                                    新密码：
                                    

                                        
                                    
                                
                                

                                    重复密码：
                                    

                                        
                                    
                                
                                

                                    

                                        取 消
                                        保存
                                    
                                
                            
                        
                    

            
        
    

    
    
    

css代码

@charset "utf-8";

body {
    min-width: 100%;
    height: auto
}


#wrap {
    min-width: 100%;
    position: absolute;
    background: #eff3f6 bottom;
    min-height: 100%;
    overflow: hidden
}

.leftMeun {
    position: absolute;
    box-sizing: border-box;
    width: 200px;
    height: 100%;
    background: #4d5e70 bottom
}

    .leftMeun > div {
        padding-left: 20px
    }

#rightContent {
    box-sizing: border-box;
    float: left;
    box-sizing: border-box;
    padding-left: 200px;
    overflow-y: overlay;
    overflow-x: hidden;
    clear: both;
    color: #717592;
    min-width: 100%;
    min-height: 500px
}

#logoDiv {
    padding-top: 20px;
    padding-bottom: 20px;
    height: 70px;
    background-color: #354457;
    font-size: 17px;
    color: #fff;
    vertical-align: bottom
}

.meun-title {
    color: #828e9a;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 700
}

.meun-item {
    line-height: 40px;
    height: 40px;
    color: #aab1b7;
    cursor: pointer
}

.meun-item a {
    color: #aab1b7;
    display: block
}

.meun-item-active a {
    color: #c4c7cc;
    display: block
}

.meun-item img {
    padding-right: 8px;
    height: 20px
}

.meun-item-active {
    background-color: #3d4e60;
    border-right: 4px solid #647f9d;
    color: #fff
}

.check-div {
    height: 70px;
    line-height: 70px;
    *line-height: 60px;
    background-color: #fff;
    padding-left: 30px;
    min-width: 824px !important;
    box-sizing: border-box
}

.tab-pane {
    color: #9095ab
}


.toggle-btn {
    display: none;
    width: 52px;
    height: 50px;
    font-size: 20px;
    padding: 15px;
    cursor: pointer;
    float: left;
    color: #212121;
    -moz-transition: all .2s ease-out 0s;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s
}

.tableHeader {
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    font-weight: 700;
    color: #646987;
    background-color: #e3e8ee;
    padding: 0 30px;
    text-align: left
}

.tablebody {
    margin: 20px 30px;
    text-align: left
}

    .tablebody .row {
        margin-top: 10px;
        background-color: #fff;
        height: 70px;
        line-height: 70px
    }

.pd0px {
    padding-left: 200px !important
}

/*屏幕宽度小于1123px时的样式*/
@media(max-width:1123px) {
    #rightContent {
        padding-left: 0
    }

    .tab-pane {
        min-width: 973px
    }

    .leftMeun {
        display: none
    }

    .toggle-btn {
        display: block
    }
}

.btn-white {
    background: #fff;
    border: 1px solid #ccc !important;
    font-weight: 400 !important;
    margin-right: 10px
}

.btn-green {
    border: 1px solid #ccc !important;
    font-weight: 400 !important;
    margin-right: 10px;
    color: #fff;
    background: #529373
}

.duiqi {
    margin-left: -26px !important;
    margin-top: 7px;
    width: 200px !important
}

.form-horizontal .form-group {
    margin-right: -100px !important
}