【Bootstrap】2つの一般的なレイアウト、中央レイアウトと全画面左右レイアウト、応答レイアウト

12156 ワード

中央のレイアウト
【Bootstrap】两个常用布局,居中布局和全屏左右布局,响应式布局_第1张图片
中央のレイアウト、上はメニュー、下はコンテンツ、コンテンツは中央に配置され、画面の幅にかかわらず、コンテンツは常に中央に配置されます.
 
コード#コード#



    
    
    
    Test
    
    
    



    
    


© Test


 
フルスクリーン レイアウト
 
:http://www.jq22.com/jquery-info4155
Flat-UI(インタフェースツールコンポーネントライブラリ)も されます.
https://www.runoob.com/manual/Flat-UI/
【Bootstrap】      ,           ,     _ 2
このレイアウトは、ブラウザのサイズに じて され、データの が で、バックグラウンド システムに しています.
コード#コード#



    
    
    
    
        

    
    
    


    

wwz
13700000000
$(function () { $(".meun-item").click(function () { $(".meun-item").removeClass("meun-item-active"); $(this).addClass("meun-item-active"); }); $(".toggle-btn").click(function () { $("#leftMeun").toggleClass("show"); $("#rightContent").toggleClass("pd0px"); }) })

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
}