新增步骤和向导插件，修改消失提示方法(自定义消失时间)

README.md

@@ -39,6 +39,8 @@
 - perfect-scrollbar
 
 ### 更新记录
+2019.04.21 新增步骤条和向导插件，修改消息方法（新增自定义消失时间）
+
 2019.03.31 新增暗黑、半透明 两种主题样，所有页面都增加切换html
 
 2019.03.30 修正bootstrap-datetimepicker图标bug，调整一些样式

css/style.min.css

@@ -2880,6 +2880,197 @@ dd, dt {
   animation: spinner-border .75s linear infinite;
 }
 
+/* 步骤条 */
+.nav-step {
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-pack: justify;
+	justify-content: space-between;
+	-webkit-box-align: baseline;
+	align-items: baseline;
+    padding: 0px;
+	margin-bottom: 1rem;
+}
+.step-dots .nav-step-item {
+	position: relative;
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	flex-direction: column;
+	-webkit-box-flex: 1;
+	-webkit-box-align: center;
+	align-items: center;
+	flex: 1 1;
+	padding: 0 12px
+}
+.step-dots .nav-step-item:first-child a::before {
+	display: none
+}
+.step-dots .nav-step-item.complete a,
+.step-dots .nav-step-item.complete a::before,
+.step-dots .nav-step-item.active a,
+.step-dots .nav-step-item.active a::before {
+	background-color: #dcfcfa
+}
+.step-dots .nav-step-item.complete a::after,
+.step-dots .nav-step-item.active a::after {
+	background-color: #33cabb;
+	width: 29px;
+	height: 29px;
+	-webkit-transform: translateX(0);
+	transform: translateX(0);
+	color: #fff
+}
+.step-dots .nav-step-item.complete a::after {
+	width: 29px;
+	height: 29px;
+	-webkit-transform: translateX(0);
+	transform: translateX(0);
+	color: #fff
+}
+.step-dots .nav-step-item.active a::after {
+	width: 13px;
+	height: 13px;
+	margin-top: 8px;
+	-webkit-transform: translateX(8px);
+	transform: translateX(8px);
+	color: transparent
+}
+.step-dots a {
+	display: -webkit-inline-box;
+	display: inline-flex;
+    padding: 0;
+	margin: 10px 0;
+	width: 29px;
+	height: 29px;
+	max-height: 29px;
+	border-radius: 50%;
+	background-color: #f7fafc;
+	-webkit-transition: .5s;
+	transition: .5s;
+	z-index: 1
+}
+.step-dots a::before {
+	content: '';
+	position: absolute;
+	left: calc(-50% + 14.5px);
+	right: calc(50% + 14.5px);
+	height: 10px;
+	margin-top: 9.5px;
+	background-color: #f7fafc;
+	cursor: default;
+	-webkit-transition: .5s;
+	transition: .5s;
+}
+.step-dots a::after {
+	content: "\f12c";
+	font-family: "Material Design Icons";
+	width: 0;
+	height: 0;
+	text-align: center;
+	font-size: 15px;
+	position: absolute;
+	border-radius: 50%;
+	background-color: transparent;
+	color: transparent;
+	-webkit-transform: translate(14.5px, 14.5px);
+	transform: translate(14.5px, 14.5px);
+	-webkit-transition: .5s;
+	transition: .5s;
+	z-index: 1;
+	display: -webkit-inline-box;
+	display: inline-flex;
+	-webkit-box-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	justify-content: center
+}
+.nav-step-pane.active {
+    display: block!important;
+}
+.nav-step-button {
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+}
+.nav-step-button button.disabled {
+    opacity: 0;
+}
+
+.nav-step.step-anchor {
+    justify-content: flex-start;
+    border: 0;
+    background: #fcfdfe;
+    border-radius: 0;
+    list-style: none;
+    overflow: hidden;
+}
+.step-anchor > li > a,
+.step-anchor > li > a:hover {
+    color: #bbb;
+    text-decoration: none;
+    padding: 10px 0 10px 45px;
+    position: relative;
+    display: block;
+    border: 0!important;
+    border-radius: 0;
+    outline-style: none;
+    background: #f7fafc;
+}
+.step-anchor > li > a:before,
+.step-anchor > li > a:after {
+    -webkit-transition: .2s linear;
+    transition: .2s linear;
+}
+.step-anchor > li > a:after {
+	content: " ";
+	display: block;
+	width: 0;
+	height: 0;
+	border-top: 50px solid transparent;
+	border-bottom: 50px solid transparent;
+	border-left: 30px solid #f7fafc;
+	position: absolute;
+	top: 50%;
+	margin-top: -50px;
+	left: 100%;
+	z-index: 2
+}
+.step-anchor > li > a:before {
+	content: " ";
+	display: block;
+	width: 0;
+	height: 0;
+	border-top: 50px solid transparent;
+	border-bottom: 50px solid transparent;
+	border-left: 30px solid rgba(77,82,89,0.075);
+	position: absolute;
+	top: 50%;
+	margin-top: -50px;
+	margin-left: 1px;
+	left: 100%;
+	z-index: 1
+}
+.step-anchor > li:first-child > a {
+    padding-left: 15px;
+}
+.step-anchor > li.active h6,
+.step-anchor > li.complete h6 {
+    color: #fff!important;
+}
+.step-anchor > li.active > a,
+.step-anchor > li.complete > a {
+    border-color: #33cabb!important;
+    color: rgba(255, 255, 255, .8)!important;
+    background: #33cabb!important;
+}
+.step-anchor > li.active > a:after,
+.step-anchor > li.complete > a:after {
+    border-left: 30px solid #33cabb!important;
+}
+
 /** ----------------------------------
  * 响应式处理
  -------------------------------------- */

