调整侧边栏开关

README.md

@@ -27,6 +27,8 @@
 - perfect-scrollbar
 
 ### 更新记录
+2019.03.22 调整侧边栏隐藏/显示操作，开关改为一直可见，侧边栏自动隐藏临界值调整为1024px
+
 2019.03.21 新增多级菜单，调整侧边栏一些样式(多级菜单的滚动条位置还需要观察)
 
 2019.03.19 调整logo，修复滚动条bug

css/style.min.css

@@ -2472,25 +2472,24 @@ dd, dt {
     width: 240px;
     font-weight: 500;
     background-color: #fff;
-    -webkit-transform: translateX(-240px);
-    transform: translateX(-240px);
-    -webkit-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-    -webkit-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    -webkit-transition-property: visibility, -webkit-transform;
-    transition-property: visibility, -webkit-transform;
-    transition-property: transform, visibility;
-    transition-property: transform, visibility, -webkit-transform;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transition: 0.3s transform;
+    transition: 0.3s transform;
+    transform: translateX(0);
     -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
+	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
     box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
 }
-.lyear-layout-sidebar.lyear-layout-sidebar-open {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+.lyear-layout-sidebar-close .lyear-layout-sidebar {
+    transform: translateX(-100%);
+    -webkit-box-shadow: none;
+	-moz-box-shadow: none;
+    box-shadow: none;
 }
-.lyear-layout-sidebar.lyear-layout-sidebar-visible {
-    visibility: visible;
+.lyear-layout-sidebar-close .lyear-layout-header,
+.lyear-layout-sidebar-close .lyear-layout-content {
+    padding-left: 0px;
 }
 .lyear-layout-sidebar-scroll {
 	height: -moz-calc(100% - 68px);
@@ -2499,6 +2498,32 @@ dd, dt {
     position: relative;
 }
 
+/* 侧边栏开关 */
+.lyear-aside-toggler {
+    margin-right: .25rem;
+    padding: .25rem .95rem .25rem .25rem;
+    line-height: 1.5;
+    cursor: pointer;
+}
+.lyear-aside-toggler .lyear-toggler-bar {
+    display: block;
+    height: 2px;
+    width: 20px;
+	background-color: #4d5259;
+    margin: 4px 0px;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+}
+.lyear-aside-toggler .lyear-toggler-bar:nth-child(2) {
+    width: 15px;
+}
+.lyear-aside-toggler:hover .lyear-toggler-bar:nth-child(2) {
+    width: 20px;
+}
+.lyear-layout-sidebar-close .lyear-aside-toggler .lyear-toggler-bar {
+    width: 20px;
+}
+
 /* logo */
 .sidebar-header {
     position: relative;
@@ -2603,24 +2628,6 @@ dd, dt {
     line-height: 24px;
 }
 
-/* 遮罩层 */
-.lyear-mask-modal {
-    background-color: rgba(0, 0, 0, 0.5);
-    height: 100%;
-    left: 0;
-    opacity: 1;
-    top: 0;
-    visibility: visible;
-    width: 100%;
-    z-index: 5;
-    position: fixed;
-    -webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-}
-
-
 /** ----------------------------------
  * 头部信息
  -------------------------------------- */
@@ -2630,8 +2637,12 @@ dd, dt {
     right: 0;
     left: 0;
     z-index: 4;
+    padding-left: 240px;
     background-color: #fff;
+    -webkit-transition: padding 0.3s;
+    transition: padding 0.3s;
     -webkit-box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
+    -moz-box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
     box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
 }
 .lyear-layout-header .navbar {
@@ -2639,6 +2650,9 @@ dd, dt {
     min-height: 64px;
     margin-bottom: 0;
     border: 0px;
+    -webkit-border-radius: 0px;
+    -moz-border-radius: 0px;
+    border-radius: 0px;
 }
 .lyear-layout-header .navbar-default {
     background-color: transparent;
@@ -2725,6 +2739,9 @@ dd, dt {
 	height: 100%;
 	width: 100%;
     padding-top: 68px;
+    padding-left: 240px;
+    -webkit-transition: padding 0.3s;
+    transition: padding 0.3s;
 }
 .lyear-layout-content .container-fluid {
     padding-top: 15px;
@@ -2885,33 +2902,37 @@ dd, dt {
 /** ----------------------------------
  * 响应式处理
  -------------------------------------- */
-@media screen and (max-width: 768px)
-{
+@media (max-width: 1024px) {
     .lyear-layout-sidebar {
-        -webkit-overflow-scrolling: touch;
-        overflow-x: hidden;
-        overflow-y: auto;
+        transform: translateX(-100%);
     }
-    .lyear-layout-sidebar:not(.lyear-layout-sidebar-open) {
+	.lyear-layout-header,
+    .lyear-layout-content {
+        padding-left: 0;
+    }
+	.lyear-layout-sidebar {
         -webkit-box-shadow: none;
+		-moz-webkit-box-shadow: none;
         box-shadow: none;
     }
-}
-@media screen and (min-width: 769px)
-{
-    .lyear-layout-sidebar {
-        visibility: visible;
-        -webkit-transform: translateX(0);
+	.lyear-layout-sidebar.lyear-aside-open {
         transform: translateX(0);
-        -webkit-transition: none;
-        transition: none;
-    }
-    .lyear-layout-header,
-    .lyear-layout-content {
-        padding-left: 240px;
     }
-    .navbar {
-        border-radius: 0;
+    /* 遮罩层 */
+    .lyear-mask-modal {
+        background-color: rgba(0, 0, 0, 0.5);
+        height: 100%;
+        left: 0;
+        opacity: 1;
+        top: 0;
+        visibility: visible;
+        width: 100%;
+        z-index: 5;
+        position: fixed;
+        -webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
     }
 }
 @media screen and (max-width: 767px) {

index.html

@@ -116,12 +116,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> 后台首页 </span>
           </div>
           

js/main.min.js

@@ -9,19 +9,21 @@ jQuery( function() {
 	});
     
     // 侧边栏
-    jQuery( '[data-toggle="layout"]' ).on( 'click', function() {
+    $(".lyear-aside-toggler").bind('click', function(){
+        $('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
+        $("body").toggleClass('lyear-layout-sidebar-close');
+        
         if ($('.lyear-mask-modal').length == 0) {
-            $( '<div class="lyear-mask-modal"></div>' ).prependTo('body');
+            $('<div class="lyear-mask-modal"></div>').prependTo('body');
+        } else {
+            $( '.lyear-mask-modal' ).remove();
         }
-		$( '.lyear-layout-sidebar' ).toggleClass( 'lyear-layout-sidebar-open' );
-		$( '.lyear-layout-sidebar' ).toggleClass( 'lyear-layout-sidebar-visible' );
-      
-        $( '.lyear-mask-modal' ).on( 'click', function() {
+        $('.lyear-mask-modal').on( 'click', function() {
             $( this ).remove();
-		    $( '.lyear-layout-sidebar' ).toggleClass( 'lyear-layout-sidebar-open' );
-		    $( '.lyear-layout-sidebar' ).toggleClass( 'lyear-layout-sidebar-visible' );
-	    });
-	});
+        	$('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
+            $('body').toggleClass('lyear-layout-sidebar-close');
+        });
+    });
     
 	// 侧边栏导航
 	$( '.nav-item-has-subnav > a' ).on( 'click', function() {

lyear-config-system.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 网站配置 </span>
           </div>
           

lyear-config-upload.html

@@ -98,12 +98,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 网站配置 </span>
           </div>
           

lyear_forms_checkbox.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 复选框 </span>
           </div>
           

lyear_forms_elements.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 表单 </span>
           </div>
           

lyear_forms_radio.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 单选框 </span>
           </div>
           

lyear_forms_switch.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 开关 </span>
           </div>
           

lyear_js_chartjs.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 图表 </span>
           </div>
           

lyear_js_colorpicker.html

@@ -98,12 +98,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 颜色选择器 </span>
           </div>
           

lyear_js_datepicker.html

@@ -100,12 +100,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 日期选择器 </span>
           </div>
           

lyear_js_jconfirm.html

@@ -98,12 +98,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 对话框 </span>
           </div>
           

lyear_js_notify.html

@@ -97,12 +97,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 通知消息 </span>
           </div>
           

lyear_js_sliders.html

@@ -98,12 +98,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 滑块 </span>
           </div>
           

lyear_js_tags_input.html

@@ -98,12 +98,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 标签插件 </span>
           </div>
           

lyear_pages_add_doc.html

@@ -98,12 +98,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 新增文档 </span>
           </div>
           

lyear_pages_config.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 网站配置 </span>
           </div>
           

lyear_pages_doc.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 文档列表 </span>
           </div>
           

lyear_pages_edit_pwd.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 修改密码 </span>
           </div>
           

lyear_pages_gallery.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 图库列表 </span>
           </div>
           

lyear_pages_profile.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 个人信息 </span>
           </div>
           

lyear_pages_rabc.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 设置权限 </span>
           </div>
           

lyear_ui_alerts.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 警告框 </span>
           </div>
           

lyear_ui_buttons.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 按钮 </span>
           </div>
           

lyear_ui_cards.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title">  UI元素 - 卡片 </span>
           </div>
           

lyear_ui_grid.html

@@ -109,12 +109,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 格栅 </span>
           </div>
           

lyear_ui_icons.html

@@ -156,12 +156,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title">  UI元素 - 图标 </span>
           </div>
           

lyear_ui_modals.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 模态框 </span>
           </div>
           

lyear_ui_other.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 其他 </span>
           </div>
           

lyear_ui_pagination.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 分页 </span>
           </div>
           

lyear_ui_progress.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 进度条 </span>
           </div>
           

lyear_ui_tables.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 表格 </span>
           </div>
           

lyear_ui_tabs.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 标签页 </span>
           </div>
           

lyear_ui_tooltips_popover.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title"> UI元素 - 提示 / 弹出框 </span>
           </div>
           

lyear_ui_typography.html

@@ -96,12 +96,11 @@
         <div class="topbar">
           
           <div class="topbar-left">
-            <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
-              <span class="sr-only">显示/隐藏侧边栏</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
+            <div class="lyear-aside-toggler">
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+              <span class="lyear-toggler-bar"></span>
+            </div>
             <span class="navbar-page-title">  UI元素 - 排版 </span>
           </div>