From ac7997960db2089aea29244490704edcef1211a7 Mon Sep 17 00:00:00 2001
From: Argo-MacBookPro <Argo@163.com>
Date: Thu, 9 Aug 2018 22:36:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9BUG=EF=BC=9A=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84Header=E5=B8=83=E5=B1=80=E4=BD=BF=E7=94=A8flex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Bootstrap.Admin/Views/Shared/Header.cshtml    | 210 ++++----
 Bootstrap.Admin/wwwroot/css/nprogress.css     |   2 +-
 .../wwwroot/css/site-responsive.css           |  19 +-
 Bootstrap.Admin/wwwroot/css/site.css          | 458 ++++++------------
 Bootstrap.Admin/wwwroot/css/theme.css         |  62 +++
 Bootstrap.Admin/wwwroot/js/common-scripts.js  |  25 +-
 6 files changed, 327 insertions(+), 449 deletions(-)

diff --git a/Bootstrap.Admin/Views/Shared/Header.cshtml b/Bootstrap.Admin/Views/Shared/Header.cshtml
index e28bf2e2..e49e0ff9 100644
--- a/Bootstrap.Admin/Views/Shared/Header.cshtml
+++ b/Bootstrap.Admin/Views/Shared/Header.cshtml
@@ -1,114 +1,108 @@
 @model Bootstrap.Admin.Models.HeaderBarModel
 <header class="header">
-    <div class="bg">
-    </div>
-    <a id="navbar" href="#" class="sidebar-toggle-box">
-        <i class="fa fa-bars"></i>
-        <span id="websiteTitle">@Model.Title</span>
-    </a>
-    @if (User.IsInRole("Administrators"))
-    {
-        <ul class="notify-row">
-            <!-- tasks start -->
-            <li class="dropdown">
-                <a data-toggle="dropdown" href="#">
-                    <i class="fa fa-tasks"></i>
-                    <span id="msgHeaderTaskBadge" class="badge badge-pill bg-success"></span>
-                </a>
-                <ul class="dropdown-menu tasks-bar">
-                    <li class="notify-arrow notify-arrow-green"></li>
-                    <li id="msgHeaderTaskContent">
-                        <p>您有 <span id="msgHeaderTask">0</span> 个未完成的任务</p>
-                    </li>
-                    <li>
-                        <a href="~/Admin/Tasks">查看所有任务</a>
-                    </li>
-                </ul>
-            </li>
-            <!-- tasks end -->
-            <!-- message dropdown start-->
-            <li class="dropdown">
-                <a data-toggle="dropdown" href="#">
-                    <i class="fa fa-envelope"></i>
-                    <span id="msgHeaderMsgBadge" class="badge badge-pill bg-important"></span>
-                </a>
-                <ul class="dropdown-menu inbox">
-                    <li class="notify-arrow notify-arrow-red"></li>
-                    <li id="msgHeaderMsgContent">
-                        <p>您有 <span id="msgHeaderMsg">0</span> 个未读的消息</p>
-                    </li>
-                    <li>
-                        <a href="~/Admin/Messages">查看所有消息</a>
-                    </li>
-                </ul>
-            </li>
-            <!-- message dropdown end -->
-            <!-- users dropdown start-->
-            <li class="dropdown">
-                <a data-toggle="dropdown" href="#">
-                    <i class="fa fa-user-plus"></i>
-                    <span id="msgHeaderUserBadge" class="badge badge-pill bg-user"></span>
-                </a>
-                <ul class="dropdown-menu users">
-                    <li class="notify-arrow notify-arrow-user"></li>
-                    <li id="msgHeaderUserContent">
-                        <p>您有 <span id="msgHeaderUser">0</span> 条新用户通知</p>
-                    </li>
-                    <li>
-                        <a href="~/Admin/Notifications">查看所有通知</a>
-                    </li>
-                </ul>
-            </li>
-            <!-- users dropdown end -->
-            <!-- apps dropdown start-->
-            <li class="dropdown">
-                <a data-toggle="dropdown" href="#">
-                    <i class="fa fa-bug"></i>
-                    <span id="msgHeaderAppBadge" class="badge badge-pill bg-warning"></span>
-                </a>
-                <ul class="dropdown-menu notification">
-                    <li class="notify-arrow notify-arrow-yellow"></li>
-                    <li id="msgHeaderAppContent">
-                        <p>您有 <span id="msgHeaderApp">0</span> 条程序异常通知</p>
-                    </li>
-                    <li>
-                        <a href="~/Admin/Exceptions">查看所有异常</a>
-                    </li>
-                </ul>
-            </li>
-            <!-- apps dropdown end -->
-            <!-- db dropdown start-->
-            <li class="dropdown">
-                <a data-toggle="dropdown" href="#">
-                    <i class="fa fa-database"></i>
-                    <span id="msgHeaderDbBadge" class="badge badge-pill bg-db"></span>
-                </a>
-                <ul class="dropdown-menu dbs">
-                    <li class="notify-arrow notify-arrow-db"></li>
-                    <li id="msgHeaderDbContent">
-                        <p>您有 <span id="msgHeaderDb">0</span> 条数据库异常通知</p>
-                    </li>
-                    <li>
-                        <a href="~/Admin/Exceptions">查看所有异常</a>
-                    </li>
-                </ul>
-            </li>
-            <!-- db dropdown end -->
-        </ul>
-    }
-    <div class="dropdown">
-        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
-            <img id="headerIcon" alt="" src="@Url.Content(Model.Icon)">
-            <span id="userDisplayName" data-userName="@Model.UserName" class="username">@Model.DisplayName</span>
-            <b class="caret"></b>
+    <div class="bg"></div>
+    <div class="d-flex align-items-center">
+        <a id="navbar" href="#" class="sidebar-toggle-box">
+            <i class="fa fa-bars"></i>
+            <span id="websiteTitle">@Model.Title</span>
         </a>
