Added css frameworks pages

site/_data/themes.yml

@@ -0,0 +1,19 @@
+- name: bootstrap4
+  title: Bootstrap v4
+  description: The most popular HTML, CSS, and JavaScript framework.
+  url: https://getbootstrap.com/
+
+- name: bootstrap3
+  title: Bootstrap v3
+  description: The most popular HTML, CSS, and JavaScript framework.
+  url: https://getbootstrap.com/docs/3.4/
+
+- name: semantic
+  title: Semantic UI
+  description: UI component framework based around useful principles from natural language.
+  url: http://semantic-ui.com
+
+- name: bulma
+  title: Bulma
+  description: Modern CSS framework based on Flexbox.
+  url: http://bulma.io

site/_includes/docs-navbar.html

@@ -15,6 +15,11 @@
           Documentation
         </a>
       </li>
+      <li class="nav-item {% if page.group == "themes" %}active{% endif %}">
+        <a class="nav-link" href="{{ site.baseurl }}/themes">
+          CSS Frameworks
+        </a>
+      </li>
       <li class="nav-item">
         <a class="nav-link {% if page.title == "Examples" %}active{% endif %}"
           href="https://examples.bootstrap-table.com">

site/assets/css/style.css

@@ -11,6 +11,7 @@
   max-height: 200px;
 }
 
+.donate th,
 .donate td {
   text-align: center;
   vertical-align: middle !important;
@@ -25,7 +26,7 @@
   vertical-align: middle;
 }
 
-#share-buttons > a {
+#share-buttons>a {
   position: relative;
   text-align: left;
   height: 36px;
@@ -35,7 +36,7 @@
   color: silver;
 }
 
-#share-buttons > a {
+#share-buttons>a {
   position: relative;
   text-align: left;
   height: 36px;
@@ -45,38 +46,38 @@
   color: silver;
 }
 
-#share-buttons > a > svg {
+#share-buttons>a>svg {
   height: 18px;
   fill: #d5d5d5;
   margin-top: 9px;
 }
 
-#share-buttons > .github:hover,
-#share-buttons > .github:hover svg {
+#share-buttons>.github:hover,
+#share-buttons>.github:hover svg {
   color: #000;
   fill: #000;
 }
 
-#share-buttons > .twitter:hover,
-#share-buttons > .twitter:hover svg {
+#share-buttons>.twitter:hover,
+#share-buttons>.twitter:hover svg {
   color: #55acee;
   fill: #55acee;
 }
 
-#share-buttons > .facebook:hover,
-#share-buttons > .facebook:hover svg {
+#share-buttons>.facebook:hover,
+#share-buttons>.facebook:hover svg {
   color: #3b5998;
   fill: #3b5998;
 }
 
-#share-buttons > .linkedin:hover,
-#share-buttons > .linkedin:hover svg {
+#share-buttons>.linkedin:hover,
+#share-buttons>.linkedin:hover svg {
   color: #0077b5;
   fill: #0077b5;
 }
 
-#share-buttons > .mail:hover,
-#share-buttons > .mail:hover svg {
+#share-buttons>.mail:hover,
+#share-buttons>.mail:hover svg {
   color: #7d7d7d;
   fill: #7d7d7d;
 }
@@ -93,3 +94,111 @@
   margin-bottom: 1rem;
   color: #767676;
 }
+
+.btn-brand {
+  background: #7952B3;
+  color: #ffffff;
+}
+
+.btn-brand:hover {
+  background: #614092;
+  color: #ffffff;
+}
+
+.theme-card {
+  margin-bottom: 1rem;
+  display: block;
+  font-size: 14px;
+  -webkit-perspective: 1000px;
+  perspective: 1000px;
+}
+
+.theme-cards__title {
+  margin-bottom: 0;
+  font-size: 20px;
+}
+
+.theme-card__body {
+  position: relative;
+  display: block;
+  -webkit-transition: all .2s ease-out;
+  transition: all .2s ease-out;
+  height: 0;
+  padding-bottom: 74.5%;
+  background-color: #E5E9EF;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.06);
+  -webkit-transition: all .5s ease-out;
+  transition: all .5s ease-out;
+}
+
+.theme-card__body img,
+.theme-card__body .theme-card__img {
+  border-radius: 8px;
+  width: 100% !important;
+}
+
+.theme-card__body a.d-block {
+  height: 0;
+  padding-bottom: 74.5%;
+  overflow: hidden;
+}
+
+.theme-card__body:hover .theme-card__body__overlay,
+.theme-card__body:focus .theme-card__body__overlay {
+  opacity: 1;
+  visibility: visible;
+}
+
+.theme-card__body__overlay {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.theme-card__footer {
+  padding: 15px 8px;
+  color: #343434;
+}
+
+@media (max-width: 991px) {
+  .theme-card__footer {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+}
+
+@media (min-width: 576px) {
+  .theme-card__footer__item+.theme-card__footer__item {
+    text-align: right;
+  }
+}
+
+.theme-card__title,
+.theme-card__title:hover,
+.theme-card__title:focus {
+  font-weight: 500;
+  color: inherit;
+  font-size: 18px;
+}
+
+.theme-card__info {
+  font-size: 13px;
+  color: #838E95;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.theme-card__info a {
+  color: #838E95;
+}
+
+.fa-link {
+  font-size: 20px;
+  color: #333;
+}

site/docs/getting-started/introduction.md

@@ -6,6 +6,7 @@ group: getting-started
 redirect_from:
   - "/docs/"
   - "/getting-started/"
+  - "/themes/bootstrap4"
 toc: true
 ---
 

site/themes/bootstrap3.md

@@ -0,0 +1,95 @@
+---
+layout: simple
+title: Bootstrap v3
+description: A getting started of add Bootstrap Table to Bootstrap v3, how to download and use, basic templates, and more.
+group: themes
+toc: true
+---
+
+## Quick start
+
+Looking to quickly add Bootstrap Table to your <a href="https://getbootstrap.com/docs/3.4/" target="_blank">Bootstrap v3</a> project? Use CDN, provided for free by the folks at CDNJS. 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/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 Bootstrap.js, and then our JavaScript plugins.
+
+{% highlight html %}
+<script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/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)).

