首页 发现 帮助
登录
githab
/
bootstrap-table
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Merge pull request #4403 from wenzhixin/feature/4364

Own Theme for the bootstrap-table
文翼 5 年之前
父节点
a4f9f1d9d8 42bdea7c5e
当前提交
7e10099300
共有 21 个文件被更改，包括 1223 次插入 和 8 次删除
分列视图 显示文件统计
  1. 1 0
      package.json
  2. 6 0
      rollup.config.js
  3. 8 0
      site/_themes/src/App.vue
  4. 二进制
      site/assets/images/bootstrap-table.jpg
  5. 95 0
      site/themes/bootstrap-table.md
  6. 2 1
      src/extensions/auto-refresh/bootstrap-table-auto-refresh.js
  7. 2 1
      src/extensions/copy-rows/bootstrap-table-copy-rows.js
  8. 2 1
      src/extensions/export/bootstrap-table-export.js
  9. 51 0
      src/extensions/multiple-sort/bootstrap-table-multiple-sort.js
  10. 2 1
      src/extensions/print/bootstrap-table-print.js
  11. 3 3
      src/extensions/toolbar/bootstrap-table-toolbar.js
  12. 83 0
      src/themes/bootstrap-table/_font.scss
  13. 13 0
      src/themes/bootstrap-table/_variables.scss
  14. 79 0
      src/themes/bootstrap-table/bootstrap-table.js
  15. 498 0
      src/themes/bootstrap-table/bootstrap-table.json
  16. 349 0
      src/themes/bootstrap-table/bootstrap-table.scss
  17. 二进制
      src/themes/bootstrap-table/fonts/bootstrap-table.eot
  18. 28 0
      src/themes/bootstrap-table/fonts/bootstrap-table.svg
  19. 二进制
      src/themes/bootstrap-table/fonts/bootstrap-table.ttf
  20. 二进制
      src/themes/bootstrap-table/fonts/bootstrap-table.woff
  21. 1 1
      src/themes/materialize/bootstrap-table-materialize.js

+ 1 - 0
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",

+ 6 - 0
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' }
 
+    ]
 
   })
 
 ]

+ 8 - 0
site/_themes/src/App.vue
查看文件 

@@ -104,6 +104,14 @@ export default {
 
             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.',
 
             img: '/assets/images/semantic.jpg',

二进制
site/assets/images/bootstrap-table.jpg
查看文件


+ 95 - 0
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)).

+ 2 - 1
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'
 
 })

+ 2 - 1
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'
 
 })

+ 2 - 1
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'
 
 })

+ 51 - 0
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) {

+ 2 - 1
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'
 
 })

+ 3 - 3
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">

+ 83 - 0
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";
 
+}

+ 13 - 0
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;

+ 79 - 0
src/themes/bootstrap-table/bootstrap-table.js
查看文件 

@@ -0,0 +1,79 @@
 
+/**
 
+ * @author Dustin Utecht
 
+ * https://github.com/wenzhixin/bootstrap-table/
 
+ */
 
+
 
+$.fn.bootstrapTable.theme = 'bootstrap-table'
 
+
 
+$.extend($.fn.bootstrapTable.defaults, {
 
+  iconsPrefix: 'icon',
 
+  icons: {
 
+    paginationSwitchDown: 'icon-arrow-up-circle',
 
+    paginationSwitchUp: 'icon-arrow-down-circle',
 
+    refresh: 'icon-refresh-cw',
 
+    toggleOff: 'icon-toggle-right',
 
+    toggleOn: 'icon-toggle-right',
 
+    columns: 'icon-list',
 
+    detailOpen: 'icon-plus',
 
+    detailClose: 'icon-minus',
 
+    fullscreen: 'icon-maximize',
 
+    search: 'icon-search',
 
+    clearSearch: 'icon-trash-2'
 
+  }
 
+})
 
+
 