-        <ul class="dropdown-menu dropdown-menu-right">
-            <li></li>
-            <li><a href="~/Admin/Profiles"><i class=" fa fa-suitcase"></i>个人中心</a></li>
-            <li><a href="~/Admin/Index"><i class="fa fa-cog"></i>设置</a></li>
-            <li><a href="~/Admin/Notifications"><i class="fa fa-bell"></i>通知<span id="logoutNoti" class="badge badge-pill"></span></a></li>
-            <li><a href="~/Account/Logout"><i class="fa fa-key"></i>注销</a></li>
-        </ul>
+        @if (User.IsInRole("Administrators"))
+        {
+            <div class="nav">
+                <!-- tasks start -->
+                <div class="dropdown">
+                    <a data-toggle="dropdown" class="shadow-primary" href="#">
+                        <i class="fa fa-tasks"></i>
+                        <span id="msgHeaderTaskBadge" class="badge badge-pill badge-primary"></span>
+                    </a>
+                    <div class="dropdown-menu">
+                        <div class="dropdown-arrow arrow-primary"></div>
+                        <div id="msgHeaderTaskContent" class="dropdown-header bg-primary">您有 <span id="msgHeaderTask">0</span> 个未完成的任务</div>
+                        <div class="dropdown-footer">
+                            <a href="~/Admin/Tasks">查看所有任务</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- tasks end -->
+                <!-- message dropdown start-->
+                <div class="dropdown">
+                    <a data-toggle="dropdown" class="shadow-info" href="#">
+                        <i class="fa fa-envelope"></i>
+                        <span id="msgHeaderMsgBadge" class="badge badge-pill badge-info"></span>
+                    </a>
+                    <div class="dropdown-menu">
+                        <div class="dropdown-arrow arrow-info"></div>
+                        <div id="msgHeaderMsgContent" class="dropdown-header bg-info">您有 <span id="msgHeaderMsg">0</span> 个未读的消息</div>
+                        <div class="dropdown-footer">
+                            <a href="~/Admin/Messages">查看所有消息</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- message dropdown end -->
+                <!-- users dropdown start-->
+                <div class="dropdown">
+                    <a data-toggle="dropdown" class="shadow-success" href="#">
+                        <i class="fa fa-user-plus"></i>
+                        <span id="msgHeaderUserBadge" class="badge badge-pill badge-success"></span>
+                    </a>
+                    <div class="dropdown-menu">
+                        <div class="dropdown-arrow arrow-success"></div>
+                        <div id="msgHeaderUserContent" class="dropdown-header bg-success">您有 <span id="msgHeaderUser">0</span> 条新用户通知</div>
+                        <div class="dropdown-footer">
+                            <a href="~/Admin/Notifications">查看所有通知</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- users dropdown end -->
+                <!-- apps dropdown start-->
+                <div class="dropdown">
+                    <a data-toggle="dropdown" class="shadow-warning" href="#">
+                        <i class="fa fa-bug"></i>
+                        <span id="msgHeaderAppBadge" class="badge badge-pill badge-warning"></span>
+                    </a>
+                    <div class="dropdown-menu">
+                        <div class="dropdown-arrow arrow-warning"></div>
+                        <div id="msgHeaderAppContent" class="dropdown-header bg-warning">您有 <span id="msgHeaderApp">0</span> 条程序异常通知</div>
+                        <div class="dropdown-footer">
+                            <a href="~/Admin/Exceptions">查看所有异常</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- apps dropdown end -->
+                <!-- db dropdown start-->
+                <div class="dropdown">
+                    <a data-toggle="dropdown" class="shadow-danger" href="#">
+                        <i class="fa fa-database"></i>
+                        <span id="msgHeaderDbBadge" class="badge badge-pill badge-danger"></span>
+                    </a>
+                    <div class="dropdown-menu">
+                        <div class="dropdown-arrow arrow-danger"></div>
+                        <div id="msgHeaderDbContent" class="dropdown-header bg-danger">您有 <span id="msgHeaderDb">0</span> 条数据库异常通知</div>
+                        <div class="dropdown-footer">
+                            <a href="~/Admin/Exceptions">查看所有异常</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- db dropdown end -->
+            </div>
+        }
+        <div class="dropdown userinfo">
+            <a data-toggle="dropdown" class="dropdown-toggle shadow-default" href="#">
+                <img id="headerIcon" alt="" src="@Url.Content(Model.Icon)">
+                <span id="userDisplayName" data-userName="@Model.UserName" class="username">@Model.DisplayName</span>
+                <b class="caret"></b>
+            </a>
+            <div class="dropdown-menu dropdown-menu-right">
+                <div class="dropdown-item">
+                    <a href="~/Admin/Profiles"><i class=" fa fa-suitcase"></i>个人中心</a>
+                    <a href="~/Admin/Index"><i class="fa fa-cog"></i>设置</a>
+                    <a href="~/Admin/Notifications"><i class="fa fa-bell"></i>通知<span id="logoutNoti" class="badge badge-pill badge-success"></span></a>
+                </div>
+                <div class="dropdown-item">
+                    <a href="~/Account/Logout"><i class="fa fa-key"></i>注销</a>
+                </div>
+            </div>
+        </div>
     </div>
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
diff --git a/Bootstrap.Admin/wwwroot/css/nprogress.css b/Bootstrap.Admin/wwwroot/css/nprogress.css
index d788862a..cf93dc37 100644
--- a/Bootstrap.Admin/wwwroot/css/nprogress.css
+++ b/Bootstrap.Admin/wwwroot/css/nprogress.css
@@ -32,7 +32,7 @@
         display: block;
         position: fixed;
         z-index: 1031;
