【Bootstrap】2つの一般的なレイアウト、中央レイアウトと全画面左右レイアウト、応答レイアウト
12156 ワード
中央のレイアウト
中央のレイアウト、上はメニュー、下はコンテンツ、コンテンツは中央に配置され、画面の幅にかかわらず、コンテンツは常に中央に配置されます.
コード#コード#
フルスクリーン レイアウト
:http://www.jq22.com/jquery-info4155
Flat-UI(インタフェースツールコンポーネントライブラリ)も されます.
https://www.runoob.com/manual/Flat-UI/
このレイアウトは、ブラウザのサイズに じて され、データの が で、バックグラウンド システムに しています.
コード#コード#
cssコード
中央のレイアウト、上はメニュー、下はコンテンツ、コンテンツは中央に配置され、画面の幅にかかわらず、コンテンツは常に中央に配置されます.
コード#コード#
Test
フルスクリーン レイアウト
:http://www.jq22.com/jquery-info4155
Flat-UI(インタフェースツールコンポーネントライブラリ)も されます.
https://www.runoob.com/manual/Flat-UI/
このレイアウトは、ブラウザのサイズに じて され、データの が で、バックグラウンド システムに しています.
コード#コード#
$(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
}