重构样式表增加site-responsive样式,修复sidebar不通分辨率下自动隐藏功能

This commit is contained in:
Argo-Lenovo 2016-10-26 00:14:15 +08:00
parent d3d0f5c176
commit d6de899b37
8 changed files with 104 additions and 62 deletions

View File

@ -112,6 +112,7 @@
<Content Include="Content\css\bootstrap.css" />
<Content Include="Content\css\bootstrap.min.css" />
<Content Include="Content\css\font-awesome.min.css" />
<Content Include="Content\css\site-responsive.css" />
<Content Include="Content\fonts\fontawesome-webfont.svg" />
<Content Include="Content\images\arrow-up.png" />
<Content Include="Content\images\avatar1_small.jpg" />

View File

@ -1,11 +1,27 @@
#sidebar {
.wrapper {
display: inline-block;
padding: 15px;
width: 100%;
}
.sidebar-closed > #sidebar > ul {
display: none;
}
.sidebar-closed #main-content {
margin-left: 0px;
}
.sidebar-closed #sidebar {
margin-left: -210px;
}
#sidebar {
width: 210px;
position: absolute;
top: 0;
bottom: 40px;
height: 100%;
position: fixed;
background: #2a3542;
overflow-y: scroll;
outline: none;
margin-top: 94px;
}
@ -131,7 +147,3 @@ ul.sidebar-menu {
transition: all 0.3s ease;
color: #aeb2b7;
}
.row {
margin-left: 210px;
}

View File

@ -3,14 +3,14 @@
overflow: hidden;
}
.row {
#main-content {
margin-left: 210px;
position: fixed;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 40px;
padding-top: 16px;
right: 0;
top: 94px;
overflow: auto;
}
.site-footer {

View File

@ -0,0 +1,62 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.dropdown-menu.extended {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important;
}
}
@media (min-width: 980px) {
.modal-dialog {
width: 800px;
}
}
@media (max-width: 979px) {
.panel-body {
padding-top: 0px;
}
.panel-body .form-inline .form-group {
margin-top: 15px;
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.sidebar-close #sidebar {
height: auto;
overflow: hidden;
overflow-y: auto;
position: absolute;
z-index: 1001;
display: block;
}
#sidebar {
display: none;
}
#main-content {
margin: 0px !important;
position: none !important;
}
.top-nav {
position: absolute;
right: 10px;
top: 0px;
}
}
@media (max-width: 480px) {
.top-nav ul.top-menu > li {
float: right;
}
.top-nav .search {
display: none;
}
}
@media (max-width:320px) {
}

View File

@ -35,12 +35,6 @@ div button span {
margin-top: 108px;
}
.row {
margin-left: 0;
margin-right: 0;
margin-top: 92px;
}
.header, .footer {
min-height: 60px;
padding: 0 15px;
@ -308,13 +302,6 @@ a.logo {
display: block;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.dropdown-menu.extended {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important;
}
}
/*Login*/
.form-signin {
width: 330px;
@ -387,41 +374,18 @@ a.logo {
/*end login*/
/*bootstrap table 下边距*/
.table-body {
padding: 0px 8px;
}
.form-inline .form-group label.control-label {
margin-right: 10px;
}
@media (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 15px;
}
.panel-body {
padding-bottom: 0;
}
}
@media (max-width: 768px) {
.panel-body {
padding-bottom: 0;
}
width: 80px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.modal-body {
padding-bottom: 0;
}
@media (min-width: 992px) {
.modal-dialog {
width: 800px;
}
}
.modal-header {
background-color: #f5f5f5;
border-top-left-radius: 6px;

View File

@ -7,6 +7,7 @@
<link href="~/Content/css/bootstrap-table.css" rel="stylesheet" />
<link href="~/Content/css/sweetalert.css" rel="stylesheet" />
<link href="~/Content/css/site.css" rel="stylesheet" />
<link href="~/Content/css/site-responsive.css" rel="stylesheet" />
<link href="~/Content/css/fix.css" rel="stylesheet" />
<link href="~/Content/css/admin.css" rel="stylesheet" />
@RenderSection("css", false)
@ -19,15 +20,17 @@
<script src="~/Content/js/framework.js"></script>
@RenderSection("Javascript", false)
}
@RenderSection("header", false)
@RenderSection("navigator", false)
<section id="container">
<section>
<div id="main-content" class="row">
<div class="col-lg-12">
@RenderBody()
@RenderSection("header", false)
@RenderSection("navigator", false)
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
@RenderBody()
</div>
</div>
</div>
</section>
</section>
<!--footer start-->

View File

@ -60,7 +60,7 @@
<div class="panel-heading">
查询结果
</div>
<div class="panel-body table-body">
<div class="panel-body">
<table></table>
</div>
</div>