-        top: 22px;
+        top: 20px;
         right: 17px;
     }
 
diff --git a/Bootstrap.Admin/wwwroot/css/site-responsive.css b/Bootstrap.Admin/wwwroot/css/site-responsive.css
index b726c3f5..60aa97b5 100644
--- a/Bootstrap.Admin/wwwroot/css/site-responsive.css
+++ b/Bootstrap.Admin/wwwroot/css/site-responsive.css
@@ -1,6 +1,6 @@
 @media (min-width: 568px) {
-    .notify-row {
-        display: inline-block;
+    .sidebar-toggle-box span {
+        display: inline;
     }
 
     .cache-item :nth-child(2) {
@@ -15,22 +15,25 @@
     }
 }
 
-@media (min-width: 736px) {
-    .sidebar-toggle-box span {
-        display: inline;
-    }
-}
-
 @media (min-width: 768px) {
     html, body {
         height: 100%;
         overflow: hidden;
     }
 
+    .sidebar-toggle-box {
+        flex: 0 1 auto;
+    }
+
     .header {
         border-bottom: none;
     }
 
+        .header .nav {
+            display: flex;
+            flex: 1 1 auto;
+        }
+
     .header, .site-footer {
         position: fixed;
         z-index: 10;
diff --git a/Bootstrap.Admin/wwwroot/css/site.css b/Bootstrap.Admin/wwwroot/css/site.css
index bfe4a859..d3068c31 100644
--- a/Bootstrap.Admin/wwwroot/css/site.css
+++ b/Bootstrap.Admin/wwwroot/css/site.css
@@ -19,19 +19,26 @@ a, a:hover, a:focus {
     outline: none;
 }
 
-.dropdown-menu {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176);
-    padding: 0;
+.dropdown-menu a {
+    transition: all .25s linear;
+    padding: 6px 20px;
+    display: block;
 }
 
-    .dropdown-menu a {
-        transition: all .25s linear;
-        padding: 6px 20px;
-        display: block;
-    }
+.dropdown-menu .divider {
+    margin: 1px 0;
+}
 
-    .dropdown-menu .divider {
-        margin: 1px 0;
+/*Title*/
+.sidebar-toggle-box {
+    font-size: 1.25rem;
+    color: #333;
+    flex: 1 1 auto;
+    padding: 12px 0;
+}
+
+    .sidebar-toggle-box span {
+        display: none;
     }
 
 .header {
@@ -50,113 +57,137 @@ a, a:hover, a:focus {
         margin: 0 -15px;
     }
 
-    .header > .dropdown {
-        margin-top: 7px;
-        float: right;
+    .header .nav {
+        display: none;
+        margin-left: 15px;
     }
 
-        .header > .dropdown > a {
-            border: 1px solid #eee;
-            border-radius: 4px;
-            padding: 6px;
-            background: none;
-            margin-right: 0;
-            display: block;
-            white-space: nowrap;
-            color: #777;
+        .header .nav .dropdown {
+            margin-right: 6px;
         }
 
-            .header > .dropdown > a:hover, .header > .dropdown.show > a, .notify-row > li > a:hover {
-                border: 1px solid #337ab7;
-                color: #333;
-                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-                box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-            }
+    .header [data-toggle="dropdown"] {
+        border: 1px solid #eee;
+        border-radius: 4px;
+        padding: 6px 12px;
+        color: #777;
+    }
 
-            .header > .dropdown > a span {
-                display: inline-block;
-                min-width: 18px;
-            }
-
-            .header > .dropdown > a img {
-                height: 29px;
-                width: 29px;
-            }
-
-        .header > .dropdown .dropdown-menu {
-            width: 268px;
-            margin-top: 10px;
+        .header [data-toggle="dropdown"]:hover {
+            color: #333;
         }
 
-            .header > .dropdown .dropdown-menu li {
-                text-align: center;
-                width: 33.3%;
-                float: left;
-            }
+    .header .badge {
+        position: absolute;
+        right: -6px;
+        top: -14px;
+        opacity: 0.8;
+    }
 
-                .header > .dropdown .dropdown-menu li:first-child {
-                    border-color: transparent transparent #e8e8e8;
-                    border-bottom-color: #e8e8e8;
-                    border-top-color: #e8e8e8;
-                    border-style: solid;
-                    border-width: 0 7px 7px;
-                    position: absolute;
-                    right: 20px;
-                    top: -8px;
-                    width: 0;
-                }
+    .header .dropdown-item.active, .header .dropdown-item:active {
+        color: #fff;
+        text-decoration: none;
+        background-color: transparent;
+    }
 
-                .header > .dropdown .dropdown-menu li:last-child {
-                    width: 100%;
-                }
-
-                    .header > .dropdown .dropdown-menu li:last-child a {
-                        color: #ca3a39;
-                        border-radius: 0 0 0.15rem 0.15rem;
-                        background: #a9d96c;
-                        background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
-                    }
-
-                        .header > .dropdown .dropdown-menu li:last-child a:hover {
-                            color: #d20100;
-                            background: #6d9046;
-                            background-image: linear-gradient(to bottom, #a9d96c 0%, #6d9046 100%);
-                        }
-
-                .header > .dropdown .dropdown-menu li a {
-                    color: #777;
-                    padding: 15px 10px;
-                    display: block;
-                }
-
-                    .header > .dropdown .dropdown-menu li a:hover {
-                        color: #333;
-                    }
-
-                    .header > .dropdown .dropdown-menu li a i {
-                        font-size: 1.7rem;
-                        display: block;
-                        margin-bottom: 4px;
-                    }
-
-                    .header > .dropdown .dropdown-menu li a .badge {
-                        position: absolute;
-                        right: 20px;
-                        top: 4px;
-                        background: #5cb85c;
-                    }
-
-/*Title*/
-.sidebar-toggle-box {
-    font-size: 1.25rem;
-    color: #333;
-    float: left;
-    margin-top: 15px;
+.nav .dropdown-menu {
+    width: 235px;
+    border: none;
+    margin-left: -74px;
+    margin-top: 12px;
 }
 
-    .sidebar-toggle-box span, .notify-row {
-        display: none;
+.nav .dropdown-arrow {
+    border-style: solid;
+    border-width: 0 9px 9px;
+    position: absolute;
+    left: 85px;
+    top: -9px;
+}
+
+.nav .dropdown-header {
+    color: #fff;
+    padding: 10px;
+    border-radius: 4px 4px 0 0;
+}
+
+.nav .dropdown-footer {
+    padding: 6px 0;
+}
+
+.nav .dropdown-item {
+    display: flex;
+    border-bottom: 1px solid #EBEBEB;
+    padding: 10px 12px;
+    font-size: 0.75rem;
+}
+
+    .nav .dropdown-item:hover {
+        background-color: #93c9e8;
     }
+
+    .nav .dropdown-item > :nth-child(2) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        flex: 1 1 auto;
+        padding: 0 6px;
+    }
+
+    .nav .dropdown-item .small {
+        font-weight: bold;
+    }
+
+.userinfo img {
+    height: 29px;
+    width: 29px;
+}
+
+.userinfo .dropdown-toggle {
+    display: block;
+    padding: 6px;
+}
+
+.userinfo .dropdown-item {
+    display: flex;
+    flex-wrap: wrap;
+    width: 270px;
+    padding: 0;
+    justify-content: space-around;
+}
+
+    .userinfo .dropdown-item a {
+        text-align: center;
+        color: #777;
+        padding: 15px 10px;
+        width: 33.333%;
+        flex: 1 1 auto;
+    }
+
+        .userinfo .dropdown-item a i {
+            font-size: 1.7rem;
+            display: block;
+            margin-bottom: 4px;
+        }
+
+    .userinfo .dropdown-item:last-child {
+        border-radius: 0 0 4px 4px;
+    }
+
+        .userinfo .dropdown-item:last-child a {
+            color: #ca3a39;
+            border-radius: 0 0 0.15rem 0.15rem;
+            background: #a9d96c;
+            background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
+            width: 100%;
+        }
+
+.userinfo .badge {
+    left: 234px;
+    right: auto;
+    top: 6px;
+}
 /*end title*/
 
 .site-footer {
@@ -187,230 +218,15 @@ a, a:hover, a:focus {
     .go-top i {
         color: #2A3542;
     }
-
 /*notify bar*/
-.notify-row {
-    margin-top: 20px;
-    padding-left: 20px;
-    font-size: 1rem;
-}
-
-    .notify-row .bg-success, .notify-row .dropdown-menu.tasks-bar li p {
-        background: #a9d86e;
-    }
-
-    .notify-row .bg-important, .notify-row .dropdown-menu.inbox li p {
-        background: #ff6c60;
-    }
-
-    .notify-row .bg-user, .notify-row .dropdown-menu.users li p {
-        background: #5cb85c;
-    }
-
-    .notify-row .bg-warning, .notify-row .dropdown-menu.notification li p {
-        background: #FCB322;
-    }
-
-    .notify-row .bg-db, .notify-row .dropdown-menu.dbs li p {
-        background: #d03633;
-    }
-
-    .notify-row > li {
-        float: left;
-        position: relative;
-        display: block;
-    }
-
-        .notify-row > li > a {
-            color: #666666;
-            border-radius: 4px;
-            -webkit-border-radius: 4px;
-            border: 1px solid #f0f0f8;
-            padding: 2px 6px;
-            margin-right: 15px;
-        }
-
-    .notify-row .badge {
-        position: absolute;
-        top: -14px;
-        left: 24px;
-        z-index: 1;
-        opacity: 0.8;
-    }
-
-    .notify-row .dropdown-menu {
-        width: 235px;
-        border: none;
-        margin-left: -74px;
-        margin-top: 12px;
-    }
-
-        .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;
-                border-top-color: #a9d86e;
-            }
-
-            .notify-row .dropdown-menu .notify-arrow.notify-arrow-yellow {
-                border-color: transparent transparent #FCB322;
-                border-bottom-color: #FCB322;
-                border-top-color: #FCB322;
-            }
-
-            .notify-row .dropdown-menu .notify-arrow.notify-arrow-red {
-                border-color: transparent transparent #ff6c60;
-                border-bottom-color: #ff6c60;
-                border-top-color: #ff6c60;
-            }
-
-            .notify-row .dropdown-menu .notify-arrow.notify-arrow-db {
-                border-color: transparent transparent #d03633;
-                border-bottom-color: #d03633;
-                border-top-color: #d03633;
-            }
-
-            .notify-row .dropdown-menu .notify-arrow.notify-arrow-user {
-                border-color: transparent transparent #5cb85c;
-                border-bottom-color: #5cb85c;
-                border-top-color: #5cb85c;
-            }
-
-        .notify-row .dropdown-menu li:last-child a {
-            border-bottom: 0;
-            padding-left: 12px;
-            font-size: 0.875rem;
-        }
-
-        .notify-row .dropdown-menu li a {
-            border-bottom: 1px solid #EBEBEB;
-            list-style: none;
-            padding: 12px 6px;
-            display: block;
-            font-size: 0.75rem;
-        }
-
-        .notify-row .dropdown-menu li:not(:last-child) a:hover {
-            color: #fff;
-            background-color: #4b9fd0;
-        }
-
-        .notify-row .dropdown-menu p {
-            color: #fff;
-            margin: 0;
-            padding: 10px;
-            border-radius: 4px 4px 0 0;
-        }
-
-        .notify-row .dropdown-menu .content {
-            position: absolute;
-            left: 36px;
-            right: 44px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            display: inline-block;
-        }
-
-        .notify-row .dropdown-menu .label {
-            width: 20px;
-            padding: 5px;
-        }
-
-        .notify-row .dropdown-menu .small {
-            font-style: italic;
-            font-weight: bold;
-            float: right;
-            font-size: 0.75rem;
-            padding-right: 5px;
-        }
-
-        .notify-row .dropdown-menu.tasks-bar .desc {
-            font-size: 1.3rem;
-            font-weight: normal;
-            display: block;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        .notify-row .dropdown-menu.tasks-bar .percent {
-            display: inline-block;
-            float: right;
-            font-size: 1.3rem;
-            font-weight: 600;
-        }
-
-        .notify-row .dropdown-menu.tasks-bar .progress {
-            margin-top: 4px;
-            height: 10px;
-            margin-right: 34px;
-            margin-bottom: 0;
-        }
-
-        .notify-row .dropdown-menu.inbox .photo img {
-            border-radius: 2px 2px 2px 2px;
-            float: left;
-            height: 42px;
-            margin-right: 4px;
-            width: 42px;
-            border: solid 1px #EBEBEB;
-            border-radius: 3px;
-        }
-
-        .notify-row .dropdown-menu.inbox .subject {
-            display: block;
-        }
-
-            .notify-row .dropdown-menu.inbox .subject .from {
-                font-weight: 600;
-            }
-
-            .notify-row .dropdown-menu.inbox .subject .time {
-                font-size: 1.1rem;
-                font-style: italic;
-                font-weight: bold;
-                float: right;
-            }
-
-        .notify-row .dropdown-menu.inbox .message {
-            font-size: 1.1rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            position: absolute;
-            right: 6px;
-            left: 56px;
-            margin-top: 2px;
-        }
-/*end*/
 
 .breadcrumb {
-    position: absolute;
-    top: 60px;
-    left: 15px;
-    right: 15px;
     border: solid 1px #ddd;
     border-width: 1px 0 0 0;
     background-color: transparent;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    padding: 7.5px 10px;
+    padding: 8px 10px;
 }
 
     .breadcrumb i {
diff --git a/Bootstrap.Admin/wwwroot/css/theme.css b/Bootstrap.Admin/wwwroot/css/theme.css
index 49bdb937..bcd905fc 100644
--- a/Bootstrap.Admin/wwwroot/css/theme.css
+++ b/Bootstrap.Admin/wwwroot/css/theme.css
@@ -136,3 +136,65 @@ input.pending {
 .close:focus {
     outline: none;
 }
+
+.dropdown-menu {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176);
+    padding: 0;
+}
+
+.arrow-primary {
+    border-color: transparent transparent #007bff;
+}
+
+.arrow-success {
+    border-color: transparent transparent #28a745;
+}
+
+.arrow-info {
+    border-color: transparent transparent #17a2b8;
+}
+
+.arrow-warning {
+    border-color: transparent transparent #ffc107;
+}
+
+.arrow-danger {
+    border-color: transparent transparent #dc3545;
+}
+
+.shadow-primary:hover {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 123, 255, 0.5);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 123, 255, 0.5);
+    border-color: #007bff !important;
+}
+
+.shadow-success:hover {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
+    border-color: #28a745 !important;
+}
+
+.shadow-info:hover {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
+    border-color: #17a2b8 !important;
+}
+
+.shadow-warning:hover {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
+    border-color: #ffc107 !important;
+}
+
+.shadow-danger:hover {
+    border: 1px solid #dc3545 !important;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
+}
+
+.show .shadow-default, .shadow-default:hover {
+    border: 1px solid #337ab7 !important;
+    color: #333;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+}
diff --git a/Bootstrap.Admin/wwwroot/js/common-scripts.js b/Bootstrap.Admin/wwwroot/js/common-scripts.js
index c50183f5..60e58d02 100644
--- a/Bootstrap.Admin/wwwroot/js/common-scripts.js
+++ b/Bootstrap.Admin/wwwroot/js/common-scripts.js
@@ -49,8 +49,8 @@
     });
 
     $.extend({
-        pullNotification: function () {
-            if ($('.notify-row').length == 0) return;
+        pullNotification: function (nav) {
+            if (nav.length == 0) return;
 
             var uri = "ws://" + window.location.host + $.formatUrl("WS");
             var socket = new WebSocket(uri);
@@ -68,23 +68,26 @@
                             break;
                     }
                 };
-                if (result.length > 0) $.reloadWidget();
+                if (result.length > 0) nav.reloadWidget();
             };
-        },
+        }
+    });
+    $.fn.extend({
         reloadWidget: function () {
-            if ($('.notify-row').length == 0) return;
+            if (this.length === 0) return this;
+            var that = this;
             $.bc({
                 url: Notifications.url,
                 swal: false,
                 method: 'GET',
                 callback: function (result) {
                     $('#logoutNoti').text(result.NewUsersCount);
-                    $('.notify-row').resetWidget();
+                    that.resetWidget();
                     // tasks
                     // new users
                     $('#msgHeaderTask').text(result.TasksCount);
                     $('#msgHeaderTaskBadge').text(result.TasksCount);
-                    var htmlUserTemplate = '<li><a href="../Admin/Tasks?id={3}"><span class="desc">{0}-{2}</span><span class="percent">{1}%</span></span><div class="progress progress-striped"><div class="progress-bar" role="progressbar" aria-valuenow="{1}" aria-valuemin="0" aria-valuemax="100" style="width: {1}%"><span class="sr-only">{1}% 完成</span></div></div></a></li>';
+                    var htmlUserTemplate = '<a class="dropdown-item" href="../Admin/Tasks?id={3}"><span class="desc">{0}-{2}</span><span class="percent">{1}%</span></span><div class="progress progress-striped"><div class="progress-bar" role="progressbar" aria-valuenow="{1}" aria-valuemin="0" aria-valuemax="100" style="width: {1}%"><span class="sr-only">{1}% 完成</span></div></div></a>';
                     var html = result.Tasks.map(function (u) {
                         return $.format(htmlUserTemplate, u.TaskName, u.TaskProgress, u.AssignDisplayName, u.Id);
                     }).join('');
@@ -102,7 +105,7 @@
                     // apps
                     $('#msgHeaderApp').text(result.AppExceptionsCount);
                     $('#msgHeaderAppBadge').text(result.AppExceptionsCount);
-                    htmlUserTemplate = '<li><a href="../Admin/Exceptions"><span class="label label-warning"><i class="fa fa-bug"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a></li>';
+                    htmlUserTemplate = '<a class="dropdown-item" href="../Admin/Exceptions"><span class="label label-warning"><i class="fa fa-bug"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a>';
                     html = result.Apps.map(function (u) {
                         return $.format(htmlUserTemplate, u.ExceptionType, u.Message, u.Period);
                     }).join('');
@@ -111,7 +114,7 @@
                     // dbs
                     $('#msgHeaderDb').text(result.DbExceptionsCount);
                     $('#msgHeaderDbBadge').text(result.DbExceptionsCount);
-                    htmlUserTemplate = '<li><a href="../Admin/Exceptions"><span class="label label-danger"><i class="fa fa-bolt"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a></li>';
+                    htmlUserTemplate = '<a class="dropdown-item" href="../Admin/Exceptions"><span class="label label-danger"><i class="fa fa-bolt"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a>';
                     html = result.Dbs.map(function (u) {
                         return $.format(htmlUserTemplate, u.ErrorPage, u.Message, u.Period);
                     }).join('');
@@ -127,6 +130,7 @@
                     $(html).insertAfter($('#msgHeaderMsgContent'));
                 }
             });
+            return this;
         }
     });
 })(jQuery);
@@ -200,6 +204,5 @@ $(function () {
     $('[data-toggle="dropdown"].dropdown-select').dropdown('select');
 
     // load widget data
-    $.reloadWidget();
-    $.pullNotification();
+    $.pullNotification($('.header .nav').reloadWidget());
 });
\ No newline at end of file