site/themes/bulma.md

@@ -0,0 +1,99 @@
+---
+layout: simple
+title: Bulma
+description: A getting started of add Bootstrap Table to Bulma, how to download and use, basic templates, and more.
+group: themes
+toc: true
+---
+
+## Quick start
+
+Looking to quickly add Bootstrap Table to your <a href="http://bulma.io" target="_blank">Bulma</a> project? Use CDN, provided for free by the folks at CDNJS. 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/bootstrap-table-bulma.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/bootstrap-table-bulma.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.
+
+For Bootstrap v4, we use [Font Awesome](https://fontawesome.com/icons) as the default icons, so need to import Font Awesome link.
+
+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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-bulma.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/bootstrap-table-bulma.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)).

site/themes/index.md

@@ -0,0 +1,33 @@
+---
+layout: simple
+title: CSS Frameworks
+description: A list of the integration with some of the most widely used CSS frameworks.
+group: themes
+---
+
+<div class="row">
+  {% for theme in site.data.themes %}
+  <div class="col-md-6">
+    <div class="theme-card">
+      <div class="theme-card__body">
+        <a class="d-block" href="https://examples.bootstrap-table.com?{{ theme.name }}">
+          <img width="600" height="450" src="{{ site.baseurl }}/assets/images/{{ theme.name }}.png">
+        </a>
+        <div class="theme-card__body__overlay">
+          <a class="btn btn-brand btn-sm" href="{{ site.baseurl }}/themes/{{ theme.name }}">Getting started</a>
+          <a class="btn btn-brand btn-sm" href="https://examples.bootstrap-table.com?{{ theme.name }}">Examples</a>
+        </div>
+      </div>
+      <div class="theme-card__footer">
+        <div class="theme-card__footer__item">
+          <a class="theme-card__title mr-1" href="https://examples.bootstrap-table.com?{{ theme.name }}">{{ theme.title }}</a>
+          <a class="float-right" href="{{ theme.url }}" target="_blank">
+            <i class="fa fa-link"></i>
+          </a>
+          <p class="theme-card__info">{{ theme.description }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>

site/themes/semantic.md

@@ -0,0 +1,100 @@
+---
+layout: simple
+title: Semantic UI
+description: A getting started of add Bootstrap Table to Semantic UI, how to download and use, basic templates, and more.
+group: themes
+toc: true
+---
+
+## Quick start
+
+Looking to quickly add Bootstrap Table to your <a href="http://semantic-ui.com" target="_blank">Semantic UI</a> 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/bootstrap-table-semantic.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 Semantic.js, and 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/bootstrap-table-semantic.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.
+
+For Semantic UI, we use [Font Awesome](https://fontawesome.com/icons) as the default icons, so need to import Font Awesome link.
+
+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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-semantic.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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></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/bootstrap-table-semantic.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)).

src/bootstrap-table.scss

@@ -1,6 +1,5 @@
 /**
  * @author zhixin wen <wenzhixin2010@gmail.com>
- * version: 1.13.5
  * https://github.com/wenzhixin/bootstrap-table/
  */
 

src/themes/bootstrap-table.scss

@@ -1,3 +1,9 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * version: 1.13.5
+ * https://github.com/wenzhixin/bootstrap-table/
+ */
+
 .bootstrap-table {
   .fixed-table-toolbar {
     &:after {

src/themes/bulma/bootstrap-table-bulma.js

@@ -1,5 +1,6 @@
 /**
  * @author zhixin wen <wenzhixin2010@gmail.com>
+ * https://github.com/wenzhixin/bootstrap-table/
  * theme: https://github.com/jgthms/bulma/
  */
 

src/themes/bulma/bootstrap-table-bulma.scss

@@ -1,5 +1,6 @@
 /**
  * @author zhixin wen <wenzhixin2010@gmail.com>
+ * https://github.com/wenzhixin/bootstrap-table/
  * theme: https://github.com/jgthms/bulma/
  */
 

src/themes/semantic/bootstrap-table-semantic.js

@@ -1,5 +1,6 @@
 /**
  * @author zhixin wen <wenzhixin2010@gmail.com>
+ * https://github.com/wenzhixin/bootstrap-table/
  * theme: https://github.com/Semantic-Org/Semantic-UI
  */
 

src/themes/semantic/bootstrap-table-semantic.scss

@@ -1,5 +1,6 @@
 /**
  * @author zhixin wen <wenzhixin2010@gmail.com>
+ * https://github.com/wenzhixin/bootstrap-table/
  * theme: https://github.com/Semantic-Org/Semantic-UI
  */