orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

重写Header相关样式

This commit is contained in:
Argo-Lenovo 2016-11-07 15:44:32 +08:00
parent 3135ff24f0
commit e85a76b7ca
2 changed files with 507 additions and 503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

564
Bootstrap.Admin/Content/css/site.css
View File

@ -57,6 +57,17 @@ div button span {
border-bottom: 1px solid #f1f2f7; border-bottom: 1px solid #f1f2f7;
} }
.arrow-up {
background: url("../images/arrow-up.png") no-repeat;
width: 20px;
height: 11px;
position: absolute;
right: 20px;
top: -10px;
}
/*Title*/
a.logo { a.logo {
font-size: 21px; font-size: 21px;
color: #2e2e2e; color: #2e2e2e;
@ -73,6 +84,7 @@ a.logo {
a.logo span { a.logo span {
color: #FF6C60; color: #FF6C60;
} }
/*end title*/
.sidebar-toggle-box { .sidebar-toggle-box {
float: left; float: left;
@ -111,273 +123,351 @@ a.logo {
color: #2A3542; color: #2A3542;
} }
.top-nav { /*Right Profile*/
.top-menu {
margin-top: 7px; margin-top: 7px;
} }
.top-nav .username { .top-menu .username {
font-size: 13px; font-size: 13px;
color: #555555; color: #555555;
display: inline-block; display: inline-block;
min-width: 18px; min-width: 18px;
} }
.top-nav ul.top-menu > li > a { .top-menu li {
border: 1px solid #eeeeee; float: left;
border-radius: 4px;
-webkit-border-radius: 4px;
padding: 6px;
background: none;
margin-right: 0;
} }
.top-nav ul.top-menu > li { .top-menu > li {
margin-left: 10px; margin-left: 10px;
} }
.top-nav ul.top-menu > li > a:hover, .top-nav ul.top-menu > li > a:focus { .top-menu > li > a:hover, top-menu > li > a:focus {
border: 1px solid #F1F2F7; border: 1px solid #F1F2F7;
background: #F1F2F7; background: #F1F2F7;
} }
.top-nav ul.top-menu > li > a > img { .top-menu > li > a > img {
height: 29px; height: 29px;
width: 29px; width: 29px;
} }
.top-nav .dropdown-menu.extended.logout { .top-menu > li > a {
top: 50px; border: 1px solid #eeeeee;
} border-radius: 4px;
-webkit-border-radius: 4px;
.top-nav .dropdown-menu.extended.logout li a i { padding: 6px;
margin-bottom: 4px; background: none;
margin-right: 0;
} }
.top-nav .nav .caret { .top-menu > li > a:hover .caret {
border-bottom-color: #000;
border-top-color: #000;
}
.top-menu > li > a:hover, .top-menu > li > a:focus {
border: 1px solid #f0f0f8 !important;
background-color: #fff !important;
border-color: #f0f0f8 !important;
text-decoration: none;
border-radius: 4px;
-webkit-border-radius: 4px;
color: #2E2E2E !important;
}
.top-menu .caret {
border-bottom-color: #A4AABA; border-bottom-color: #A4AABA;
border-top-color: #A4AABA; border-top-color: #A4AABA;
} }
.top-nav ul.top-menu > li > a:hover .caret { .top-menu .dropdown-menu.logout {
border-bottom-color: #000;
border-top-color: #000;
}
.top-nav ul.top-menu > li .dropdown-menu.logout {
width: 268px !important; width: 268px !important;
top: 50px;
left: auto;
right: 0; right: 0;
padding: 0;
border: none;
} }
.nav > li, ul.top-menu > li { .top-menu .dropdown-menu.logout li {
float: left; margin-left: 0;
} text-align: center;
width: 33.3%;
ul.top-menu > li > a {
color: #666666;
font-size: 16px;
border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #f0f0f8 !important;
padding: 2px 6px;
margin-right: 15px;
}
ul.top-menu > li > a:hover, ul.top-menu > li > a:focus {
border: 1px solid #f0f0f8 !important;
background-color: #fff !important;
border-color: #f0f0f8 !important;
text-decoration: none;
border-radius: 4px;
-webkit-border-radius: 4px;
color: #2E2E2E !important;
} }
.search { .top-menu .dropdown-menu.logout li:last-child {
margin-top: 6px; float: left;
width: 20px; text-align: center;
-webkit-transition: all .3s ease; width: 100%;
-moz-transition: all .3s ease; background: #a9d96c;
-ms-transition: all .3s ease; border-radius: 0 0 3px 3px;
-o-transition: all .3s ease; }
transition: all .3s ease;
border: 1px solid #fff;
box-shadow: none;
background: url("../images/search-icon.png") no-repeat 10px 8px;
padding: 0 5px 0 35px;
color: #000;
}
.search:focus { .top-menu .dropdown-menu.logout li:last-child a, .top-menu .dropdown-menu.logout li:last-child a:hover {
margin-top: 5px; color: #fff;
width: 180px; border-bottom: none !important;
border: 1px solid #eaeaea; text-transform: uppercase;
box-shadow: none; }
.top-menu .dropdown-menu.logout li:last-child a:hover, .top-menu .dropdown-menu.logout li:last-child a:hover i {
color: #FF6C60;
}
.top-menu .dropdown-menu.logout li a {
color: #a4abbb;
border-bottom: none !important;
padding: 15px 10px;
}
.top-menu .dropdown-menu.logout li a:hover {
background: none !important;
color: #337ab7;
}
.top-menu .dropdown-menu.logout li a:hover i {
color: #50c8ea;
}
.top-menu .dropdown-menu.logout li a i {
font-size: 17px;
display: block;
margin-bottom: 4px;
}
.top-menu .dropdown-menu.logout li a .badge {
position: absolute;
right: 20px;
top: 4px;
background: #FCB322;
}
.top-menu .search {
margin-top: 6px;
width: 20px;
-webkit-transition: all .3s ease; -webkit-transition: all .3s ease;
-moz-transition: all .3s ease; -moz-transition: all .3s ease;
-ms-transition: all .3s ease; -ms-transition: all .3s ease;
-o-transition: all .3s ease; -o-transition: all .3s ease;
transition: all .3s ease; transition: all .3s ease;
color: #c8c8c8; border: 1px solid #fff;
font-weight: 300; box-shadow: none;
background: url("../images/search-icon.png") no-repeat 10px 8px;
padding: 0 5px 0 35px;
color: #000;
} }
.arrow-up { .top-menu .search:focus {
background: url("../images/arrow-up.png") no-repeat; margin-top: 5px;
width: 20px; width: 180px;
height: 11px; border: 1px solid #eaeaea;
position: absolute; box-shadow: none;
right: 20px; -webkit-transition: all .3s ease;
top: -10px; -moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
color: #c8c8c8;
font-weight: 300;
}
/*end*/
/*notify bar*/
.notify-row {
margin-top: 20px;
float: left;
} }
.dropdown-menu.extended { .notify-row > li {
max-width: 300px !important;
min-width: 160px !important;
top: 42px;
right: -100px;
width: 235px !important;
padding: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
border: none !important;
border-radius: 4px;
-webkit-border-radius: 4px;
}
.dropdown-menu.extended.logout > li {
float: left; float: left;
text-align: center; position: relative;
width: 33.3%; display: block;
} }
.dropdown-menu.extended.logout > li:last-child { .notify-row > li > a {
float: left; color: #666666;
text-align: center; border-radius: 4px;
width: 100%; -webkit-border-radius: 4px;
background: #a9d96c; font-size: 16px;
border-radius: 0 0 3px 3px; border: 1px solid #f0f0f8;
padding: 2px 6px;
margin-right: 15px;
} }
.dropdown-menu.extended.logout > li:last-child > a, .dropdown-menu.extended.logout > li:last-child > a:hover { .notify-row > li > a .badge {
color: #fff;
border-bottom: none !important;
text-transform: uppercase;
}
.dropdown-menu.extended.logout > li:last-child > a:hover, .dropdown-menu.extended.logout > li:last-child > a:hover > i {
color: #FF6C60;
}
.dropdown-menu.extended.logout > li > a {
color: #a4abbb;
border-bottom: none !important;
}
.dropdown-menu.extended.logout > li > a:hover {
background: none !important;
}
.dropdown-menu.extended.logout > li > a:hover i {
color: #50c8ea;
}
.dropdown-menu.extended.logout > li > a i {
font-size: 17px;
}
.dropdown-menu.extended.logout > li > a > i {
display: block;
}
.dropdown-menu.extended.logout > li > a > .badge {
position: absolute; position: absolute;
right: 20px; top: -10px;
top: 4px;
background: #FCB322;
} }
.dropdown-menu.extended li a { .notify-row > li > a .badge.bg-success {
border-bottom: 1px solid #EBEBEB !important; background: #a9d86e;
font-size: 12px; }
list-style: none;
padding: 15px 10px !important; .notify-row > li > a .badge.bg-important {
width: 100%; background: #ff6c60;
display: inline-block; }
.notify-row > li > a .badge.bg-warning {
background: #FCB322;
}
.notify-row .dropdown-menu {
float: left;
max-width: 300px !important;
min-width: 160px !important;
top: 32px;
left: -74px;
width: 235px !important;
padding: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
border: none !important;
border-radius: 4px;
-webkit-border-radius: 4px;
} }
.dropdown-menu.extended li a:hover { .notify-row .dropdown-menu > .notify-arrow {
border-style: solid;
border-width: 0 9px 9px;
height: 0;
margin-top: 0;
opacity: 0;
position: absolute;
left: 80px;
top: -18px;
transition: all 0.25s ease 0s;
width: 0;
z-index: 10;
margin-top: 10px;
opacity: 1;
}
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-green {
border-color: transparent transparent #a9d86e;
border-bottom-color: #a9d86e !important;
border-top-color: #a9d86e !important;
}
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-yellow {
border-color: transparent transparent #FCB322;
border-bottom-color: #FCB322 !important;
border-top-color: #FCB322 !important;
}
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-red {
border-color: transparent transparent #ff6c60;
border-bottom-color: #ff6c60 !important;
border-top-color: #ff6c60 !important;
}
.notify-row .dropdown-menu > li > a {
border-bottom: 1px solid #EBEBEB !important;
font-size: 12px;
list-style: none;
padding: 15px 10px !important;
width: 100%;
display: inline-block;
}
.notify-row .dropdown-menu li a:hover {
background-color: #F7F8F9 !important; background-color: #F7F8F9 !important;
color: #2E2E2E; color: #2E2E2E;
} }
.dropdown-menu.extended li p { .notify-row .dropdown-menu .label {
background-color: #F1F2F7; padding: 0.5em 0.8em;
color: #666666;
margin: 0;
padding: 10px;
border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
}
.dropdown-menu.extended li p.green {
background-color: #a9d86e;
color: #fff;
} }
.dropdown-menu.extended li p.yellow { .notify-row .dropdown-menu .label.label-danger {
background-color: #fcb322; background-color: #FF6C60;
}
.notify-row .dropdown-menu p {
background-color: #F1F2F7;
color: #fff; color: #fff;
margin: 0;
padding: 10px;
border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
} }
.dropdown-menu.extended li p.red { .notify-row .dropdown-menu p.green {
background-color: #ff6c60; background-color: #a9d86e;
color: #fff; }
.notify-row .dropdown-menu p.yellow {
background-color: #fcb322;
}
.notify-row .dropdown-menu p.red {
background-color: #ff6c60;
}
.notify-row .dropdown-menu.tasks-bar .desc {
font-size: 13px;
font-weight: normal;
} }
.dropdown-menu.extended .progress { .notify-row .dropdown-menu.tasks-bar .percent {
margin-bottom: 0 !important; display: inline-block;
height: 10px; float: right;
} font-size: 13px;
font-weight: 600;
padding-left: 10px;
margin-top: -4px;
}
.dropdown-menu.tasks-bar .task-info .desc { .notify-row .dropdown-menu.tasks-bar .progress {
font-size: 13px; margin-bottom: 0 !important;
font-weight: normal; height: 10px;
} }
.dropdown-menu.tasks-bar .task-info .percent { .notify-row .dropdown-menu.inbox .photo img {
display: inline-block; border-radius: 2px 2px 2px 2px;
float: right; float: left;
font-size: 13px; height: 42px;
font-weight: 600; margin-right: 4px;
padding-left: 10px; width: 42px;
margin-top: -4px; border: solid 1px #EBEBEB;
} border-radius: 3px;
}
.dropdown-menu.inbox li a .photo img { .notify-row .dropdown-menu.inbox .subject {
border-radius: 2px 2px 2px 2px; display: block;
float: left; }
height: 42px;
margin-right: 4px;
width: 42px;
border: solid 1px #EBEBEB;
border-radius: 3px;
}
.dropdown-menu.inbox li a .subject { .notify-row .dropdown-menu.inbox .subject .from {
display: block; font-weight: 600;
} }
.dropdown-menu.inbox li a .message { .notify-row .dropdown-menu.inbox .subject .time {
display: block !important; font-size: 11px;
font-size: 11px; font-style: italic;
} font-weight: bold;
position: absolute;
right: 5px;
}
.dropdown-menu.inbox li a .subject .time { .notify-row .dropdown-menu.inbox .message {
font-size: 11px; display: block !important;
font-style: italic; font-size: 11px;
font-weight: bold; }
position: absolute;
right: 5px;
} .notify-row .dropdown-menu.notification .label {
display: inline-block;
height: 18px;
width: 20px;
padding: 5px;
margin-right: 5px;
}
.notify-row .dropdown-menu.notification .small {
font-size: 10px;
font-style: italic;
font-weight: bold;
float: right;
}
.dropdown-menu.menu { .dropdown-menu.menu {
top: 50px; top: 50px;
@ -432,87 +522,7 @@ a.logo {
.dropdown-menu.menu .menu-submenu li a i { .dropdown-menu.menu .menu-submenu li a i {
padding-right: 6px; padding-right: 6px;
} }
/*end*/
.notify-row {
margin-top: 4px;
padding-right: 10px;
}
.notify-row .badge {
position: absolute;
right: -10px;
top: -10px;
z-index: 100;
}
.notify-row .badge.bg-success {
background: #a9d86e;
}
.notify-row .badge.bg-important {
background: #ff6c60;
}
.notify-row .badge.bg-warning {
background: #FCB322;
}
.notify-row .notification span.label {
display: inline-block;
height: 18px;
width: 20px;
padding: 5px;
margin-right: 5px;
}
.notify-arrow {
border-style: solid;
border-width: 0 9px 9px;
height: 0;
margin-top: 0;
opacity: 0;
position: absolute;
right: 107px;
top: -18px;
transition: all 0.25s ease 0s;
width: 0;
z-index: 10;
margin-top: 10px;
opacity: 1;
}
.notify-arrow-green {
border-color: transparent transparent #a9d86e;
border-bottom-color: #a9d86e !important;
border-top-color: #a9d86e !important;
}
.notify-arrow-yellow {
border-color: transparent transparent #FCB322;
border-bottom-color: #FCB322 !important;
border-top-color: #FCB322 !important;
}
.notify-arrow-red {
border-color: transparent transparent #ff6c60;
border-bottom-color: #ff6c60 !important;
border-top-color: #ff6c60 !important;
}
.label-danger {
background-color: #FF6C60;
}
.label {
padding: 0.5em 0.8em;
}
.small {
font-size: 10px;
font-style: italic;
font-weight: bold;
float: right;
}
/*Login*/ /*Login*/
.form-signin { .form-signin {

446
Bootstrap.Admin/Views/Shared/Header.cshtml
View File

@ -10,7 +10,7 @@
@if (Model.Menus.Count() > 0 && Model.ShowMenu) @if (Model.Menus.Count() > 0 && Model.ShowMenu)
{ {
<ul class="dropdown-menu menu"> <ul class="dropdown-menu menu">
<div class="menu-arrow arrow-up"></div> <div class="arrow-up"></div>
<li> <li>
<div class="menu-submenu"> <div class="menu-submenu">
@foreach (var menu in Model.Menus) @foreach (var menu in Model.Menus)
@ -21,231 +21,225 @@
</li> </li>
</ul> </ul>
} }
<div class="top-nav"> <!-- notification start -->
<!--search & user info start--> <ul class="notify-row">
<ul class="nav pull-right top-menu"> <!-- settings start -->
<li> <li class="dropdown">
<input type="text" class="form-control search" placeholder="搜索"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
</li> <i class="fa fa-tasks"></i>
<li> <span class="badge bg-success">5</span>
<div class="nav notify-row"> </a>
<!-- notification start --> <ul class="dropdown-menu tasks-bar">
<ul class="nav top-menu"> <div class="notify-arrow notify-arrow-green"></div>
<!-- settings start --> <li>
<li class="dropdown"> <p class="green">您有 5 个待处理的任务</p>
<a data-toggle="dropdown" class="dropdown-toggle" href="#"> </li>
<i class="fa fa-tasks"></i> <li>
<span class="badge bg-success">5</span> <a href="#">
</a> <div>
<ul class="dropdown-menu extended tasks-bar"> <div class="desc">任务1</div>
<div class="notify-arrow notify-arrow-green"></div> <div class="percent">40%</div>
<li> </div>
<p class="green">您有 5 个待处理的任务</p> <div class="progress progress-striped">
</li> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<li> <span class="sr-only">40% Complete (success)</span>
<a href="#"> </div>
<div class="task-info"> </div>
<div class="desc">任务1</div> </a>
<div class="percent">40%</div> </li>
</div> <li>
<div class="progress progress-striped"> <a href="#">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <div>
<span class="sr-only">40% Complete (success)</span> <div class="desc">任务2</div>
</div> <div class="percent">60%</div>
</div> </div>
</a> <div class="progress progress-striped">
</li> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<li> <span class="sr-only">60% Complete (warning)</span>
<a href="#"> </div>
<div class="task-info"> </div>
<div class="desc">任务2</div> </a>
<div class="percent">60%</div> </li>
</div> <li>
<div class="progress progress-striped"> <a href="#">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <div>
<span class="sr-only">60% Complete (warning)</span> <div class="desc">任务3</div>
</div> <div class="percent">87%</div>
</div> </div>
</a> <div class="progress progress-striped">
</li> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
<li> <span class="sr-only">87% Complete</span>
<a href="#"> </div>
<div class="task-info"> </div>
<div class="desc">任务3</div> </a>
<div class="percent">87%</div> </li>
</div> <li>
<div class="progress progress-striped"> <a href="#">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%"> <div>
<span class="sr-only">87% Complete</span> <div class="desc">任务4</div>
</div> <div class="percent">33%</div>
</div> </div>
</a> <div class="progress progress-striped">
</li> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
<li> <span class="sr-only">33% Complete (danger)</span>
<a href="#"> </div>
<div class="task-info"> </div>
<div class="desc">任务4</div> </a>
<div class="percent">33%</div> </li>
</div> <li>
<div class="progress progress-striped"> <a href="#">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%"> <div>
<span class="sr-only">33% Complete (danger)</span> <div class="desc">任务5</div>
</div> <div class="percent">45%</div>
</div> </div>
</a> <div class="progress progress-striped active">
</li> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<li> <span class="sr-only">45% Complete</span>
<a href="#"> </div>
<div class="task-info"> </div>
<div class="desc">任务5</div> </a>
<div class="percent">45%</div> </li>
</div> <li>
<div class="progress progress-striped active"> <a href="#">查看所有任务</a>
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> </li>
<span class="sr-only">45% Complete</span> </ul>
</div> </li>
</div> <!-- settings end -->
</a> <!-- inbox dropdown start-->
</li> <li id="header_inbox_bar" class="dropdown">
<li class="external"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
<a href="#">查看所有任务</a> <i class="fa fa-envelope-o"></i>
</li> <span class="badge bg-important">4</span>
</ul> </a>
</li> <ul class="dropdown-menu inbox">
<!-- settings end --> <div class="notify-arrow notify-arrow-red"></div>
<!-- inbox dropdown start--> <li>
<li id="header_inbox_bar" class="dropdown"> <p class="red">您有 4 个待处理的消息</p>
<a data-toggle="dropdown" class="dropdown-toggle" href="#"> </li>
<i class="fa fa-envelope-o"></i> <li>
<span class="badge bg-important">4</span> <a href="#">
</a> <span class="photo"><img alt="avatar" src="../content/images/logo6.jpg"></span>
<ul class="dropdown-menu extended inbox"> <span class="subject">
<div class="notify-arrow notify-arrow-red"></div> <span class="from">Jianmin Yin</span>
<li> <span class="time">Just now</span>
<p class="red">您有 4 个待处理的消息</p> </span>
</li> <span class="message">你好, 测试消息</span>
<li> </a>
<a href="#"> </li>
<span class="photo"><img alt="avatar" src="../content/images/logo6.jpg"></span> <li>
<span class="subject"> <a href="#">
<span class="from">Jianmin Yin</span> <span class="photo"><img alt="avatar" src="../content/images/logo3.jpg"></span>
<span class="time">Just now</span> <span class="subject">
</span> <span class="from">张广坡</span>
<span class="message">你好, 测试消息</span> <span class="time">10 mins</span>
</a> </span>
</li> <span class="message">还是测试消息</span>
<li> </a>
<a href="#"> </li>
<span class="photo"><img alt="avatar" src="../content/images/logo3.jpg"></span> <li>
<span class="subject"> <a href="#">
<span class="from">张广坡</span> <span class="photo"><img alt="avatar" src="../content/images/logo.jpg"></span>
<span class="time">10 mins</span> <span class="subject">
</span> <span class="from">李琦</span>
<span class="message">还是测试消息</span> <span class="time">3 hrs</span>
</a> </span>
</li> <span class="message">继续测试</span>
<li> </a>
<a href="#"> </li>
<span class="photo"><img alt="avatar" src="../content/images/logo.jpg"></span> <li>
<span class="subject"> <a href="#">
<span class="from">李琦</span> <span class="photo"><img alt="avatar" src="../content/images/logo1.jpg"></span>
<span class="time">3 hrs</span> <span class="subject">
</span> <span class="from">刘老师</span>
<span class="message">继续测试</span> <span class="time">Just now</span>
</a> </span>
</li> <span class="message">统一管理</span>
<li> </a>
<a href="#"> </li>
<span class="photo"><img alt="avatar" src="../content/images/logo1.jpg"></span> <li>
<span class="subject"> <a href="#">查看所有消息</a>
<span class="from">刘老师</span> </li>
<span class="time">Just now</span> </ul>
</span> </li>
<span class="message">统一管理</span> <!-- inbox dropdown end -->
</a> <!-- notification dropdown start-->
</li> <li id="header_notification_bar" class="dropdown">
<li> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
<a href="#">查看所有消息</a> <i class="fa fa-bell-o"></i>
</li> <span class="badge bg-warning">5</span>
</ul> </a>
</li> <ul class="dropdown-menu notification">
<!-- inbox dropdown end --> <div class="notify-arrow notify-arrow-yellow"></div>
<!-- notification dropdown start--> <li>
<li id="header_notification_bar" class="dropdown"> <p class="yellow">您有 5 条新通知</p>
<a data-toggle="dropdown" class="dropdown-toggle" href="#"> </li>
<i class="fa fa-bell-o"></i> <li>
<span class="badge bg-warning">5</span> <a href="#">
</a> <span class="label label-danger"><i class="fa fa-bolt"></i></span>
<ul class="dropdown-menu extended notification"> 服务器超载
<div class="notify-arrow notify-arrow-yellow"></div> <span class="small italic">34 分钟</span>
<li> </a>
<p class="yellow">您有 5 条新通知</p> </li>
</li> <li>
<li> <a href="#">
<a href="#"> <span class="label label-warning"><i class="fa fa-bell"></i></span>
<span class="label label-danger"><i class="fa fa-bolt"></i></span> 服务器未响应
服务器超载 <span class="small italic">1 小时</span>
<span class="small italic">34 分钟</span> </a>
</a> </li>
</li> <li>
<li> <a href="#">
<a href="#"> <span class="label label-danger"><i class="fa fa-bolt"></i></span>
<span class="label label-warning"><i class="fa fa-bell"></i></span> 数据库内存过高
服务器未响应 <span class="small italic">4 小时</span>
<span class="small italic">1 小时</span> </a>
</a> </li>
</li> <li>
<li> <a href="#">
<a href="#"> <span class="label label-success"><i class="fa fa-plus"></i></span>
<span class="label label-danger"><i class="fa fa-bolt"></i></span> 新用户注册
数据库内存过高 <span class="small italic">刚刚</span>
<span class="small italic">4 小时</span> </a>
</a> </li>
</li> <li>
<li> <a href="#">
<a href="#"> <span class="label label-info"><i class="fa fa-bullhorn"></i></span>
<span class="label label-success"><i class="fa fa-plus"></i></span> 程序出现错误
新用户注册 <span class="small italic">10 分钟</span>
<span class="small italic">刚刚</span> </a>
</a> </li>
</li> <li>
<li> <a href="#">查看所有通知</a>
<a href="#"> </li>
<span class="label label-info"><i class="fa fa-bullhorn"></i></span> </ul>
程序出现错误 </li>
<span class="small italic">10 分钟</span> <!-- notification dropdown end -->
</a> </ul>
</li> <!-- notification end -->
<li> <!--search & user info start-->
<a href="#">查看所有通知</a> <ul class="nav pull-right top-menu">
</li> <li>
</ul> <input type="text" class="form-control search" placeholder="搜索">
</li> </li>
<!-- notification dropdown end --> <!-- user login dropdown start-->
</ul> <li class="dropdown">
<!-- notification end --> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
</div> <img alt="" src="../content/images/logo6.jpg">
</li> <span class="username">@Model.DisplayName</span>
<!-- user login dropdown start--> <b class="caret"></b>
<li class="dropdown"> <input id="userId" type="text" class="hide" value="@Model.UserID" />
<a data-toggle="dropdown" class="dropdown-toggle" href="#"> </a>
<img alt="" src="../content/images/logo6.jpg"> <ul class="dropdown-menu logout">
<span class="username">@Model.DisplayName</span> <div class="arrow-up"></div>
<b class="caret"></b> <li><a href="#"><i class=" fa fa-suitcase"></i>个人中心</a></li>
<input id="userId" type="text" class="hide" value="@Model.UserID" /> <li><a href="~/Admin"><i class="fa fa-cog"></i>设置</a></li>
</a> <li><a href="#"><i class="fa fa-bell-o"></i>通知<span class="badge bg-success">5</span></a></li>
<ul class="dropdown-menu extended logout"> <li><a href="~/Home/Logout"><i class="fa fa-key"></i>注销</a></li>
<div class="arrow-up"></div> </ul>
<li><a href="#"><i class=" fa fa-suitcase"></i>个人中心</a></li> </li>
<li><a href="~/Admin"><i class="fa fa-cog"></i>设置</a></li> <!-- user login dropdown end -->
<li><a href="#"><i class="fa fa-bell-o"></i>通知<span class="badge bg-success">5</span></a></li> </ul>
<li><a href="~/Home/Logout"><i class="fa fa-key"></i>注销</a></li> <!--search & user info end-->
</ul>
</li>
<!-- user login dropdown end -->
</ul>
<!--search & user info end-->
</div>
<!--breadcrumbs start --> <!--breadcrumbs start -->
<ul class="breadcrumb"> <ul class="breadcrumb">
<li><a href="@Url.Content(Model.HomeUrl)"><i class="fa fa-home"></i>首页</a></li> <li><a href="@Url.Content(Model.HomeUrl)"><i class="fa fa-home"></i>首页</a></li>