feat(js): add `theadClasses` option to supoort bootstrap v4

docs/_i18n/en/documentation/table-options.md

@@ -35,6 +35,13 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
         <td>The class name of table. By default, the table is bordered, you can add 'table-no-bordered' to remove table-bordered style.</td>
     </tr>
     <tr>
+        <td>theadClasses</td>
+        <td>data-thead-classes</td>
+        <td>String</td>
+        <td>''</td>
+        <td>The class name of table thead. Bootstrap V4, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.</td>
+    </tr>
+    <tr>
         <td>sortClass</td>
         <td>data-sort-class</td>
         <td>String</td>

docs/_i18n/es/documentation/table-options.md

@@ -35,6 +35,13 @@ Las opciones de la tabla están definidas en `jQuery.fn.bootstrapTable.defaults`
         <td>El nombre de la clase de la tabla.</td>
     </tr>
     <tr>
+        <td>theadClasses</td>
+        <td>data-thead-classes</td>
+        <td>String</td>
+        <td>''</td>
+        <td>El nombre de clase de la tabla thead. Bootstrap V4, use las clases modificadoras `.thead-light` o `.thead-dark` para hacer que `<thead>`s aparezca en gris claro u oscuro.</td>
+    </tr>
+    <tr>
         <td>sortClass</td>
         <td>data-sort-class</td>
         <td>String</td>

docs/_i18n/zh-cn/documentation/table-options.md

@@ -35,6 +35,13 @@
         <td>表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-bordered' 来删除表格的边框样式。</td>
     </tr>
     <tr>
+        <td>theadClasses</td>
+        <td>data-thead-classes</td>
+        <td>String</td>
+        <td>''</td>
+        <td>表格 thead 的类名称。Bootstrap V4，使用 `.thead-light` 或者 `.thead-dark` 可以设置 `<thead>` 的样式。</td>
+    </tr>
+    <tr>
         <td>sortClass</td>
         <td>data-sort-class</td>
         <td>String</td>

src/bootstrap-table.css

@@ -264,6 +264,10 @@
     border-bottom: 1px solid #ddd;
 }
 
+.bootstrap-table .table > thead.thead-dark > tr > th {
+    border-bottom: 1px solid #212529;
+}
+
 /* support bootstrap 3 */
 .bootstrap-table .table thead > tr > th {
     padding: 0;

src/bootstrap-table.js

@@ -265,13 +265,14 @@
 
   const DEFAULTS = {
     classes: 'table table-hover',
+    theadClasses: '',
+    sortClass: undefined,
     locale: undefined,
     height: undefined,
     undefinedText: '-',
     sortName: undefined,
     sortOrder: 'asc',
     sortStable: false,
-    sortClass: undefined,
     rememberOrder: false,
     striped: false,
     columns: [
@@ -651,7 +652,7 @@
 
       this.$header = this.$el.find('>thead')
       if (!this.$header.length) {
-        this.$header = $('<thead></thead>').appendTo(this.$el)
+        this.$header = $(`<thead class="${this.options.theadClasses}"></thead>`).appendTo(this.$el)
       }
       this.$header.find('tr').each((i, el) => {
         const column = []