index.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

js/lightyear.js

@@ -24,13 +24,15 @@ var lightyear = function(){
      * 页面小提示
      * @param $msg 提示信息
      * @param $type 提示类型:'info', 'success', 'warning', 'danger'
+     * @param $time 停留时间，例如：1000
      * @param $icon 图标，例如：'fa fa-user' 或 'glyphicon glyphicon-warning-sign'
      * @param $from 'top' 或 'bottom'
      * @param $align 'left', 'right', 'center'
      * @author CaiWeiMing <314013107@qq.com>
      */
-    var tips = function ($msg, $type, $icon, $from, $align) {
+    var tips = function ($msg, $type, $time, $icon, $from, $align) {
         $type  = $type || 'info';
+        $time  = $time || 1000;
         $from  = $from || 'top';
         $align = $align || 'center';
         $enter = $type == 'danger' ? 'animated shake' : 'animated fadeInUp';
@@ -53,7 +55,7 @@ var lightyear = function(){
             spacing: 10,
             z_index: 10800,
             delay: 3000,
-            timer: 1000,
+            timer: $time,
             animate: {
                 enter: $enter,
                 exit: 'animated fadeOutDown'
@@ -63,8 +65,8 @@ var lightyear = function(){
 	
 	return {
         // 页面小提示
-        notify  : function ($msg, $type, $icon, $from, $align) {
-            tips($msg, $type, $icon, $from, $align);
+        notify  : function ($msg, $type, $time, $icon, $from, $align) {
+            tips($msg, $type, $time, $icon, $from, $align);
         },
         // 页面加载动画
 		loading : function ($mode) {

lyear-config-system.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li class="active"> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 网站配置 </span>
+            <span class="navbar-page-title"> 示例页面 - 网站配置 </span>
           </div>
           
           <ul class="topbar-right">

lyear-config-upload.html

@@ -45,6 +45,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -65,6 +66,7 @@
                 <li class="active"> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -103,7 +105,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 网站配置 </span>
+            <span class="navbar-page-title"> 示例页面 - 网站配置 </span>
           </div>
           
           <ul class="topbar-right">

lyear_forms_checkbox.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 复选框 </span>
+            <span class="navbar-page-title"> 表单 - 复选框 </span>
           </div>
           
           <ul class="topbar-right">

lyear_forms_elements.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 表单 </span>
+            <span class="navbar-page-title"> 表单 - 表单 </span>
           </div>
           
           <ul class="topbar-right">

lyear_forms_radio.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 单选框 </span>
+            <span class="navbar-page-title"> 表单 - 单选框 </span>
           </div>
           
           <ul class="topbar-right">

lyear_forms_switch.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 开关 </span>
+            <span class="navbar-page-title"> 表单 - 开关 </span>
           </div>
           
           <ul class="topbar-right">

lyear_js_chartjs.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 图表 </span>
+            <span class="navbar-page-title"> JS 插件 - 图表 </span>
           </div>
           
           <ul class="topbar-right">

lyear_js_colorpicker.html

@@ -45,6 +45,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -65,6 +66,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -103,7 +105,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 颜色选择器 </span>
+            <span class="navbar-page-title"> JS 插件 - 颜色选择器 </span>
           </div>
           
           <ul class="topbar-right">

lyear_js_datepicker.html

@@ -47,6 +47,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -67,6 +68,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -105,7 +107,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 日期选择器 </span>
+            <span class="navbar-page-title"> JS 插件 - 日期选择器 </span>
           </div>
           
           <ul class="topbar-right">

lyear_js_jconfirm.html

@@ -45,6 +45,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -65,6 +66,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -103,7 +105,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 对话框 </span>
+            <span class="navbar-page-title"> JS 插件 - 对话框 </span>
           </div>
           
           <ul class="topbar-right">

lyear_js_notify.html

@@ -44,6 +44,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -64,6 +65,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -102,7 +104,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 通知消息 </span>
+            <span class="navbar-page-title"> JS 插件 - 通知消息 </span>
           </div>
           
           <ul class="topbar-right">
@@ -296,7 +298,7 @@ $('#example-success-notify').on('click', function(){
     // 假设ajax提交操作
     setTimeout(function() {
         lightyear.loading('hide');
-        lightyear.notify('修改成功，页面即将自动跳转~', 'success');
+        lightyear.notify('修改成功，页面即将自动跳转~', 'success', 5000);
     }, 1e3)
 });
 $('#example-error-notify').on('click', function(){

lyear_js_sliders.html

@@ -45,6 +45,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -65,6 +66,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -103,7 +105,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 滑块 </span>
+            <span class="navbar-page-title"> JS 插件 - 滑块 </span>
           </div>
           
           <ul class="topbar-right">

lyear_js_tags_input.html

@@ -45,6 +45,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -65,6 +66,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -103,7 +105,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 标签插件 </span>
+            <span class="navbar-page-title"> JS 插件 - 标签插件 </span>
           </div>
           
           <ul class="topbar-right">

lyear_pages_add_doc.html

@@ -45,6 +45,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -65,6 +66,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li class="active"> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -103,7 +105,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 新增文档 </span>
+            <span class="navbar-page-title"> 示例页面 - 新增文档 </span>
           </div>
           
           <ul class="topbar-right">

lyear_pages_config.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li class="active"> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 网站配置 </span>
+            <span class="navbar-page-title"> 示例页面 - 网站配置 </span>
           </div>
           
           <ul class="topbar-right">

lyear_pages_doc.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 文档列表 </span>
+            <span class="navbar-page-title"> 示例页面 - 文档列表 </span>
           </div>
           
           <ul class="topbar-right">

lyear_pages_edit_pwd.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 修改密码 </span>
+            <span class="navbar-page-title"> 示例页面 - 修改密码 </span>
           </div>
           
           <ul class="topbar-right">

lyear_pages_error.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+<title>错误页面 - 光年(Light Year Admin)后台管理系统模板</title>
+<link rel="icon" href="favicon.ico" type="image/ico">
+<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
+<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
+<meta name="author" content="yinqi">
+<link href="css/bootstrap.min.css" rel="stylesheet">
+<link href="css/materialdesignicons.min.css" rel="stylesheet">
+<link href="css/style.min.css" rel="stylesheet">
+<style>
+body{
+    background-color: #fff;
+}
+.error-page {
+    height: 100%;
+    position: fixed;
+    width: 100%;
+}
+.error-body {
+    padding-top: 5%;
+}
+.error-body h1 {
+    font-size: 210px;
+    font-weight: 700;
+    text-shadow: 4px 4px 0 #f5f6fa, 6px 6px 0 #33cabb;
+    line-height: 210px;
+    color: #33cabb;
+}
+.error-body h4 {
+    margin: 30px 0px;
+}
+</style>
+</head>
+  
+<body>
+<section class="error-page">
+  <div class="error-box">
+    <div class="error-body text-center">
+      <h1>404</h1>
+      <h4>很抱歉，但是那个页面看起来已经不存在了。</h4>
+      <a href="index.html" class="btn btn-primary ">返回首页</a>
+    </div>
+  </div>
+</section>
+<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/bootstrap.min.js"></script>
+<script type="text/javascript">;</script>
+</body>
+</html>

lyear_pages_gallery.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 图库列表 </span>
+            <span class="navbar-page-title"> 示例页面 - 图库列表 </span>
           </div>
           
           <ul class="topbar-right">

lyear_pages_guide.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+<title>表单向导 - 光年(Light Year Admin)后台管理系统模板</title>
+<link rel="icon" href="favicon.ico" type="image/ico">
+<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
+<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
+<meta name="author" content="yinqi">
+<link href="css/bootstrap.min.css" rel="stylesheet">
+<link href="css/materialdesignicons.min.css" rel="stylesheet">
+<link href="css/style.min.css" rel="stylesheet">
+</head>
+  
+<body>
+<div class="lyear-layout-web">
+  <div class="lyear-layout-container">
+    <!--左侧导航-->
+    <aside class="lyear-layout-sidebar">
+       
+      <!-- logo -->
+      <div id="logo" class="sidebar-header">
+        <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
+      </div>
+      <div class="lyear-layout-sidebar-scroll">
+        
+        <nav class="sidebar-main">
+          <ul class="nav nav-drawer">
+            <li class="nav-item"> <a href="index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
+            <li class="nav-item nav-item-has-subnav">
+              <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> UI 元素</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_ui_buttons.html">按钮</a> </li>
+                <li> <a href="lyear_ui_cards.html">卡片</a> </li>
+                <li> <a href="lyear_ui_grid.html">格栅</a> </li>
+                <li> <a href="lyear_ui_icons.html">图标</a> </li>
+                <li> <a href="lyear_ui_tables.html">表格</a> </li>
+                <li> <a href="lyear_ui_modals.html">模态框</a> </li>
+                <li> <a href="lyear_ui_tooltips_popover.html">提示 / 弹出框</a> </li>
+                <li> <a href="lyear_ui_alerts.html">警告框</a> </li>
+                <li> <a href="lyear_ui_pagination.html">分页</a> </li>
+                <li> <a href="lyear_ui_progress.html">进度条</a> </li>
+                <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
+                <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
+                <li> <a href="lyear_ui_other.html">其他</a> </li>
+              </ul>
+            </li>
+            <li class="nav-item nav-item-has-subnav">
+              <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 表单</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_forms_elements.html">基本元素</a> </li>
+                <li> <a href="lyear_forms_radio.html">单选框</a> </li>
+                <li> <a href="lyear_forms_checkbox.html">复选框</a> </li>
+                <li> <a href="lyear_forms_switch.html">开关</a> </li>
+              </ul>
+            </li>
+            <li class="nav-item nav-item-has-subnav active open">
+              <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> 示例页面</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_pages_doc.html">文档列表</a> </li>
+                <li> <a href="lyear_pages_gallery.html">图库列表</a> </li>
+                <li> <a href="lyear_pages_config.html">网站配置</a> </li>
+                <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
+                <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li class="active"> <a href="lyear_pages_guide.html">表单向导</a> </li>
+                <li> <a href="lyear_pages_login.html">登录页面</a> </li>
+              </ul>
+            </li>
+            <li class="nav-item nav-item-has-subnav">
+              <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> JS 插件</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_js_datepicker.html">日期选取器</a> </li>
+                <li> <a href="lyear_js_sliders.html">滑块</a> </li>
+                <li> <a href="lyear_js_colorpicker.html">选色器</a> </li>
+                <li> <a href="lyear_js_chartjs.html">Chart.js</a> </li>
+                <li> <a href="lyear_js_jconfirm.html">对话框</a> </li>
+                <li> <a href="lyear_js_tags_input.html">标签插件</a> </li>
+                <li> <a href="lyear_js_notify.html">通知消息</a> </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+        
+        <div class="sidebar-footer">
+          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
+        </div>
+      </div>
+      
+    </aside>
+    <!--End 左侧导航-->
+    
+    <!--头部信息-->
+    <header class="lyear-layout-header">
+      
+      <nav class="navbar navbar-default">
+        <div class="topbar">
+          
+          <div class="topbar-left">
+            <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>
+          
+          <ul class="topbar-right">
+            <li class="dropdown dropdown-profile">
+              <a href="javascript:void(0)" data-toggle="dropdown">
+                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
+                <span>笔下光年 <span class="caret"></span></span>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-right">
+                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
+                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
+                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
+                <li class="divider"></li>
+                <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
+              </ul>
+            </li>
+            <!--切换主题配色-->
+		    <li class="dropdown dropdown-skin">
+			  <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
+			  <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
+                <li class="drop-title"><p>主题</p></li>
+                <li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
+                    <label for="site_theme_1"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
+                    <label for="site_theme_2"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
+                    <label for="site_theme_3"></label>
+                  </span>
+                </li>
+			    <li class="drop-title"><p>LOGO</p></li>
+				<li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
+                    <label for="logo_bg_1"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
+                    <label for="logo_bg_2"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
+                    <label for="logo_bg_3"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
+                    <label for="logo_bg_4"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
+                    <label for="logo_bg_5"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
+                    <label for="logo_bg_6"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
+                    <label for="logo_bg_7"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
+                    <label for="logo_bg_8"></label>
+                  </span>
+				</li>
+				<li class="drop-title"><p>头部</p></li>
+				<li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
+                    <label for="header_bg_1"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
+                    <label for="header_bg_2"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
+                    <label for="header_bg_3"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
+                    <label for="header_bg_4"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
+                    <label for="header_bg_5"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
+                    <label for="header_bg_6"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
+                    <label for="header_bg_7"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
+                    <label for="header_bg_8"></label>
+                  </span>
+				</li>
+				<li class="drop-title"><p>侧边栏</p></li>
+				<li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
+                    <label for="sidebar_bg_1"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
+                    <label for="sidebar_bg_2"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
+                    <label for="sidebar_bg_3"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
+                    <label for="sidebar_bg_4"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
+                    <label for="sidebar_bg_5"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
+                    <label for="sidebar_bg_6"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
+                    <label for="sidebar_bg_7"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
+                    <label for="sidebar_bg_8"></label>
+                  </span>
+				</li>
+			  </ul>
+			</li>
+            <!--切换主题配色-->
+          </ul>
+          
+        </div>
+      </nav>
+      
+    </header>
+    <!--End 头部信息-->
+    
+    <!--页面主要内容-->
+    <main class="lyear-layout-content">
+      
+      <div class="container-fluid">
+        
+        <div class="row">
+          <div class="col-lg-12">
+            <div class="card">
+              <div class="card-header"><h4>表单向导</h4></div>
+              <div class="card-body">
+                
+                <form action="#" method="post" class="guide-box" data-navigateable="true">
+                  <ul class="nav-step step-dots">
+                    <li class="nav-step-item active">
+                      <span>步骤一</span>
+                      <a class="active" data-toggle="tab" href="#step-1"></a>
+                    </li>
+
+                    <li class="nav-step-item">
+                      <span>步骤三</span>
+                      <a data-toggle="tab" href="#step-2"></a>
+                    </li>
+
+                    <li class="nav-step-item">
+                      <span>步骤四</span>
+                      <a data-toggle="tab" href="#step-3"></a>
+                    </li>
+
+                    <li class="nav-step-item">
+                      <span>步骤五</span>
+                      <a data-toggle="tab" href="#step-4"></a>
+                    </li>
+                  </ul>
+                  <!--对应内容-->
+                  <div class="nav-step-content">
+                    <div class="nav-step-pane hidden active" id="step-1">
+                      <div class="form-group">
+                        <label>姓名</label>
+                        <input class="form-control" type="text">
+                      </div>
+                    </div>
+
+                    <div class="nav-step-pane hidden" id="step-2">
+                      <div class="form-group">
+                        <label>邮箱地址</label>
+                        <input class="form-control" type="text">
+                      </div>
+                    </div>
+
+                    <div class="nav-step-pane hidden" id="step-3">
+                      <div class="form-group">
+                        <label>设置密码</label>
+                        <input class="form-control" type="password">
+                      </div>
+                    </div>
+
+                    <div class="nav-step-pane hidden" id="step-4">
+                      <div class="form-group">
+                        <label>备注</label>
+                        <input class="form-control" type="text">
+                      </div>
+                    </div>
+                  </div>
+                  <!--End 对应内容-->
+                  <hr>
+                  <div class="nav-step-button">
+                    <button class="btn btn-secondary disabled" data-wizard="prev" type="button">上一步</button>
+                    <button class="btn btn-secondary" data-wizard="next" type="button">下一步</button>
+                    <button class="btn btn-primary hidden" data-wizard="finish" type="submit">完成</button>
+                  </div>
+                </form>
+       
+              </div>
+            </div>
+          </div>
+          
+        </div>
+        
+      </div>
+      
+    </main>
+    <!--End 页面主要内容-->
+  </div>
+</div>
+
+<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/bootstrap.min.js"></script>
+<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
+<script type="text/javascript" src="js/main.min.js"></script>
+<!--向导插件-->
+<script type="text/javascript" src="js/jquery.bootstrap.wizard.min.js"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $('.guide-box').bootstrapWizard({
+        'tabClass': 'nav-step',
+        'nextSelector': '[data-wizard="next"]',
+        'previousSelector': '[data-wizard="prev"]',
+        'finishSelector': '[data-wizard="finish"]',
+        'onTabClick': function(e, t, i) {
+            if (!$('.guide-box').is('[data-navigateable="true"]')) return ! 1
+        },
+        'onTabShow': function(e, t, i) {
+            t.children(":gt(" + i + ").complete").removeClass("complete");
+            t.children(":lt(" + i + "):not(.complete)").addClass("complete");
+        },
+        'onFinish': function(e, t, i) {
+            // 点击完成后处理提交
+        }
+    });
+});
+</script>
+</body>
+</html>

lyear_pages_profile.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 个人信息 </span>
+            <span class="navbar-page-title"> 示例页面 - 个人信息 </span>
           </div>
           
           <ul class="topbar-right">

lyear_pages_rabc.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li class="active"> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>
@@ -101,7 +103,7 @@
               <span class="lyear-toggler-bar"></span>
               <span class="lyear-toggler-bar"></span>
             </div>
-            <span class="navbar-page-title"> UI元素 - 设置权限 </span>
+            <span class="navbar-page-title"> 示例页面 - 设置权限 </span>
           </div>
           
           <ul class="topbar-right">

lyear_ui_alerts.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_buttons.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -62,7 +63,8 @@
                 <li> <a href="lyear_pages_gallery.html">图库列表</a> </li>
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
-                <li> <a href="lyear_pages_add_advs.html">添加广告</a> </li>
+                <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_cards.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_grid.html

@@ -56,6 +56,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -76,6 +77,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_icons.html

@@ -103,6 +103,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -123,6 +124,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_modals.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_other.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li class="active"> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_pagination.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_progress.html

@@ -43,6 +43,7 @@
                 <li class="active"> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_step.html

@@ -0,0 +1,387 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+<title>步骤 - 光年(Light Year Admin)后台管理系统模板</title>
+<link rel="icon" href="favicon.ico" type="image/ico">
+<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
+<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
+<meta name="author" content="yinqi">
+<link href="css/bootstrap.min.css" rel="stylesheet">
+<link href="css/materialdesignicons.min.css" rel="stylesheet">
+<link href="css/style.min.css" rel="stylesheet">
+</head>
+  
+<body>
+<div class="lyear-layout-web">
+  <div class="lyear-layout-container">
+    <!--左侧导航-->
+    <aside class="lyear-layout-sidebar">
+       
+      <!-- logo -->
+      <div id="logo" class="sidebar-header">
+        <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
+      </div>
+      <div class="lyear-layout-sidebar-scroll">
+        
+        <nav class="sidebar-main">
+          <ul class="nav nav-drawer">
+            <li class="nav-item"> <a href="index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
+            <li class="nav-item nav-item-has-subnav active open">
+              <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> UI 元素</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_ui_buttons.html">按钮</a> </li>
+                <li> <a href="lyear_ui_cards.html">卡片</a> </li>
+                <li> <a href="lyear_ui_grid.html">格栅</a> </li>
+                <li> <a href="lyear_ui_icons.html">图标</a> </li>
+                <li> <a href="lyear_ui_tables.html">表格</a> </li>
+                <li> <a href="lyear_ui_modals.html">模态框</a> </li>
+                <li> <a href="lyear_ui_tooltips_popover.html">提示 / 弹出框</a> </li>
+                <li> <a href="lyear_ui_alerts.html">警告框</a> </li>
+                <li> <a href="lyear_ui_pagination.html">分页</a> </li>
+                <li> <a href="lyear_ui_progress.html">进度条</a> </li>
+                <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
+                <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li class="active"> <a href="lyear_ui_step.html">步骤</a> </li>
+                <li> <a href="lyear_ui_other.html">其他</a> </li>
+              </ul>
+            </li>
+            <li class="nav-item nav-item-has-subnav">
+              <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 表单</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_forms_elements.html">基本元素</a> </li>
+                <li> <a href="lyear_forms_radio.html">单选框</a> </li>
+                <li> <a href="lyear_forms_checkbox.html">复选框</a> </li>
+                <li> <a href="lyear_forms_switch.html">开关</a> </li>
+              </ul>
+            </li>
+            <li class="nav-item nav-item-has-subnav">
+              <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> 页面</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_pages_doc.html">文档列表</a> </li>
+                <li> <a href="lyear_pages_gallery.html">图库列表</a> </li>
+                <li> <a href="lyear_pages_config.html">网站配置</a> </li>
+                <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
+                <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
+                <li> <a href="lyear_pages_login.html">登录页面</a> </li>
+              </ul>
+            </li>
+            <li class="nav-item nav-item-has-subnav">
+              <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> JS 插件</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="lyear_js_datepicker.html">日期选取器</a> </li>
+                <li> <a href="lyear_js_sliders.html">滑块</a> </li>
+                <li> <a href="lyear_js_colorpicker.html">选色器</a> </li>
+                <li> <a href="lyear_js_chartjs.html">Chart.js</a> </li>
+                <li> <a href="lyear_js_jconfirm.html">对话框</a> </li>
+                <li> <a href="lyear_js_tags_input.html">标签插件</a> </li>
+                <li> <a href="lyear_js_notify.html">通知消息</a> </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+        
+        <div class="sidebar-footer">
+          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
+        </div>
+      </div>
+      
+    </aside>
+    <!--End 左侧导航-->
+    
+    <!--头部信息-->
+    <header class="lyear-layout-header">
+      
+      <nav class="navbar navbar-default">
+        <div class="topbar">
+          
+          <div class="topbar-left">
+            <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>
+          
+          <ul class="topbar-right">
+            <li class="dropdown dropdown-profile">
+              <a href="javascript:void(0)" data-toggle="dropdown">
+                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
+                <span>笔下光年 <span class="caret"></span></span>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-right">
+                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
+                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
+                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
+                <li class="divider"></li>
+                <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
+              </ul>
+            </li>
+            <!--切换主题配色-->
+		    <li class="dropdown dropdown-skin">
+			  <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
+			  <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
+                <li class="drop-title"><p>主题</p></li>
+                <li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
+                    <label for="site_theme_1"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
+                    <label for="site_theme_2"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
+                    <label for="site_theme_3"></label>
+                  </span>
+                </li>
+			    <li class="drop-title"><p>LOGO</p></li>
+				<li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
+                    <label for="logo_bg_1"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
+                    <label for="logo_bg_2"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
+                    <label for="logo_bg_3"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
+                    <label for="logo_bg_4"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
+                    <label for="logo_bg_5"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
+                    <label for="logo_bg_6"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
+                    <label for="logo_bg_7"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
+                    <label for="logo_bg_8"></label>
+                  </span>
+				</li>
+				<li class="drop-title"><p>头部</p></li>
+				<li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
+                    <label for="header_bg_1"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
+                    <label for="header_bg_2"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
+                    <label for="header_bg_3"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
+                    <label for="header_bg_4"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
+                    <label for="header_bg_5"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
+                    <label for="header_bg_6"></label>                      
+                  </span>                                                    
+                  <span>                                                     
+                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
+                    <label for="header_bg_7"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
+                    <label for="header_bg_8"></label>
+                  </span>
+				</li>
+				<li class="drop-title"><p>侧边栏</p></li>
+				<li class="drop-skin-li clearfix">
+                  <span class="inverse">
+                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
+                    <label for="sidebar_bg_1"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
+                    <label for="sidebar_bg_2"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
+                    <label for="sidebar_bg_3"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
+                    <label for="sidebar_bg_4"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
+                    <label for="sidebar_bg_5"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
+                    <label for="sidebar_bg_6"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
+                    <label for="sidebar_bg_7"></label>
+                  </span>
+                  <span>
+                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
+                    <label for="sidebar_bg_8"></label>
+                  </span>
+				</li>
+			  </ul>
+			</li>
+            <!--切换主题配色-->
+          </ul>
+          
+        </div>
+      </nav>
+      
+    </header>
+    <!--End 头部信息-->
+    
+    <!--页面主要内容-->
+    <main class="lyear-layout-content">
+
+      <div class="container-fluid">
+        <div class="alert alert-info" role="alert">
+          实际应用中，给a标签加上 <code>data-toggle="tab"</code> ，可查看<a href="lyear_pages_guide.html">表单向导</a>。
+        </div>
+        <div class="row">
+          <div class="col-lg-12">
+            <div class="card">
+              <div class="card-header"><h4>步骤</h4></div>
+              <div class="card-body">
+                
+                <ul class="nav-step step-dots">
+                  <li class="nav-step-item active">
+                    <span>步骤一</span>
+                    <a class="active" href="#"></a>
+                  </li>
+      
+                  <li class="nav-step-item">
+                    <span>步骤三</span>
+                    <a href="#"></a>
+                  </li>
+      
+                  <li class="nav-step-item">
+                    <span>步骤四</span>
+                    <a href="#"></a>
+                  </li>
+      
+                  <li class="nav-step-item">
+                    <span>步骤五</span>
+                    <a href="#"></a>
+                  </li>
+                </ul>
+                
+                <ul class="nav-step step-dots">
+                  <li class="nav-step-item complete">
+                    <span>步骤一</span>
+                    <a class="active" href="#"></a>
+                  </li>
+      
+                  <li class="nav-step-item active">
+                    <span>步骤三</span>
+                    <a href="#"></a>
+                  </li>
+      
+                  <li class="nav-step-item">
+                    <span>步骤四</span>
+                    <a href="#"></a>
+                  </li>
+      
+                  <li class="nav-step-item">
+                    <span>步骤五</span>
+                    <a href="#"></a>
+                  </li>
+                </ul>
+                
+                <ul class="nav-step step-anchor">
+                  <li class="nav-step-item active">
+                    <a href="#step-1">
+                      <h6>步骤一</h6>
+                      <p class="m-0">步骤一说明</p>
+                    </a>
+                  </li>
+                  <li class="nav-step-item">
+                    <a href="#step-2">
+                      <h6>步骤二</h6>
+                      <p class="m-0">步骤二说明</p>
+                    </a>
+                  </li>
+                  <li class="nav-step-item">
+                    <a href="#step-3">
+                      <h6>步骤三</h6>
+                      <p class="m-0">步骤三说明</p>
+                    </a>
+                  </li>
+                  <li class="nav-step-item">
+                    <a href="#step-4">
+                      <h6>步骤四</h6>
+                      <p class="m-0">步骤四说明</p>
+                    </a>
+                  </li>
+                </ul>
+                
+                <ul class="nav-step step-anchor">
+                  <li class="nav-step-item complete">
+                    <a href="#step-1">
+                      <h6>步骤一</h6>
+                      <p class="m-0">步骤一说明</p>
+                    </a>
+                  </li>
+                  <li class="nav-step-item active">
+                    <a href="#step-2">
+                      <h6>步骤二</h6>
+                      <p class="m-0">步骤二说明</p>
+                    </a>
+                  </li>
+                  <li class="nav-step-item">
+                    <a href="#step-3">
+                      <h6>步骤三</h6>
+                      <p class="m-0">步骤三说明</p>
+                    </a>
+                  </li>
+                  <li class="nav-step-item">
+                    <a href="#step-4">
+                      <h6>步骤四</h6>
+                      <p class="m-0">步骤四说明</p>
+                    </a>
+                  </li>
+                </ul>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- .row --> 
+        
+      </div>
+      
+    </main>
+    <!--End 页面主要内容-->
+  </div>
+</div>
+
+<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/bootstrap.min.js"></script>
+<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
+<script type="text/javascript" src="js/main.min.js"></script>
+</body>
+</html>

lyear_ui_tables.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_tabs.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li class="active"> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_tooltips_popover.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>

lyear_ui_typography.html

@@ -43,6 +43,7 @@
                 <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                 <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                 <li class="active"> <a href="lyear_ui_typography.html">排版</a> </li>
+                <li> <a href="lyear_ui_step.html">步骤</a> </li>
                 <li> <a href="lyear_ui_other.html">其他</a> </li>
               </ul>
             </li>
@@ -63,6 +64,7 @@
                 <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                 <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
+                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                 <li> <a href="lyear_pages_login.html">登录页面</a> </li>
               </ul>
             </li>