wenzhixin · wenzhixin · Jun 27, 2020 · Jun 10, 2019 · Jun 10, 2019 · Jun 13, 2019
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "rollup": "^2.6.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-inject": "^3.0.0",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-resolve": "^5.0.4",

diff --git a/rollup.config.js b/rollup.config.js
@@ -4,6 +4,7 @@ import resolve from 'rollup-plugin-node-resolve'
 import commonjs from 'rollup-plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 import inject from 'rollup-plugin-inject'
+import copy from 'rollup-plugin-copy'
 import multiEntry from 'rollup-plugin-multi-entry'
 import vue from 'rollup-plugin-vue'
 
@@ -30,6 +31,11 @@ const plugins = [
   commonjs(),
   babel({
     exclude: 'node_modules/**'
+  }),
+  copy({
+    targets: [
+      { src: 'src/themes/bootstrap-table/fonts/*', dest: 'dist/themes/bootstrap-table/fonts' }
+    ]
   })
 ]
 

diff --git a/site/_themes/src/App.vue b/site/_themes/src/App.vue
@@ -103,6 +103,14 @@ export default {
             demo: 'https://examples.bootstrap-table.com/index.html?bootstrap3',
             price: ''
           },
+          {
+            name: 'Bootstrap Table',
+            desc: 'Our custom theme of Bootstrap Table.',
+            img: '/assets/images/bootstrap-table.jpg',
+            url: '/themes/bootstrap-table/',
+            demo: 'https://examples.bootstrap-table.com/index.html?bootstrap-table',
+            price: ''
+          },
           {
             name: 'Semantic UI',
             desc: 'UI component framework based around useful principles from natural language.',

diff --git a/site/assets/images/bootstrap-table.jpg b/site/assets/images/bootstrap-table.jpg
diff --git a/site/themes/bootstrap-table.md b/site/themes/bootstrap-table.md
@@ -0,0 +1,95 @@
+---
+layout: simple
+title: Bootstrap Table
+description: A getting started of add Bootstrap Table theme, how to download and use, basic templates, and more.
+group: themes
+toc: true
+---
+
+## Quick start
+
+Looking to quickly add Bootstrap Table theme to your project? Use CDN, provided for free by the folks at UNPKG. Using a package manager or need to download the source files? [Head to the downloads page]({{ site.baseurl }}/docs/getting-started/download/).
+
+### CSS
+
+Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
+
+{% highlight html %}
+<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/bootstrap-table/bootstrap-table.min.css">
+{% endhighlight %}
+
+### JS
+
+Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then our JavaScript plugins.
+
+{% highlight html %}
+<script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
+<script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/bootstrap-table/bootstrap-table.min.js"></script>
+{% endhighlight %}
+
+## Starter template
+
+Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors.
+
+Put it all together and your pages should look like this:
+
+{% highlight html %}
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/bootstrap-table/bootstrap-table.min.css">
+
+    <title>Hello, Bootstrap Table!</title>
+  </head>
+  <body>
+    <table data-toggle="table">
+      <thead>
+        <tr>
+          <th>Item ID</th>
+          <th>Item Name</th>
+          <th>Item Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Item 1</td>
+          <td>$1</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Item 2</td>
+          <td>$2</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
+    <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/bootstrap-table/bootstrap-table.min.js"></script>
+  </body>
+</html>
+{% endhighlight %}
+
+### HTML5 doctype
+
+Bootstrap Table requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
+
+{% highlight html %}
+<!doctype html>
+<html lang="en">
+  ...
+</html>
+{% endhighlight %}
+
+## Community
+
+Stay up to date on the development of Bootstrap Table and reach out to the community with these helpful resources.
+
+- Follow [@{{ site.twitter }} on Twitter](https://twitter.com/{{ site.twitter }}).
+- Read [The Official Bootstrap Table News]({{ site.base_url }}/news).
+- Implementation help may be found at Stack Overflow (tagged [`bootstrap-table`](https://stackoverflow.com/questions/tagged/bootstrap-table)).
diff --git a/src/extensions/auto-refresh/bootstrap-table-auto-refresh.js b/src/extensions/auto-refresh/bootstrap-table-auto-refresh.js
@@ -17,7 +17,8 @@ $.extend($.fn.bootstrapTable.defaults, {
 $.extend($.fn.bootstrapTable.defaults.icons, {
   autoRefresh: {
     bootstrap3: 'glyphicon-time icon-time',
-    materialize: 'access_time'
+    materialize: 'access_time',
+    'bootstrap-table': 'icon-clock'
   }[$.fn.bootstrapTable.theme] || 'fa-clock'
 })
 

diff --git a/src/extensions/copy-rows/bootstrap-table-copy-rows.js b/src/extensions/copy-rows/bootstrap-table-copy-rows.js
@@ -8,7 +8,8 @@ const Utils = $.fn.bootstrapTable.utils
 $.extend($.fn.bootstrapTable.defaults.icons, {
   copy: {
     bootstrap3: 'glyphicon-copy icon-pencil',
-    materialize: 'content_copy'
+    materialize: 'content_copy',
+    'bootstrap-table': 'icon-copy'
   }[$.fn.bootstrapTable.theme] || 'fa-copy'
 })
 

diff --git a/src/extensions/export/bootstrap-table-export.js b/src/extensions/export/bootstrap-table-export.js
@@ -43,7 +43,8 @@ $.extend($.fn.bootstrapTable.columnDefaults, {
 $.extend($.fn.bootstrapTable.defaults.icons, {
   export: {
     bootstrap3: 'glyphicon-export icon-share',
-    materialize: 'file_download'
+    materialize: 'file_download',
+    'bootstrap-table': 'icon-download'
   }[$.fn.bootstrapTable.theme] || 'fa-download'
 })
 

diff --git a/src/extensions/multiple-sort/bootstrap-table-multiple-sort.js b/src/extensions/multiple-sort/bootstrap-table-multiple-sort.js
@@ -294,6 +294,53 @@ const bootstrap = {
       multipleSortButton: '<button class="button multi-sort" data-target="%s" title="%s">%s</button>',
       multipleSortSelect: '<select class="%s %s browser-default">'
     }
+  },
+  'bootstrap-table': {
+    icons: {
+      'plus': 'icon-plus',
+      'minus': 'icon-minus',
+      'sort': 'icon-sort-amount-asc'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="modal" id="%s" aria-labelledby="%sLabel" aria-hidden="true">
+          <div class="modal-background"></div>
+          <div class="modal-content" id="%sLabel">
+            <div class="box">
+            <h2>%s</h2>
+              <div class="bootstrap-table">
+                  <div class="fixed-table-toolbar">
+                      <div class="bars">
+                        <div id="toolbar" class="padding-bottom-2">
+                          <button id="add" type="button" class="btn">%s %s</button>
+                          <button id="delete" type="button" class="btn" disabled>%s %s</button>
+                        </div>
+                      </div>
+                  </div>
+                  <div class="fixed-table-container">
+                      <table id="multi-sort" class="table">
+                          <thead>
+                              <tr>
+                                  <th></th>
+                                  <th><div class="th-inner">%s</div></th>
+                                  <th><div class="th-inner">%s</div></th>
+                              </tr>
+                          </thead>
+                          <tbody></tbody>
+                      </table>
+                    </div>
+                </div>
+                <div class="mt-30">
+                    <button type="button" class="btn" data-close>%s</button>
+                    <button type="button" class="btn multi-sort-order-button" data-close>%s</button> 
+                </div>
+            </div>
+          </div>
+        </div>
+      `,
+      multipleSortButton: '<button class="btn multi-sort" data-target="%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s browser-default">'
+    }
   }
 }[$.fn.bootstrapTable.theme]
 $.extend($.fn.bootstrapTable.defaults.icons, bootstrap.icons)
@@ -518,6 +565,10 @@ BootstrapTable.prototype.initToolbar = function (...args) {
         this.$toolbar.find('.multi-sort').on('click', () => {
           $(sortModalId).modal()
         })
+      } else if ($.fn.bootstrapTable.theme === 'bootstrap-table') {
+        this.$toolbar.find('.multi-sort').on('click', () => {
+          $(sortModalId).addClass('show')
+        })
       } else if ($.fn.bootstrapTable.theme === 'foundation') {
         this.$toolbar.find('.multi-sort').on('click', () => {
           if (!this.foundationModal) {

diff --git a/src/extensions/print/bootstrap-table-print.js b/src/extensions/print/bootstrap-table-print.js
@@ -66,7 +66,8 @@ $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, {
 
 $.extend($.fn.bootstrapTable.defaults.icons, {
   print: {
-    bootstrap3: 'glyphicon-print icon-share'
+    bootstrap3: 'glyphicon-print icon-share',
+    'bootstrap-table': 'icon-printer'
   }[$.fn.bootstrapTable.theme] || 'fa-print'
 })
 

diff --git a/src/extensions/toolbar/bootstrap-table-toolbar.js b/src/extensions/toolbar/bootstrap-table-toolbar.js
@@ -98,12 +98,12 @@ const bootstrap = {
         <div class="reveal" id="avdSearchModal_%s" data-reveal>
           <h1>%s</h1>
           <div id="avdSearchModalContent_%s">
-          
+
           </div>
           <button class="close-button" data-close aria-label="Close modal" type="button">
             <span aria-hidden="true">&times;</span>
           </button>
-          
+
           <button id="btnCloseAvd_%s" class="%s" type="button">%s</button>
         </div>
       `
@@ -119,7 +119,7 @@ const bootstrap = {
           <div class="modal-content">
             <h4>%s</h4>
             <div id="avdSearchModalContent_%s">
-            
+
             </div>
           </div>
           <div class="modal-footer">

diff --git a/src/themes/bootstrap-table/_font.scss b/src/themes/bootstrap-table/_font.scss
@@ -0,0 +1,83 @@
+@font-face {
+  font-family: 'bootstrap-table';
+  src: url('fonts/bootstrap-table.eot?gmdfsp');
+  src:
+  url('fonts/bootstrap-table.eot') format('embedded-opentype'),
+  url('fonts/bootstrap-table.ttf') format('truetype'),
+  url('fonts/bootstrap-table.woff') format('woff'),
+  url('fonts/bootstrap-table.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'bootstrap-table', sans-serif !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow-down-circle:before {
+  content: "\e907";
+}
+.icon-arrow-up-circle:before {
+  content: "\e908";
+}
+.icon-chevron-left:before {
+  content: "\e900";
+}
+.icon-chevron-right:before {
+  content: "\e901";
+}
+.icon-clock:before {
+  content: "\e90c";
+}
+.icon-copy:before {
+  content: "\e909";
+}
+.icon-download:before {
+  content: "\e90d";
+}
+.icon-list:before {
+  content: "\e902";
+}
+.icon-maximize:before {
+  content: "\1f5ce";
+}
+.icon-minus:before {
+  content: "\e90f";
+}
+.icon-move:before {
+  content: "\e903";
+}
+.icon-plus:before {
+  content: "\e90e";
+}
+.icon-printer:before {
+  content: "\e90b";
+}
+.icon-refresh-cw:before {
+  content: "\e904";
+}
+.icon-search:before {
+  content: "\e90a";
+}
+.icon-toggle-right:before {
+  content: "\e905";
+}
+.icon-trash-2:before {
+  content: "\e906";
+}
+.icon-sort-amount-asc:before {
+  content: "\ea4c";
+}
diff --git a/src/themes/bootstrap-table/_variables.scss b/src/themes/bootstrap-table/_variables.scss
@@ -0,0 +1,13 @@
+$border-color: #dbdbdb;
+$hover-bg: hsl(0,0%,98%);
+$background: #fff;
+$color: #363636;
+$dark-border-color: #32383e;
+
+// custom
+$background-hover: darken($background, 4);
+$primary-background: #3679e4;
+$primary-background-hover: darken($primary-background, 10);
+$btn-padding: 9px 12px;
+$btn-border: #ccc;
+$btn-border-radius: 4px;