+$.BootstrapTable = class extends $.BootstrapTable {
 
+  init () {
 
+    super.init()
 
+
 
+    this.constants.classes.dropup = 'dropdown-menu-up'
 
+
 
+    $('.modal').on('click', '[data-close]', (e) => {
 
+      $(e.delegateTarget).removeClass('show')
 
+    })
 
+  }
 
+
 
+  initConstants () {
 
+    super.initConstants()
 
+
 
+    this.constants.html.inputGroup = '<div class="input-group">%s%s</div>'
 
+  }
 
+
 
+
 
+  initToolbar () {
 
+    super.initToolbar()
 
+    this.handleToolbar()
 
+  }
 
+
 
+  handleToolbar () {
 
+    if (this.$toolbar.find('.dropdown-toggle').length) {
 
+      this._initDropdown()
 
+    }
 
+  }
 
+
 
+  initPagination () {
 
+    super.initPagination()
 
+    if (this.options.pagination && this.paginationParts.includes('pageSize')) {
 
+      this._initDropdown()
 
+    }
 
+  }
 
+
 
+  _initDropdown () {
 
+    const $dropdownToggles = $('.dropdown-toggle')
 
+    $dropdownToggles.off('click').on('click', (e) => {
 
+      let $target = $(e.currentTarget)
 
+      if ($target.parents('.dropdown-toggle').length > 0) {
 
+        $target = $target.parents('.dropdown-toggle')
 
+      }
 
+
 
+      $target.next('.dropdown-menu').toggleClass('open')
 
+    })
 
+
 
+    $(window).off('click').on('click', (e) => {
 
+      const $dropdownToggles = $('.dropdown-toggle')
 
+      if ($(e.target).parents('.dropdown-toggle, .dropdown-menu').length === 0 && !$(e.target).hasClass('dropdown-toggle')) {
 
+        $dropdownToggles.next('.dropdown-menu').removeClass('open')
 
+      }
 
+    })
 
+  }
 
+}

文件差异内容过多而无法显示
+ 498 - 0
src/themes/bootstrap-table/bootstrap-table.json


+ 349 - 0
src/themes/bootstrap-table/bootstrap-table.scss
查看文件 

@@ -0,0 +1,349 @@
 
+/**
 
+ * @author Dustin Utecht
 
+ * https://github.com/wenzhixin/bootstrap-table/
 
+ */
 
+@import 'variables';
 
+@import '../theme.scss';
 
+@import './font.scss';
 
+
 
