增加功能:屏幕宽度小于940时,Toolbar描述字消失,小于480时,Toolbar变成微缩版

This commit is contained in:
Argo-Lenovo 2016-11-17 16:02:11 +08:00
parent 8b606a0c6c
commit 5a642e6727
9 changed files with 99 additions and 94 deletions

View File

@ -4,6 +4,12 @@
}
}
@media (max-width: 940px) {
.hidden-tb {
display: none;
}
}
@media (max-width: 768px) {
#sidebar {
display: none;
@ -12,22 +18,14 @@
z-index: 5;
}
#sidebar ul li a {
padding-right: 25px;
}
#sidebar ul li a {
padding-right: 25px;
}
#main-content {
margin-left: 0;
}
.bs-bars {
display: none;
}
.toolbar {
display: inline-block;
}
.modal-dialog {
width: 540px;
margin: 20px auto;
@ -63,6 +61,14 @@
input[type="datetime"] {
min-width: inherit;
}
.bs-bars {
display: none;
}
.toolbar {
display: inline-block;
}
}
@media (max-width: 400px) {

View File

@ -1,4 +1,12 @@
.clearcache {
.hidden-tb {
margin-left: 6px;
}
.glyphicon-search {
padding-right: 6px;
}
.clearcache {
position: absolute;
right: 60px;
font-size: 17px;
@ -17,6 +25,64 @@
}
.form-inline .form-group {
margin-bottom: 15px;
}
.form-inline .form-group .control-label {
margin-right: 10px;
width: 80px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
.modal-dialog .modal-body, .panel-body {
padding-bottom: 0;
}
.modal-dialog .modal-body .form-inline .form-group input {
padding-right: 30px;
}
ul li {
list-style: none;
}
.btn {
outline: none !important;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
.modal-header {
background-color: #f5f5f5;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 10px 15px;
}
.modal-header .close {
margin-top: 1px;
}
.modal-footer {
clear: both;
}
.modal-footer .btn {
padding-left: 22px;
padding-right: 22px;
}
.fixed-table-loading {
padding-top: 5px;
}
.has-error input {
background-repeat: no-repeat;
background-image: url('../images/error.png');

View File

@ -26,48 +26,6 @@
padding-bottom: 0;
}
.form-inline .form-group {
margin-bottom: 15px;
}
.form-inline .form-group .control-label {
margin-right: 10px;
width: 80px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
.modal-dialog .modal-body, .panel-body {
padding-bottom: 0;
}
.modal-dialog .modal-body .form-inline .form-group input {
padding-right: 30px;
}
ul li {
list-style: none;
}
.btn {
outline: none !important;
}
.btn span.fa, .btn span.glyphicon {
margin-right: 6px;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
div button span {
margin-right: 4px;
}
.header, .footer {
padding: 0 15px;
}
@ -549,31 +507,6 @@ div button span {
padding-right: 6px;
}
/*end*/
.modal-header {
background-color: #f5f5f5;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 10px 15px;
}
.modal-header .close {
margin-top: 1px;
}
.modal-footer {
clear: both;
}
.modal-footer .btn {
padding-left: 22px;
padding-right: 22px;
}
.fixed-table-loading {
padding-top: 5px;
}
ul.breadcrumb {
position: absolute;
top: 56px;

View File

@ -61,7 +61,7 @@
</div>
<div id="toolbar" class="btn-group">
<button id="btn_view" type="button" class="btn btn-danger">
<span class="fa fa-file-text-o" aria-hidden="true"></span>服务器日志
<span class="fa fa-file-text-o" aria-hidden="true"></span><span class="hidden-tb">服务器日志</span>
</button>
</div>
<div class="panel panel-default">

View File

@ -41,10 +41,10 @@
}
@section toolbar {
<button id="btn_assignRole" type="button" class="btn btn-info">
<span class="fa fa-sitemap" aria-hidden="true"></span>指派角色
<span class="fa fa-sitemap" aria-hidden="true"></span><span class="hidden-tb">指派角色</span>
</button>
<button id="btn_assignUser" type="button" class="btn btn-info">
<span class="fa fa-user" aria-hidden="true"></span>指派用户
<span class="fa fa-user" aria-hidden="true"></span><span class="hidden-tb">指派用户</span>
</button>
}
@section modal {

View File

@ -54,7 +54,7 @@
}
@section toolbar {
<button id="btn_assignRole" type="button" class="btn btn-info">
<span class="fa fa-sitemap" aria-hidden="true"></span>指派角色
<span class="fa fa-sitemap" aria-hidden="true"></span><span class="hidden-tb">指派角色</span>
</button>
}
@section modal {

View File

@ -48,13 +48,13 @@
}
@section toolbar{
<button id="btn_assignUser" type="button" class="btn btn-info">
<span class="fa fa-user" aria-hidden="true"></span>指派用户
<span class="fa fa-user" aria-hidden="true"></span><span class="hidden-tb">指派用户</span>
</button>
<button id="btn_assignGroup" type="button" class="btn btn-info">
<span class="fa fa-bank" aria-hidden="true"></span>指派部门
<span class="fa fa-bank" aria-hidden="true"></span><span class="hidden-tb">指派部门</span>
</button>
<button id="btn_assignMenu" type="button" class="btn btn-info">
<span class="fa fa-dashboard" aria-hidden="true"></span>指派菜单
<span class="fa fa-dashboard" aria-hidden="true"></span><span class="hidden-tb">指派菜单</span>
</button>
}
@section modal {

View File

@ -41,10 +41,10 @@
}
@section toolbar {
<button id="btn_assignRole" type="button" class="btn btn-info">
<span class="fa fa-sitemap" aria-hidden="true"></span>指派角色
<span class="fa fa-sitemap" aria-hidden="true"></span><span class="hidden-tb">指派角色</span>
</button>
<button id="btn_assignGroup" type="button" class="btn btn-info">
<span class="fa fa-bank" aria-hidden="true"></span>指派部门
<span class="fa fa-bank" aria-hidden="true"></span><span class="hidden-tb">指派部门</span>
</button>
}
@section modal {

View File

@ -50,14 +50,14 @@
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span class="hidden-tb">新增</span>
</button>
<button id="btn_delete" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span><span class="hidden-tb">删除</span>
</button>
<button id="btn_edit" type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
</button>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span class="hidden-tb">编辑</span>
</button>
@RenderSection("toolbar", false)
</div>
<div class="panel panel-default">