| 1 | ---
|
| 2 | layout: simple
|
| 3 | title: Foundation
|
| 4 | description: A getting started of add Bootstrap Table to Foundation, how to download and use, basic templates, and more.
|
| 5 | group: themes
|
| 6 | toc: true
|
| 7 | ---
|
| 8 |
|
| 9 | ## Quick start
|
| 10 |
|
| 11 | Looking to quickly add Bootstrap Table to your <a href="https://foundation.zurb.com/" target="_blank">Foundation</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/).
|
| 12 |
|
| 13 | ### CSS
|
| 14 |
|
| 15 | Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
|
| 16 |
|
| 17 | {% highlight html %}
|
| 18 | <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/foundation/bootstrap-table-foundation.min.css">
|
| 19 | {% endhighlight %}
|
| 20 |
|
| 21 | ### JS
|
| 22 |
|
| 23 | 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.
|
| 24 |
|
| 25 | {% highlight html %}
|
| 26 | <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
|
| 27 | <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/foundation/bootstrap-table-foundation.min.js"></script>
|
| 28 | {% endhighlight %}
|
| 29 |
|
| 30 | ## Starter template
|
| 31 |
|
| 32 | 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.
|
| 33 |
|
| 34 | For Foundation, we use [Font Awesome](https://fontawesome.com/icons) as the default icons, so need to import Font Awesome link.
|
| 35 |
|
| 36 | Put it all together and your pages should look like this:
|
| 37 |
|
| 38 | {% highlight html %}
|
| 39 | <!doctype html>
|
| 40 | <html lang="en">
|
| 41 | <head>
|
| 42 | <!-- Required meta tags -->
|
| 43 | <meta charset="utf-8">
|
| 44 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
| 45 |
|
| 46 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/css/foundation.min.css" integrity="sha256-xpOKVlYXzQ3P03j397+jWFZLMBXLES3IiryeClgU5og= sha384-gP4DhqyoT9b1vaikoHi9XQ8If7UNLO73JFOOlQV1RATrA7D0O7TjJZifac6NwPps sha512-AKwIib1E+xDeXe0tCgbc9uSvPwVYl6Awj7xl0FoaPFostZHOuDQ1abnDNCYtxL/HWEnVOMrFyf91TDgLPi9pNg==" crossorigin="anonymous">
|
| 47 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
| 48 | <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/foundation/bootstrap-table-foundation.min.css">
|
| 49 |
|
| 50 | <title>Hello, Bootstrap Table!</title>
|
| 51 | </head>
|
| 52 | <body>
|
| 53 | <table data-toggle="table">
|
| 54 | <thead>
|
| 55 | <tr>
|
| 56 | <th>Item ID</th>
|
| 57 | <th>Item Name</th>
|
| 58 | <th>Item Price</th>
|
| 59 | </tr>
|
| 60 | </thead>
|
| 61 | <tbody>
|
| 62 | <tr>
|
| 63 | <td>1</td>
|
| 64 | <td>Item 1</td>
|
| 65 | <td>$1</td>
|
| 66 | </tr>
|
| 67 | <tr>
|
| 68 | <td>2</td>
|
| 69 | <td>Item 2</td>
|
| 70 | <td>$2</td>
|
| 71 | </tr>
|
| 72 | </tbody>
|
| 73 | </table>
|
| 74 |
|
| 75 | <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
| 76 | <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/js/foundation.min.js" integrity="sha256-/PFxCnsMh+nTuM0k3VJCRch1gwnCfKjaP8rJNq5SoBg= sha384-9ksAFjQjZnpqt6VtpjMjlp2S0qrGbcwF/rvrLUg2vciMhwc1UJJeAAOLuJ96w+Nj sha512-UMSn6RHqqJeJcIfV1eS2tPKCjzaHkU/KqgAnQ7Nzn0mLicFxaVhm9vq7zG5+0LALt15j1ljlg8Fp9PT1VGNmDw==" crossorigin="anonymous"></script>
|
| 77 | <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
|
| 78 | <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/themes/foundation/bootstrap-table-foundation.min.js"></script>
|
| 79 | </body>
|
| 80 | </html>
|
| 81 | {% endhighlight %}
|
| 82 |
|
| 83 | ### HTML5 doctype
|
| 84 |
|
| 85 | 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.
|
| 86 |
|
| 87 | {% highlight html %}
|
| 88 | <!doctype html>
|
| 89 | <html lang="en">
|
| 90 | ...
|
| 91 | </html>
|
| 92 | {% endhighlight %}
|
| 93 |
|
| 94 | ## Community
|
| 95 |
|
| 96 | Stay up to date on the development of Bootstrap Table and reach out to the community with these helpful resources.
|
| 97 |
|
| 98 | - Follow [@{{ site.twitter }} on Twitter](https://twitter.com/{{ site.twitter }}).
|
| 99 | - Read [The Official Bootstrap Table News]({{ site.base_url }}/news).
|
| 100 | - Implementation help may be found at Stack Overflow (tagged [`bootstrap-table`](https://stackoverflow.com/questions/tagged/bootstrap-table)).
|