+.bootstrap-table {
 
+  * {
 
+    box-sizing: border-box;
 
+  }
 
+
 
+  input.form-control,
 
+  select.form-control,
 
+  .btn {
 
+    border-radius: $btn-border-radius;
 
+    background-color: $background;
 
+    border: 1px solid $btn-border;
 
+    padding: $btn-padding;
 
+  }
 
+
 
+  select.form-control {
 
+    height: 35px;
 
+  }
 
+
 
+  .btn {
 
+    outline: none;
 
+    cursor: pointer;
 
+
 
+    &.active {
 
+      background-color: darken($background, 8);
 
+    }
 
+
 
+    &:focus,
 
+    &:hover {
 
+      background-color: $background-hover;
 
+    }
 
+  }
 
+
 
+  .caret {
 
+    display: inline-block;
 
+    width: 0;
 
+    height: 0;
 
+    margin-left: 2px;
 
+    vertical-align: middle;
 
+    border-top: 4px dashed;
 
+    border-top: 4px solid;
 
+    border-right: 4px solid transparent;
 
+    border-left: 4px solid transparent;
 
+  }
 
+
 
+  .detail-icon {
 
+    text-decoration: none;
 
+    color: $primary-background;
 
+
 
+    &:hover {
 
+      color: darken($primary-background, 20);
 
+    }
 
+  }
 
+
 
+  .fixed-table-toolbar {
 
+    .columns {
 
+      &,
 
+      .btn-group {
 
+        display: inline-block;
 
+      }
 
+
 
+      >.btn,
 
+      >.btn-group {
 
+        &:not(:first-child):not(:last-child) {
 
+          &,
 
+          >.btn {
 
+            border-radius: 0;
 
+          }
 
+        }
 
+
 
+        &:not(:last-child):not(.dropdown-toggle),
 
+        &:not(:last-child)>.btn {
 
+          border-top-right-radius: 0;
 
+          border-bottom-right-radius: 0;
 
+          border-right: none;
 
+        }
 
+
 
+        &:not(:first-child):not(.dropdown-toggle),
 
+        &:not(:first-child)>.btn {
 
+          border-top-left-radius: 0;
 
+          border-bottom-left-radius: 0;
 
+        }
 
+      }
 
+    }
 
+
 
+    .search .input-group {
 
+      .search-input {
 
+        border-top-right-radius: 0;
 
+        border-bottom-right-radius: 0;
 
+        border-right: none;
 
+      }
 
+
 
+      button[name="search"],
 
+      button[name="clearSearch"] {
 
+        border-top-left-radius: 0;
 
+        border-bottom-left-radius: 0;
 
+
 
+        &:not(:last-child) {
 
+          border-top-right-radius: 0;
 
+          border-bottom-right-radius: 0;
 
+          border-right: none;
 
+        }
 
+      }
 
+    }
 
+
 
+    .columns {
 
+      label {
 
+        padding: 5px 12px;
 
+      }
 
+
 
+      input[type="checkbox"] {
 
+        vertical-align: middle;
 
+      }
 
+
 
+      .dropdown-divider {
 
+        border-bottom: 1px solid $border-color;
 
+      }
 
+    }
 
+  }
 
+
 
+  .open {
 
+    &.dropdown-menu {
 
+      display: block;
 
+    }
 
+  }
 
+
 
+  .dropdown-menu-up {
 
+    .dropdown-menu {
 
+      top: auto;
 
+      bottom: 100%;
 
+    }
 
+  }
 
+
 
+  .dropdown-menu {
 
+    display: none;
 
+    background-color: $background;
 
+    position: absolute;
 
+    right: 0;
 
+    min-width: 120px;
 
+    margin-top: 2px;
 
+    border: 1px solid $btn-border;
 
+    border-radius: 4px;
 
+    -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, .175);
 
+    box-shadow: 0 3px 12px rgba(0, 0, 0, .175);
 
+
 
+    .dropdown-item {
 
+      color: $color;
 
+      text-decoration: none;
 
+      display: block;
 
+      padding: 5px 12px;
 
+      white-space: nowrap;
 
+
 
+      &:hover {
 
+        background-color: $background-hover;
 
+      }
 
+
 
+      &.active {
 
+        background-color: $primary-background;
 
+        color: #fff;
 
+
 
+        &:hover {
 
+          background-color: $primary-background-hover;
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .columns-left {
 
+    .dropdown-menu {
 
+      left: 0;
 
+      right: auto;
 
+    }
 
+  }
 
+
 
+  .pagination-detail {
 
+    float: left;
 
+    .dropdown-item {
 
+      min-width: 45px;
 
+      text-align: center;
 
+    }
 
+  }
 
+
 
+  table {
 
+    border-collapse: collapse;
 
+
 
+    th {
 
+      text-align: inherit;
 
+    }
 
+
 
+    &.table-bordered {
 
+      thead tr th,
 
+      tbody tr td {
 
+        border: 1px solid $border-color;
 
+      }
 
+
 
+      tbody tr td {
 
+        padding: 0.75rem;
 
+      }
 
+    }
 
+
 
+    &.table-hover {
 
+      tbody tr:hover {
 
+        background: $hover-bg;
 
+      }
 
+    }
 
+  }
 
+
 
+  .float-left {
 
+    float: left;
 
+  }
 
+
 
+  .float-right {
 
+    float: right;
 
+  }
 
+
 
+  .pagination {
 
+    padding: 0;
 
+    align-items: center;
 
+    display: flex;
 
+    justify-content: center;
 
+    text-align: center;
 
+    list-style: none;
 
+
 
+    .page-item {
 
+      border: 1px solid $border-color;
 
+      background-color: $background;
 
+      border-radius: 4px;
 
+      margin: 2px;
 
+      padding: 5px 2px 5px 2px;
 
+
 
+      &:hover {
 
+        background-color: $background-hover;
 
+      }
 
+
 
+      .page-link {
 
+        color: $color;
 
+        text-decoration: none;
 
+        outline: none;
 
+      }
 
+
 
+      &.active {
 
+        background-color: $primary-background;
 
+        border: 1px solid darken($primary-background, 5);
 
+
 
+        .page-link {
 
+          color: #fff;
 
+        }
 
+
 
+        &:hover {
 
+          background-color: $primary-background-hover;
 
+        }
 
+      }
 
+    }
 
+
 
+    .btn-group {
 
+      display: inline-block;
 
+
 
+      .btn,
 
+      input {
 
+        &:not(:first-child):not(:last-child) {
 
+          border-radius: 0;
 
+        }
 
+
 
+        &:first-child:not(:last-child):not(.dropdown-toggle) {
 
+          border-top-right-radius: 0;
 
+          border-bottom-right-radius: 0;
 
+        }
 
+
 
+        &:last-child:not(:first-child) {
 
+          border-top-left-radius: 0;
 
+          border-bottom-left-radius: 0;
 
+        }
 
+      }
 
+
 
+      & > .btn-group:last-child:not(:first-child) > .btn:first-child {
 
+        border-top-left-radius: 0;
 
+        border-bottom-left-radius: 0;
 
+      }
 
+    }
 
+  }
 
+
 
+  .filter-control {
 
+    display: flex;
 
+  }
 
+
 
+  .page-jump-to {
 
+    input,
 
+    .btn {
 
+      padding: 8px 12px;
 
+    }
 
+  }
 
+}
 
+
 
+.modal {
 
+  position: fixed;
 
+  display: none;
 
+  top: 0;
 
+  left: 0;
 
+  bottom: 0;
 
+  right: 0;
 
+
 
+  &.show {
 
+    display: flex;
 
+  }
 
+
 
+  .btn {
 
+    border-radius: 4px;
 
+    background-color: $background;
 
+    border: 1px solid $btn-border;
 
+    padding: 6px 12px;
 
+    outline: none;
 
+    cursor: pointer;
 
+
 
+    &.active {
 
+      border-color: black;
 
+    }
 
+  }
 
+
 
+  .modal-background {
 
+    position: fixed;
 
+    top: 0;
 
+    left: 0;
 
+    bottom: 0;
 
+    right: 0;
 
+    z-index: 998;
 
+    background-color: rgba(10,10,10,.86);
 
+  }
 
+
 
+  .modal-content {
 
+    position: relative;
 
+    width: 600px;
 
+    margin: 30px auto;
 
+    z-index: 999;
 
+
 
+    .box {
 
+      background-color: #fff;
 
+      border-radius: 6px;
 
+      display: block;
 
+      padding: 1.25rem;
 
+    }
 
+  }
 
+}

二进制
src/themes/bootstrap-table/fonts/bootstrap-table.eot
查看文件


文件差异内容过多而无法显示
+ 28 - 0
src/themes/bootstrap-table/fonts/bootstrap-table.svg


二进制
src/themes/bootstrap-table/fonts/bootstrap-table.ttf
查看文件


二进制
src/themes/bootstrap-table/fonts/bootstrap-table.woff
查看文件


+ 1 - 1
src/themes/materialize/bootstrap-table-materialize.js
查看文件 

@@ -1,7 +1,7 @@
 
 /**
 
  * @author zhixin wen <wenzhixin2010@gmail.com>
 
  * https://github.com/wenzhixin/bootstrap-table/
 
- * theme: https://github.com/jgthms/bulma/
 
+ * theme: https://materializecss.com/
 
  */
 
 
 $.extend($.fn.bootstrapTable.defaults, {