新增label样式，调整datepicker插件样式和使用，调整silders插件样式和皮肤，改td垂直居中

README.md

@@ -50,6 +50,9 @@
 - Bootstrap-Multitabs
 
 #### 更新记录
+2020.06.14
+新增label样式，调整datepicker插件样式和使用，调整silders插件样式和皮肤，改td垂直居中
+
 2020.05.18
 老登录页面增加背景，新增三个登录页面
 

css/style.min.css

@@ -142,6 +142,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .table>thead>tr>td,
 .table>thead>tr>th {
     /*padding: .75em;*/
+    vertical-align: middle;
     padding: 10px;
 	line-height: 1.5;
     border-color: #eceeef;
@@ -220,6 +221,60 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .label-brown {
     background-color: #8d6658;
 }
+[class*='label-outline-'] {
+    position: relative;
+	border: 1px solid #ebebeb;
+    color: #4d5259;
+    font-size: 12px;
+}
+[class*='label-outline-']:before {
+    content: "";
+    margin-right: 5px;
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    -wekit-border-radius: 50%;
+    border-radius: 50%;
+}
+.label-outline-default::before {
+    background-color: #f5f6f7;
+}
+.label-outline-primary::before {
+    background-color: #33cabb;
+}
+.label-outline-success::before {
+    background-color: #15c377;
+}
+.label-outline-info::before {
+    background-color: #48b0f7;
+}
+.label-outline-warning::before {
+    background-color: #faa64b;
+}
+.label-outline-danger::before {
+    background-color: #f96868;
+}
+.label-outline-dark::before {
+    background-color: #465161;
+}
+.label-outline-secondary::before {
+    background-color: #e4e7ea;
+}
+.label-outline-purple::before {
+    background-color: #926dde;
+}
+.label-outline-pink::before {
+    background-color: #f96197;
+}
+.label-outline-cyan::before {
+    background-color: #57c7d4;
+}
+.label-outline-yellow::before {
+    background-color: #fcc525;
+}
+.label-outline-brown::before {
+    background-color: #8d6658;
+}
 
 /* well */
 .well {

js/bootstrap-datepicker/bootstrap-datepicker3.css

@@ -87,7 +87,7 @@
   text-align: center;
   width: 30px;
   height: 30px;
-  border-radius: 4px;
+  border-radius: 2px;
   border: none;
 }
 .table-striped .datepicker table tr td,
@@ -460,8 +460,8 @@ fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
 .datepicker table tr td.active.active,
 .datepicker table tr td.active.highlighted.active {
   color: #ffffff;
-  background-color: #286090;
-  border-color: #204d74;
+  background-color: #33cabb;
+  border-color: #33cabb;
 }
 .datepicker table tr td.active:active:hover,
 .datepicker table tr td.active.highlighted:active:hover,
@@ -476,8 +476,8 @@ fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
 .datepicker table tr td.active.active.focus,
 .datepicker table tr td.active.highlighted.active.focus {
   color: #ffffff;
-  background-color: #204d74;
-  border-color: #122b40;
+  background-color: #31c2b3;
+  border-color: #31c2b3;
 }
 .datepicker table tr td.active.disabled:hover,
 .datepicker table tr td.active.highlighted.disabled:hover,
@@ -558,8 +558,8 @@ fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
 .datepicker table tr td span.active.disabled.active,
 .datepicker table tr td span.active.disabled:hover.active {
   color: #ffffff;
-  background-color: #286090;
-  border-color: #204d74;
+  background-color: #33cabb;
+  border-color: #33cabb;
 }
 .datepicker table tr td span.active:active:hover,
 .datepicker table tr td span.active:hover:active:hover,
@@ -586,8 +586,8 @@ fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
 .datepicker table tr td span.active.disabled.active.focus,
 .datepicker table tr td span.active.disabled:hover.active.focus {
   color: #ffffff;
-  background-color: #204d74;
-  border-color: #122b40;
+  background-color: #52d3c7;
+  border-color: #52d3c7;
 }
 .datepicker table tr td span.active.disabled:hover,
 .datepicker table tr td span.active:hover.disabled:hover,

js/main.min.js

@@ -42,13 +42,19 @@ jQuery( function() {
     
     // 日期选择
 	jQuery('.js-datepicker').each(function() {
-	    var $input = jQuery(this);
-		$input.datepicker({
+        var options = {
 			weekStart: 1,
-			autoclose: true,
-			todayHighlight: true,
-			language: 'zh-CN',
-		});
+			autoclose: typeof($(this).data('auto-close')) != 'undefined' ? $(this).data('auto-close') : true,
+            language: 'zh-CN',  // 默认简体中文
+            multidateSeparator: ', ', // 默认多个日期用,分隔
+            format: $(this).data('date-format') ? $(this).data('date-format') : 'yyyy-mm-dd',
+        };
+        
+        if ( $(this).prop("tagName") != 'INPUT' ) {
+            options.inputs = [$(this).find('input:first'), $(this).find('input:last')];
+        }
+  
+        $(this).datepicker(options);
 	});
     
     // 颜色选取

lyear_js_datepicker.html

@@ -43,10 +43,10 @@
           
           <input class="form-control js-datepicker m-b-10" type="text" id="example-datepicker2" name="example-datepicker2" data-date-format="yy/mm/dd" placeholder="yy/mm/dd">
           
-          <div class="input-daterange input-group">
-            <input class="form-control js-datepicker" data-date-format="yyyy-mm-dd" type="text" id="example-daterange1" name="example-daterange1" placeholder="从">
+          <div class="input-daterange input-group js-datepicker" data-auto-close="false" data-date-format="yyyy-mm-dd">
+            <input class="form-control" type="text" id="example-daterange1" name="example-daterange1" placeholder="从">
             <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
-            <input class="form-control js-datepicker" data-date-format="yyyy-mm-dd" type="text" id="example-daterange2" name="example-daterange2" placeholder="至">
+            <input class="form-control" type="text" id="example-daterange2" name="example-daterange2" placeholder="至">
           </div>
           
         </div>

lyear_js_sliders.html

@@ -89,6 +89,37 @@
               <small class="form-text text-muted">注意如何连接和连接值？ 使用decorate_both选项</small>
             </div>
           </div>
+          <div class="form-group row">
+            <label class="col-form-label col-lg-3">皮肤big</label>
+            <div class="col-lg-9">
+              <input id="range_11">
+              <small class="form-text text-muted">目前默认皮肤是flat</small>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-lg-3">皮肤modern</label>
+            <div class="col-lg-9">
+              <input id="range_12">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-lg-3">皮肤sharp</label>
+            <div class="col-lg-9">
+              <input id="range_13">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-lg-3">皮肤round</label>
+            <div class="col-lg-9">
+              <input id="range_14">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-lg-3">皮肤square</label>
+            <div class="col-lg-9">
+              <input id="range_15">
+            </div>
+          </div>
  
         </div>
       </div>
@@ -185,6 +216,21 @@ $(function() {
         postfix: " 百万镑",
         decorate_both: true
     });
+    $("#range_11").ionRangeSlider({
+        skin: "big"
+    });
+    $("#range_12").ionRangeSlider({
+        skin: "modern"
+    });
+    $("#range_13").ionRangeSlider({
+        skin: "sharp"
+    });
+    $("#range_14").ionRangeSlider({
+        skin: "round"
+    });
+    $("#range_15").ionRangeSlider({
+        skin: "square"
+    });
 });
 </script>
 </body>

lyear_ui_other.html

@@ -35,6 +35,22 @@
           <span class="label label-cyan">国外名著</span>
           <span class="label label-yellow">武侠小说</span>
           <span class="label label-brown">儿童文学</span>
+                
+          <div class="m-t-10">
+            <span class="label label-outline-default">青春校园</span>
+            <span class="label label-outline-primary">历史小说</span>
+            <span class="label label-outline-success">当代小说</span>
+            <span class="label label-outline-info">都市小说</span>
+            <span class="label label-outline-warning">科幻小说</span>
+            <span class="label label-outline-danger">名人传记</span>
+            <span class="label label-outline-dark">悬疑小说</span>
+            <span class="label label-outline-secondary">古文典籍</span>
+            <span class="label label-outline-purple">玄幻仙侠</span>
+            <span class="label label-outline-pink">言情小说</span>
+            <span class="label label-outline-cyan">国外名著</span>
+            <span class="label label-outline-yellow">武侠小说</span>
+            <span class="label label-outline-brown">儿童文学</span>
+          </div>
           
         </div>
       </div>